The Evolution Of CSS: A Simple Way To Use CSS Class Naming

The Evolution Of CSS: A Simple Way To Use CSS Class Naming

What Should Be Followed For The Best CSS Architecture?

  • First and foremost, you must check if it’s safe to edit a class without interrupting any other CSS.
  • Avoid multiple parenting class names.
  • Give a meaningful class name for the section design.
  • The usage of the class name must be in formatting manner throughout the design.

What BEM Is?

BEM is a class naming convention, that allows the developer to write styles in a modular and maintainable way. The abbreviation BEM stands for Block‑Element‑Modifier.

What BEM Is?
MODIFIER

BLOCK

A block is a component. Let’s take an example to understand the functionality;

BLOCK
btn — secondary

ELEMENT

Elements are a subset of blocks. When you say that something is an element, then you add __element to the block name. So, if you see a class that says .team__member, you’ll know that there’s a member element within the .team block.

ELEMENT
  • You know if something is a subset element.

MODIFIER

The next part of BEM is — modifiers.

MODIFIER
HTML MODIFIER

Why Should We Consider BEM?

  • If we need to make a new style of a component, we can easily see which modifiers and its subset already exist. As a developer, you could conclude that we are not required to write any CSS because of the pre-existing modifier.
  • If anyone is going through the CSS, they will easily get the idea of which elements are dependent on each other.
  • Each and every component will be in module wise.
  • Block styles are never dependent on other elements on a page so there is not an issue of cascading.
  • Designing independent blocks in different ways, and reusing them will reduce the CSS duplication and help to maintain the speed and the accuracy of the website.
  • BEM methodology gives your CSS code a meaningful structure due to which it remains simple and easy to understand.

Conclusion

BEM is relevant and helpful in many of our web development projects for the following main reasons:

  • If anyone uses this methodology then they can feel how clean their CSS is. The class name that is using the syntax is following the hierarchies so it’s easy to add blocks and elements in between the style. And the plus point is that the end-user can also get the flow or the idea from the CSS format only.
  • After some time you will realize that you were writing a lot fewer CSS comments than you used to. BEM can make your code much more readable and thus makes comments less.

--

--

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