BEM is a highly useful, powerful, and easy naming convention for CSS class names that makes your front-end code less complicated to examine and understand, less complicated to work with, less complicated to scale, extra strong, explicit, and extra strict. A BEM class name includes up to three parts:

[BLOCKS]__[ELEMENTS]–[MODIFIERS]

[BLOCKS]= .block{}

The first element of the component is defined as the block and  represents the highest level of an abstraction or component. The most common blocks are : <header>, <aside>, <main>, <footer>, <article>, <section>, <ul>, <div>.

[ELEMENTS] = .block__element{}

Following two underscores and the block you will find the element. This one represents a descendent of .block that helps form .block as a whole, any DOM node within a block can be an element. Within a given block, all elements are semantically equal.

[MODIFIERS]= .block__element–modifier{}

Right after the block or element you will find two hyphens and the modifier. This one can take two forms : .block–modifier or .block__element–modifier

A good practice is that the modifiers are never added to the HTML tag without the class of block or element that precedes them .block .block–modifier is correct.

Advantages and disadvantages

The BEM methodology is constantly growing, but it has proven its efficiency by establishing a good hierarchy in the development of platforms.

• Adds specificity: It uses a unique selector for each rule, which allows to reduce it and do fewer repetitions.
• Increases independence: Blocks can be moved anywhere in the document, without affecting styles.
• Allows reusability: It is possible to recycle certain areas of code from one project to another, this due to the non-existence of major dependencies in terms of the implementation of each structured blocks.

However, there are some opinions against this methodology. The most common are:

• The conventions can be very long.
• It can take time for some people to learn the methodology.
• The organizational system can be difficult to implement in small projects.

Example Methodologie BEM

Example 2 Methodologie BEM

Code HTML – CSS

---