How to use BEM Notation

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?

Share the Post:
Cover of book AI in Project Management

What's inside

Explore the transformative power of AI in project management with Krzysztof Nyrek’s “AI in Project Management.” This essential guide offers in-depth knowledge on automating routine tasks, optimizing resource management, and utilizing AI for risk estimation and decision-making. Learn how to implement AI tools for improved project efficiency, cost reduction, and enhanced quality management. Ideal for project managers and IT professionals, this book provides actionable insights and practical examples to harness AI technology effectively. Enhance your project outcomes and stay ahead in the digital era with this indispensable resource.

Embrace the future of project management with AI-driven solutions that save time, reduce costs, and boost project success.

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.

X