learn programming

How to use BEM Notation

Widok na Karkonosze

This week was a short week, in terms of the number of hours spent programming, but it brought a very important issue to my knowledge bank: BEM.

When I first started with CSS style sheets, class naming was a major challenge. It was easy to get confused, which led to the page not displaying the way I wanted it to. Apart from the lack of time, this was the second reason why I left programming. I don’t like chaos, and I had no idea how to sort it out.

Today, it turns out that the Block Element Modifier standard has been developed, which allows you to deal with naming classes so that the writing of styles in CSS remains readable. In general, the principle of BEM is that the website is divided into blocks. In blocks, we distinguish elements, and where necessary, we add modifiers to highlight certain content. Keeping semantics in HTML helps a lot in applying the BEM standard.

In the CSS file, we keep two rules that make it easier to interpret the code:

  • class naming is created as follows: .block__element—modifier;
  • the arrangement of classes in CSS should correspond to the arrangement of blocks in HTML code.

Simple, and in practice, they make it very easy to control how the website looks.

A longer description of what BEM is, you can find at this link: http://getbem.com/naming/

This week I added the code of the website I’m working on as part of the WTF training to my GitHub repository. This is actually the second project that I share publicly. For now, there is no madness, but I am slowly building a portfolio. If you are curious about what is happening in my code, I invite you: https://github.com/Dekstryn

So much for this week. The future should be more intense. After all, the holidays are approaching, and the weather is excellent so why not spend more time at the computer?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.