o_ad8g
Last Updated: November 09, 2017
·
699
· szymonkor
Zrzut ekranu z 2016 04 16 07 43 55

BEM in CSS

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.

Say Thanks
Respond

2 Responses
Add your response

26763
12003957 10206752435102297 2524621803006121539 n

Coderwall is written in basscss - similar concepts.

over 1 year ago ·
27219
Me

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

over 1 year ago ·