What is CSS BEM
Posted By : Sushmit Gaur | 30-Jul-2018
The Block, Element, Modifier methodology or BEM developed by the team at Yendesk is a popular naming convention for classes in HTML and CSS.
Here's how BEM code usually looks like:
In this CSS methodology a "Block" is a superior abstraction of a stand alone component, for example a button: ".btn { }". This block should be considered as a parent. Child elements, can be placed inside and are denoted by two underscores followed by the name of the block like ".btn__price { }".
Finally, modifiers are used to manipulate the block so that style can be applied to that particular component without affecting changes on an unrelated module which is done by appending 2 hyphens to the name of the block a bit like ".btn--orange".
Here's how the markup might then look like:
This method helps identify which classes are responsible for what and how they depend on one another. For developers build their own components and modify the existing block as they desire. This way any developers can create many different combinations of buttons simply by changing a class in the markup.
Why BEM ?
- More structured CSS and UI
- Styles are easier to understand and adapt in a team
- Less confusing than the other methods like SMACSS
- Less cascading issues
- Blocks can be transferred from finished projects to new projects
- Reduces the amount of CSS code
Sass and BEM
Following code in SASS:
will result in something like this:
In conclusion BEM useful for constructing scalable and maintainable interfaces where team members have clear idea of how things can be improved.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Sushmit Gaur
Sushmit is a self taught programmer, having experience in UI Development for Web Applications. With Experience of 3 months as an intern in React.js technology looking forward to learn new skill set and challenges for further assessment in career.