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

As a developer, you might get confused between the multiple available options when considering naming convention.

Questions like, “Which naming convention to try?” are obvious. But, irrespective of the methodology you implement, you will enjoy the benefits of CSS and a structured UI.

When it comes to working with bigger and heavier projects, you might want to keep your website in check by considering the pain areas. The consequence of building heavy websites could be longer loading time, amount of coding, and more. Choosing the correct methodology to create the best CSS Architecture is essential.

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.

We found that a mixture of BEM and namespacing fulfills the criteria that we desire.

CSS is an easy platform to work with, but when it comes to preserving it, running it, and it’s maintenance, then it may be a tougher job than it seems. In such cases, we make use of the option called BEM.

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.

The format is something like: ‘block__element — modifier’

Call of class continually starts with block name, then there’s a detailed call (prefixed with two underscores), and ultimately the modifier ( prefixed with two dashes).

BLOCK — A block is a stand-alone component that can be used across a site multiple times. Block names are unique and they show a connection between various components. Examples: header, footer, navigation bar.

ELEMENT — An element cannot exist on its own, it needs a block to function. Examples: The navigation or nav is the child of the header or maybe the footer.

MODIFIER — As the name suggests, modifiers are used to change the appearance of a said block. It is categorized as a flag. Example: consider two buttons, one with a primary button which is common through the website modifier which is green, and one with a light modifier which is light green.

BLOCK

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

Buttons can be a correct example of blocks that can include different viable styles. If you put the background shade of an element to be green, all are forced to inherit the green background. Following this, you need to repair your code by using overwriting your elements.

If we design a button with .btn class instead, then you can add the class name to design the button or any other <button> elements. Then, if you need a different background color, all you do is to change to a new class, say .btn-secondary, and you’re good to go!

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.

Here Are Two Advantages To BEM Elements

• You can keep CSS specificity relatively flat.
• You know if something is a subset element.

MODIFIER

The next part of BEM is — modifiers.

Modifiers are indications that change the appearance of a block. You can add — modifier to the block.

Moving on with the example from above, the modified button would be named .btn-secondary.

So the HTML format will be like this with modifiers used.

As you can see, we can change the background color with the help of modifiers only. We don’t need to rewrite the CSS of padding and color.

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:

• BEM structure is easy to understand because of the pattern of BEM.
• 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.

Originally published at https://www.zealousweb.com.