The Popular CSS architecture BEM

A mentor used to always tell me “there are infinite ways of skinning a cat”. I can’t explain that quote but took it to mean that your tools are your own.

Code Structure Benefits

Confidence and efficiency as a programmer is something that is in constant ebb and flow, especially at a junior level. There’s a myriad of ways to organize a web development project and recognizing them is something that will make you more confident as a coder and efficient as a code-reader.

So in between your jumbled Javascript files, relax by learning about current popular file structure or naming conventions. There aren’t many and lots of coders will pick and chose their own. That said, use conventions to your own power along the way however you please.

BEM Methodology is one that has helped me build confidence and greaten my scalability skills for quite some time

Why BEM

BEM methodology is one of the more popular organization philosophies for web development projects. BEM is most used as a naming convention for HTML/CSS classes. However, the concepts can go beyond. And this methodology is popular for good reason.

1.It communicates purpose or function

2. It communicates component structure

3. It sets a consistent low-level or specificity for styling selectors

BEM by Example from Nathan Rambeck

4. It’s easy to onboard. To use BEM, all you have to do is follow BEM naming conventions. According to State of CSS, BEM is the most popular methodology with new coders and those with longtime exposure.

5. Similarly BEM is popular with software engineers of all salaries, the popularity often going up as the salary does.

Get more demographic facts about BEM and other CSS-related technologies through this awesome website.

The State of CSS 2019: Methodologies

The Basics

To reiterate. BEM is a naming convention for HTML and CSS classes. The methodology was developed by Yandex in order to better connect the HTML and CSS files and make developers be more descriptive with their class names.

BEM stands for Block Element Modifier, the three types of BEM entities.

• a block is an entity that exists independently, a parent, a top-level abstraction (ex: button, navigation bar, menu, form, …). The BEM class name simply is the name of the block (ex: btn navbar login-form …)
• an element is an entity that depends on a block, a child component (ex: button’s text, navigation bar’s logo, menu list item, form label, …). The BEM class name is the name of the parent block followed by two underscores and the element name (ex: btn__text navbar__logo menu__item …)
• a modifier is a an entity which describes the style or behavior of a block or an element. A modifier is added to a block or element with a double hyphen to describe its style or functionality. (ex: btn--animated logo--primary menu__item--disabled …)

Check out BEM in action with a simple navigation bar example.

BEM navbar

Note that

• Nested elements more than 1 level deep, such as nav__item and nav__link are still written as dependent on the block nav
• Modifiers should add a class name since they add to another layer of styling to a block or element.

<button class="btn btn--animated">Click Me</button>
//NOT
<button class="btn--animated">Click Me</button>

CSS

The accompanying CSS will be so clean. BEM makes specifying by class really straightforward.

SCSS

Nesting elements in SCSS feels even more satisfying. The different styling elements are in their own modular sections. And when you edit the stylesheet, you know exactly what you’re changing.

Conclusion

BEM is really satisfying and guaranteed to make you happier when building your web development project or reading someone else’s. Enjoy being happy.