Style War of Objects

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

--

--

--

Are you there? Those who are hype, those who try to find their own hype. Listen carefully, because we’d love to build something great together!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Getting started with GCP

Ever since I was a little boy, I have only ever wanted to be a Doctor. It was all I ever dreamed of

Managing Chaos and Improving Reliability with Gremlin

My Splitting class's 'Thumb Rule'

ERROR: The request could not be satisfied

Building a Business Discord in 6 Easy Steps

Zenity is a program/tool in Linux which create simple dialog box that interact graphically with the…

📢#AuroraFS second stage performance #AIRDROP will start as a warm-up tomorrow.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hypeople

Hypeople

Are you there? Those who are hype, those who try to find their own hype. Listen carefully, because we’d love to build something great together!

More from Medium

[CHAPTER 7] Discussion Points

Working as a data specialist in a ‘cross-functional team’

CS373 Spring 2022: Cole Weinman — Week 12

CS373 Spring 2022 — Week 12