Keeping track of every single HTML element might become difficult. There’s this CSS naming convention called block element modifier, also known as BEM. What it means is there are three different CSS classes of tags.
Goal
Follow along to learn what BEM is and how to use it
CSS
A Quick refresher on what css is:
CSS Explanation
- Cascading Style Sheet
- Determines how HTML elements will be displayed
- Three ways to declare:
- Inline
- Internal (within HEAD)
- External (within linked stylesheet)
The preferred way to write CSS is external because it’s cleaner. Meaning that it allows you to use the same stylesheet for every singe page in your application. That way you don’t have to cut and paste into every head of every page or even add css into every single tag that is created, which would be very messy and unmaintainable.
What is BEM?
BEM is a CSS naming convention, short for block element modifier. What it means is there are three different CSS classes of tags.
BEM Explanation
- Block, Element, Modifier naming convention (BEM)
- Block (parent level) elements get normal names (ex: button)
- Modifier elements get double dashes (ex: button–red, button–inline)
- Element (child level) elements get double underscores (ex: button__text)
There is Block (parent level) elements that get normal class names. Something like button. You might have a dedicated CSS block to a button. But what if you wanted to change what that button looks like? You’d have modifier elements which get double dashes. Some examples are button--red, button--inline, button--wide. It builds off the button class. Button define how it looks like and maybe the modifier only changes a property like: color, width, or height. Then you have element (child level) elements which are within block level elements. Something like button__text or something within that button. With BEM it is very easy to see what you need to change and what that would change on the final HTML page. For example, if you change a block level like a button it would change every single button on the page. If you wanted to change only one button you would create a modifier for that button, if it didn’t exist. This way you stay organized and you dont accidentally change a line of css and it affects more than you want it to affect. This is just one design scheme of naming classes.
Do you have to use BEM?
No, you don’t. Its a scheme that is very popular among front end developers. But you should have some sort of system of organization, otherwise code starts to become unmaintainable. You might change one line of css which will change some other tag on a different page that you forgot that you assigned to this tag. Definitely have some sort of system of organization so you can better maintain your page and so other people who start working can better maintain your page.
Conclusion
BEM is a popular CSS naming convention. There are three different CSS classes of tags. There are: Block (parent level) elements that get normal names (ex: button), Modifier elements that get double dashes (ex: button–red, button–inline), and Element (child level) elements that get double underscores (ex: button__text). This is one design scheme and you don’t have to use it, but make sure to have a system of organization or else code starts to become unmaintainable.