Hey Gang, Feel lucky to see you again. Every year design trends getting changed and then we plan to adapt our websites for trendy and present day feel. Sadly, website may sometimes styled without any structure or naming conventions. This leads to an unmaintainable CSS codebase and crack out our plans😥😥 be like.
Uh, feel awkward right. But, don't getting trouble with that because every problem definitely have a solution. Likewise, we convert unmaintainable CSS codebase to maintainable using BEM naming convention.
BEM - Block Element Modifier
BEM is constructed on basis of class name
selector only which not use id
or tag name
selector.
Above image seems little bit weired😥. It's not a big deal and hope keep continue reading and you grasp that tricks🎉.
Block
Block is a standalone entity that is meaningful on its own and is a top-level abstraction of a new component.
For instance,
header
container
menu
checkbox
input
Naming
Block names may consist of Latin letters, digits, and dashes. To form a CSS class, add a short prefix for namespacing: .block
// Blocks are named as standard CSS classes
.block {
}
//example
.card {
}
Element
Element is a parts of a block (Child items of block) and have no standalone meaning. Any element is semantically tied to its block.
For instance,
menu item
list item
checkbox caption
header title
Naming
Element names may consist of Latin letters, digits, dashes and underscores.
CSS class is formed as block name followed by two underscores and then element name: .block__elem
// Elements declared with 2 underscores, after block
.block__element {
}
//example
.card__title{
}
Modifier
Flags on blocks or elements. Use them to change appearance, behavior or state.
In simple words, the use of a ‘modifier’ to apply the additional unique styles.
For instance,
disabled
highlighted
checked
fixed
Naming
Modifier names may consist of Latin letters, digits, dashes and underscores.
CSS class is formed as block’s or element’s name followed by two dashes (--
):
- If block's modifier, then
.block--mod
. - If Element's modifier, then
.block__elem--mod
.
// Modifiers declared with 2 dashes, after block
.block--modifier {
}
//example
.card--dark{
}
// Modifiers declared with 2 dashes, after element
.block__element--modifier {
}
//example
.card__btn--large{
}
Hey still with me🥳, I feel you getting curious about BEM. So, It's my pleasure to show the live demo. Just hover the containers, you may getting an confidence about block-element relationship (parent-child relationship).
I can get your question🤔
there are so many naming conventions like OOCSS
, SMACSS
, SUITCSS
, Atomic
. But, why we choose BEM?? right.
The answer is..
If we are reading the markup instead of CSS, we should be able to quickly get an idea of which element depends on another (in the previous example we can see that .card__title depends on .card, even if we don’t know what that does just yet.)
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.
Use BEM as it way
ofcourse you can break down the rule of BEM like below,
//completely unrelated
.nav .nav__listItem .btn--orange {
background-color: green;
}
yes you are right which seems BEM naming convention. But, it's not😑. which only make confusion and incosistent code. Hope you grasp my point.
Final instance for BEM
Hope you getting curious for using BEM in your projects. So, getting clear thought about BEM. I will show a little massive example below,
Image credits goes to 99elements
let's test BEM skills. From above image, can you identify which one is block
/ element
/ modifier
. Don't hesitate, post your answer below as comment.
If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.
Thanks for Reading!!
Preethi
- Make your CSS life easier
Top comments (6)
I still think the problem these naming conventions are trying to solve result directly from people deeply misunderstanding the design and purpose of CSS.
Luckily, the direction CSS is evolving in seems to still follow the path of its intended design, with
@scope
addressing many of the problems people attempt to fix with conventions like BEM.Soon, selectors like
.nav__link {/* Rules */}
could turn into@scope (#main-nav) { a:link {/* Rules */} }
Nicely put everything. Very well explained. 👌🏻
Hii Anand-Baraik, appreciate your response and which shows you grasped that concepts🎉. hope we will meet on upcoming blogs. Happy learning.
Yeah sure. Looking forward for your upcoming contents.
very nice job❤
Hii sadiul hakim, Happy to see your comment and really appreciate your support.