12/14/2015 By emehany
Large projects with a good amount of design and creative work require a strategy to organize and maintain all of its CSS components. In such large projects, it becomes harder to maintain or scale the components if there is no clear naming convention in place to identify the different components used in many different views.
BEM ( Block, Element, Modifier )
The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.
Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well.
Block names may consist of Latin letters, digits, and dashes. To form a CSS class, add a short prefix for namespacing:.block
Any DOM node can be a block if it accepts a class name.
Parts of a block and have no standalone meaning. Any element is semantically tied to its block.
Element names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block name plus two underscores plus element name:.block__elem
Any DOM node within a block can be an element. Within a given block, all elements are semantically equal.
Good
.block__elem { color: #042; }
Bad
.block .block__elem { color: #042; } div.block__elem { color: #042; }
Flags on blocks or elements. Use them to change appearance, behavior or state.
Modifier names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block’s or element’s name plus two dashes:.block--mod
or .block__mod--mod
and.block--color-black
with .block--color-red
. Spaces in complicated modifiers are replaced by dash.
Modifier is an extra class name which you add to a block/element DOM node. Add modifier classes only to blocks/elements they modify, and keep the original class:
Use modifier class name as selector:
.block--hidden { }
To alter elements based on a block-level modifier:
.block--mod .block__elem { }
Element modifier:
.block__elem--mod { }
Suppose you have block form with modifiers theme: 'xmas'
and simple: true
and with elements input
and submit
, and elementsubmit
with its own modifier disabled: true
for not submitting form while it's not filled:
.form { /* ... */ } .form--theme-xmas { /* ... */ } .form--simple { /* ... */ } .form__input { /* ... */ } .form__submit { /* ... */ } .form__submit--disabled { /* ... */ }
Login to Comment