How do you make your code less indigestible and more efficient? It is a reality we often come up against. Fortunately, solutions have been found to make collaborative work easier. Today we are going to talk methodology, with the help of the Blocks Elements Modifiers (BEM) naming convention, which will help you organise and structure your CSS better.
A methodology to save time
You are entirely free to name your classes however you like! BEM is in fact a recommendation: it is a method to help front-end developers come up with clearer, more effective names. You can therefore create your own naming charter. This makes it possible to:
• avoid naming conflicts
• reduce unnecessary declarations that override others
• avoid pointless cascades
• make it easier for a third party to take ownership of the code
• integrate HTML without modifying the CSS
Generic selectors for greater efficiency
Let us go back to basics, and therefore to the principle behind CSS. CSS allows you to manage layout separately from your HTML, which holds the structure and content of your page. By separating these two elements, it is possible to add content (in HTML) without even having to define stylistic properties for it. This is the notion BEM builds on. This naming convention aims to use generic CSS classes named according to their appearance rather than their semantics. Let me explain: in CSS it is possible to assign values to an HTML element in three different ways:
• either by targeting all occurrences of the selected object
• or by working through parentage (all the elements contained within a given element)
• or by assigning a unique ID to an object
• or by creating a class that will affect only the objects it is assigned to
BEM works with class-type CSS selectors. Of course, given the cascade principle in CSS, declarations can inherit from one another.
3 types of word to choose very carefully
Careful: we are not talking here about the Block and Inline properties of HTML objects, but the image is similar. The idea is to create three types of word, each representing a funnel used to concatenate your names. The BEM pattern to use is this one: .block-element_modifier{}
First of all, you need to define a block, which will be the first item in the trio of words making up your class name. A block is the parent component of a set of elements. You can decide how to define your block based on:
• the number of times you are going to call this object
• its ability to be as generic as possible
You can then define the names associated with the elements that make up this block. These names will be used in the second part of our class. Note that there can be no elements if there is no block. Modifiers, for their part, are optional and should make a minor change to already existing properties. They are most often used to visually convey a change of state (active / inactive, open / closed).
A syntax rule to follow
Block names must always be unique, as must the names of the elements that make them up, in order to avoid selector conflicts. A class name should always start with a block. .block{}
When naming a child element, you concatenate it to the block using a hyphen: .block-element{}
Finally, modifiers are nested using an underscore: .block-element_modifier{}
For example, if we know that we are going to need several types of clickable button, varying according to their size, colour, and so on, we can create a block dedicated to that object.
.bouton { display: inline-flex; align-item: center; padding: 10px 14px; border: 1px solid redcaptainamerica; background-color: bluecaptainamerica; font-size: 16px; } .bouton-icon { flex: 0 0 20px; height: 20px; border-radius: 50%; } .bouton-label { flex: 1; } .bouton-label_disabled { opacity: 0.5; background-color: blackvador; border-color: greydeathstart; }
As a reminder: the HTML object being handled in this case will be the button tag, except that we will choose a class name linked to its function rather than to its HTML element. The block name to choose is therefore .bouton. Note that a button can contain icons and labels (in the example, label). That is why these child elements have been added.
So there you have an organised way of naming your classes. Of course, everyone has their own way of doing things! There are also other naming conventions, each dedicated to different languages.
