BEM
“BEM — Block Element Modifier is a methodology that helps you create reusable components and code sharing in front-end development.”
BEM methodology in CSS is a component-based approach for web development where the idea is to divide the user interface into various independent blocks. Its intention is to help developers better understand the relationship between HTML and CSS in a project. All selectors in a BEM have the same weight which makes it much easier to redefine styles written according to BEM methodology. In BEM, the block can have different elements, and both blocks and elements can have several modifiers. The best way to use BEM is with classes and not to use IDs because classes allow you to repeat names if necessary and create a more consistent coding structure. The main advantage of
BEM is it defines the individual task of each tag and their relation to another.
Blocks are independent components in a page they can be header, content, sidebar, footer, and search. A block name is always unique, setting the namespace for elements and providing a visible connection between the block parts. CSS class is formed as just the block:
.block
Element is a component inside the block that performs a particular function. Any element is semantically tied to its block. An element can be for example, a text input box with a button. Class is formed by the block name plus two underscores followed by the element name:
.block__.element
Modifier is how we represent the variations of a block. For example, the button being color red. CSS class is formed with the block or element’s name plus two dashes:
.block__.element--.modifier
which is an element modifier or the block-level modifiers can be directly attached to the block like:.block- -.modifier
Pros of BEM:
Better HTML/CSS decoupling - By avoiding use of HTML element names in CSS selectors, BEM makes CSS code readily portable to a different HTML structure.
Better CSS performance - Browsers evaluate CSS selectors right to left and BEM encourages frontend developers to create a flat CSS structure with no nested selectors. So the less browsers have to evaluate, the faster they can render.
No CSS conflicts - BEM avoids CSS conflicts by using unique contextual class names for every block, element and modifier combination.
Ease of code maintenance - BEM's modular approach encourages developing independent modules of code and hence easier to maintain & update without affecting other modules in the project.
Cons of BEM:
File size bloating - It is known that BEM can bloat file sizes with the longer CSS class names, but this can easily be overcome by minifying and gzipping production code.
Ugly HTML code - While the overall HTML code does 'look' ugly with BEM class names, the visitor of the website or application will not look in the source too often, so it is not really an issue.
Last updated
Was this helpful?