Learn BEM CSS with examples in 1 minute

Do you want to create more efficient and manageable code in CSS?

With BEM CSS, you can easily name and order your blocks, making it easy to understand and manage your code.

Additionally, BEM aids in modularity and code reuse.

Get started with BEM today and see the benefits for yourself!

What is BEM CSS?

BEM stands for Block Element Modifier, and it is a way of naming your elements so that they are easier to understand and manage. BEM CSS is a great way to keep your css files organized and easy to read.

• It helps in creating reusable components
• Promotes modularity of CSS code
• It makes your code readable and scaleable
• Provides Low Specificity across CSS Selectors

It is recommended to use it with a CSS preprocessor like Sass. But, it can also be used without a preprocessor.

BEM CSS Examples

The syntax of BEM is super straightforward.

• .block
• .block--modifier
• .block__element
• .block__element--modifier

Block:

It's an upper-level component or the main block.

Example:

• (.card)
• (.article)
• (.btn)

Element:

Elements are the pieces that build a block.

Example:

• (.card__title)
• (.article__content)
• (.btn__icon)

Modifier:

It's like variants of the block or an element. Like (.btn--primary, .card--lg)

Example:

• (.card--lg, .card__title--light)
• (.article--featured, .article__content--sm)
• (.btn--primary, .btn__icon--animate)

Conclusion

If you're looking to streamline your CSS development process, BEM might be the naming convention!

As explained in detail in this article that BEM CSS is a great way to improve your CSS development workflow and make your code more organized, readable, and maintainable.

So why not give it a try?

You can read more about BEM or explore the examples provided in this BEM cheat sheet.