Last Updated: November 09, 2017
· szymonkor


Notes from reading: http://blog.apptension.com/2016/02/03/introduction-to-bem/. The best intro I found on the web.

BEM is not a recent concept, it was created in 2005. Use it, because it is good stuff. Wise guys at Google (Google’s Material Design Lite was built using BEM naming rules) or Wimdu use it. It is a simple naming convention that influences the way you think about your app and components. BEM makes CSS understandable and easy to maintain.

  • B as Block. Block is an independent part of the site, a component. Named like menu, main-nav. Lowerscore latin chars with hyphens.
  • E as Element. Element of the block. Name preceded by double underscore and a block name. main-navlink, menuprice. It applies to nested elements too - there's no .blockelement1element2!
  • M as Modifier. It modifies default appearance or behavior of the block. Name is preceded by a single underscore and a block name.

Of course you may use camel case or a hyphen insted of underscore.

Styles should be reusable. Don't nest them in your CSS. In Sass, nest elements using & operator.

2 Responses
Add your response


Coderwall is written in basscss - similar concepts.

over 1 year ago ·

i personally prefer SUIT convention ( https://suitcss.github.io/ ) but BEM or basscss rocks too.

over 1 year ago ·