CSS - BEM - Cheat Sheet

bem-cheat-sheet.txt

For more details, see :
SMACCS and Fifty Shades of BEM (http://blog.kaelig.fr/post/48196348743/fifty-shades-of-bem)


prefix-ComponentName
prefix-ComponentName-MODIFIERNAME
prefix-ComponentName-subObject
prefix-ComponentName-subObject-MODIFIERNAME

p- Page specific (class applied on the body element), very useful for static pages where maintainability is not at stake — should be avoided in the application itself (e.g.: p-Homepage).
l- Layout, columning, wrappers and containers… (e.g.: l-Masthead, l-Footer)
c- For components (e.g.: c-Dropdown, c-Button…).
u- Utility classes — will probably never change, should never be overridden anywhere else in our code (e.g.: u-textCenter, u-clearfix…).
js- Hooks for JavaScript: should never appear in the CSS itself.

consider also :

.navigation {}
.navigation__item {}
.navigation__item--active {}


component-name
component-name--modifier-name
component-name__sub-object
component-name__sub-object--modifier-name


org-ComponentName
org-ComponentName--modifiername
org-ComponentName-subObject
org-ComponentName-subObject--modifiername