In a long-term project, frontend developers have a huge burden. Complex nested selectors, unnecessary IDs, and life-saving !important’s. Did it sound familiar from somewhere? I have listed the terms that you will often come across in projects whose architecture is not properly designed. These uses will cause serious style conflicts in scalable and sustainable projects and will destroy the performance and controllability of the project over time.
!important saves your day in a project but darkens your future.
I will give you a suggestion to avoid these uses that create a snowball effect on our projects. I will talk about BEM (Block, Element, Modifier) methodologies.
BEM Methodology for Sustainable CSS
BEM is a component-based web development methodology developed by Yandex, as well as a popular naming convention used today. It aims to enable the development of mixed interface structures without copy-paste, reusable and fast results. It helps frontend developers to understand the relationship between HTML and CSS.
Block __ Element — Modifier
BEM collects the objects found in our interface on the CSS side under three main headings:
- Block: They are elements that generate unity independently. Our header, contact form, etc. objects are our block objects. Actually, we can say our main components. It is enough to define a semantic class name to name it.
- Element: They are objects that are contained within block objects and are their internal elements. After the class name, two lower dashes (“__”) are used and the necessary textual attachment is used.
- Modifier: We use it for non-structural changes in our interface elements in different situations. We can give examples such as active-passive, big-small elements. It is used with two consecutive middle lines (“-”) and the necessary textual attachment.
If I need to exemplify:
<a class="btn btn--big btn--orange" href="https://www.digitalact.com.tr">
<span class="btn__price">$9.99</span>
<span class="btn__text">Subscribe</span>
</a>Pros
- Readable, predictable code structure
- Sustainable code structure
- Code structure freed from nested definitions
- Reusable, copy & paste reducing code structure
- Code structure that reduces complexity
It added extra motivation and agility to the team.
BEM is a suitable method for a sustainable CSS architecture in your medium-sized and comprehensive projects. The communication within the team, which we attach great importance to since the first day we applied, has increased significantly. More precisely, our frontend and backend teams asked each other fewer questions after adopting this methodology. The new members of the team have adapted to the projects faster since the day they started and this has positively affected our agility.
Actually, I can say that motivation was one of the biggest things that BEM added to us. No developer would like to work on a project with a complex code structure because his/her motivation will decrease over time, which affects the performance.
If I continue with a realistic example, we have been working with enthusiasm on the first day, while doing the project of a customer that we have designed and still serve with the BEM methodology since 2017.
See you~
by Burak Yıldırım
