loading...

Is BEM still a thing in a component-based world?

sandro_roth profile image Sandro ・2 min read

You remember BEM? BEM - Block, Element, Modifier - is a methodology that helps creating better styling wether it's CSS, SASS/SCSS, LESS, ... It's naming convention, every class name starts with its block, not just creates more reusable code but creates some sort of (manual) scoping.

Instead of relying on global selectors or deeply nested selectors, you don't nest your selectors at all and keep a clean separation of blocks, elements and modifiers. Every selector only applies to the component it was written for.

// Global selector
// It may affect hyperlinks of any other component
a { color: red; }

// Deeply nested selectors
// It's hard to follow and makes changing the HTML structure a pain
.header > div > div.secondary + span a {
  color: orange;
}

// BEM
.button { ... }                 // Block
.button__icon { ... }           // Element
.button__text { ... }           // Element
.button.button--primary { ... } // Modifier

But is BEM still a thing today? Component styles of Angular are automatically scoped to the specific component. Styling in .vue files (Vue.js) are scoped when adding the scoped attribute. Why should we bother with keeping a manual naming convention like BEM?

Reasons to use BEM

A simple and intuitive naming convention

Component-based styling may result in a cleaner styling that is easier to read, understand and manage - but having a consistent naming convention still can improve your CSS code. And that's exactly what you get with BEM.

Yes, the syntax with __ and -- may look a bit weird at the beginning, but it improves readability and separation of the three parts.

Simple selectors

Even in a component-based world, you could use generic meaningless selectors that no one will ever understand, nest your selectors deeper than the Mariana Trench and use !important everywhere.

BEM uses simple self-explanatory selectors, (almost) no nesting and no !important.

One component, multiple blocks

Yes, a component should be small. And smaller than that. And it should be responsible for one thing and only one thing.

Probably it's just me, but sometimes I develop components that are composed by multiple blocks. These blocks are small, have no (UI) logic and are highly coupled with the component. They are not meant to be reused somewhere else and extracting them into separate components would just result in a huge overhead (1x component file, 1x mock data, 1x test file, 1x styling, 1x storybook = 5 files).

I therefore create multiple independent blocks for the same component. This approach keeps my styling maintainable and easy to understand, without an overhead.

Conclusion

Yes, BEM is still a thing in a component-based world - at least for me. There are a lot of heating discussions about CSS and styling in general so I cannot speak for everyone and there is no right or wrong here.

What I did not cover here is CSS-in-JS. Using styled-components, you will not have modifier classes anymore and use props instead but you could still use blocks and elements.

Note: This is my first post ever (not just on this platform). I hope you like it and I'm sorry for my bad english skills.

Discussion

pic
Editor guide
Collapse
anduser96 profile image
Andrei Gatej

I also use BEM every time I get to write CSS.
It makes things a lot more easier to understand in my opinion.

Recently I’ve started using a lot of utility classes for basic styles.

Collapse
sandro_roth profile image
Sandro Author

Do you still use BEM or you do have any naming convention for classes when developing with a component-based framework/library?