The Best Naming Model in Html & CSS - BEM

BEM is an abbreviation of the key elements of the methodology —Block, Element and Modifier. It is a popular naming convention for classes in HTML and CSS.
Here’s an example:-

/* Block component */
.btn {}

/* Element that depends upon the block */ 
.btn__play {}

/* Modifier that changes the style of the block */
.btn--blue {} 
.btn--big {}

The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.

1. Block

Naming

Block names may consist of Latin letters, digits, and dashes.
To form a CSS class, add a short prefix for namespacing :
.block

HTML

Any DOM node can be a block if it accepts a class name.
<div class="block">...</div>

CSS

• Use class name selector only
• No tag name or ids

.block { color: #032; }

2. Element

It is a Parts of a block and have no meaning on its own.
Any element is semantically tied to its block.

Naming

Element names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block name plus two underscores plus element name : .block__element

HTML

Any DOM node within a block can be an element. Within a given block, all elements are equal.
<div class="block">
...
<span class="block__element"></span>
</div>

CSS

• Use class name selector only > .block__element { color: #032; }

3. Modifier

Attributes on blocks or elements. Use them to change appearance, behavior or state.

Naming

Modifier names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block’s or element’s name plus two dashes:
.block--mod or .block--element__mod and .block--color-black with .block--color-blue.
Spaces are compensated with dashes.

HTML

Modifier is an extra class name which you add to a block/element DOM node. Add modifier classes only to blocks/elements they modify, and keep the original class:
<div class="block block--mod">...</div>
<div class="block block--size-big
block--shadow-yes">...</div>

CSS

• Use modifier class name as selector:

.block--hidden { }

• To alter elements based on a block-level modifier:

.block--mod .block__element { }

• Element modifier:

.block__element--mod { }

Reference

I learnt a lot about a new naming convention for html elements. A big thanks to Dom aka dcode. if you guys want to learn more about BEM,
check out his youtube video :
Link

Comments

[shadowtime2000]

BEM isn't necessarily the best CSS naming model. I feel like I have seen like 3 articles just like this talking about how BEM is super good in the last week.

[Vaibhav-Singh21]

its good when you are work on big production level. so making a habit out of it is no harm.
P.S. it depends on person to person, whatever suits to one self.
cheers!!