An Interest In:
Web News this Week
- March 12, 2024
- March 11, 2024
- March 10, 2024
- March 9, 2024
- March 8, 2024
- March 7, 2024
- March 6, 2024
Understanding of CSS BEM
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 blocks or elements 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 dont 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,
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 heartand 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
Original Link: https://dev.to/preethi_dev/understanding-of-css-bem-26gg
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To