Richard Hart

Head of Something @ Somewhere
Kent, UK

My Music
My Photos

LinkedIn
Mastodon

BEM CSS

All too often I find that CSS quickly becomes a real tangle of clashing styles and names. No matter how hard I try something always ends up breaking the styles of something else. Moving to SASS helped a lot but I find on the flip side I end up with styling that’s overly nested.

I’ve recently come across BEM which is CSS methodology for naming classes. BEM stands for Blocks, Elements, Modifiers. I’ve previously looked into SMACSS but still found things fell apart (probably because I’m doing it wrong). BEM looks a lot simpler and easier to maintain. A simple example would be the following styling for an article.

.article // Block
.article__body // Element
.article--featured // Modifier

I’m not going to go into much detail as there are already some great posts out there on the subject. I still feel like CSS itself is a bit of a broken solution, although I can’t articulate why or what would be a better option.