How to Write Better CSS With Blocks, Elements, and Modifiers (BEM)

Write cleaner, clearer style sheets

Image by Joe Hanko on Wikimedia Commons

This piece and corresponding video are especially for developers who want to optimize their CSS. It’s very important to have readable CSS — for your teammates and for yourself. It’ll help you and your team develop the website or application in the future.

In my opinion, the CSS naming convention Block-Element-Modifier (BEM) is the perfect way to write your CSS classes and selectors better than before.

If you’d like a visual example of how I’ll change my already developed CSS into the more readable BEM, please check out the video below.

If you’re more into reading, please follow the text below.