CSS Architecture: BEMCSS — Block, Element & Modifier
- What is CSS Architecture?
- What is BEMCSS?
- What makes BEMCSS better than plain old CSS?
Originally posted at isev.co.uk
As a front-end developer, you may not have considered yourself in terms of an architect. An architect is a person who plans, designs, and oversees the construction of buildings.
Now you won’t be working on a building project, but you are working to create, albeit from pixels. When a designer comes to you with a Photoshop or Sketch file that he has put his blood, sweat and tears into, he or she is going to expect the same level of care when producing the HTML and CSS.
In the same way an architect would take into consideration methods before starting work, if we think about how we are going to write our CSS, our project WILL turn out for the better.
Over the next few articles I want to look into what types of CSS architecture are available, and spend some time evaluating them.
The first type of CSS architecture I want to consider is BEMCSS.
What does it stand for?
BEM, stands for Block, Element and Modifier, and it was an idea put together by Yandex, the owners of the huge Russian search engine Yandex search.
The aims of this methodology were to:
- Speed up development time in the first place
- Improve maintainability in your stylesheets
- Help large teams of developers working on the same project, by enforcing strict coding standards
- Re-use as much code as possible between projects
Architecture — the action or process of building; construction.
Why is it better than just writing regular old CSS?
An important question. At the end of the day taking on board any kind of change in our work flow is going to have an immediate impact on our development speed for the short term.
What is so bad about writing good old regular CSS?
For instance on styling up a single blog post in WordPress, we may target elements firstly by addressing the body class.
Then we may target headings, paragraphs, links, classes and ID’s, overwriting styles, and cascading styling as we go along.
The issue with that is we end up with a lot of CSS, overwriting as we go along. It’s also not very re-usable, and it’s not very easy to maintain.
Trust me, it’s worth your time giving BEMCSS a go
How does it work?
Block
Block represents a section of content. This could be an person, a form, or a blog post.
Element
An element could be a person’s name, a form field or a featured image. It is simply a part that makes up a block.
Modifier
A modifier is a version of a block or an element, for instance this could be a featured person or a large form field.
An example of this is below…
<form class="form">
<input class="form__input" type="text" placeholder="Name">
<input class="form__input" type="email" placeholder="Email">
<input class="form__input form__input--large" type="text" placeholder="Name">
<input class="form__submit" type="submit" value="Go">
</form>In the above example, the form is the block element.
Then the form__input and form__submit are an element of that form.
Lastly, form__input — large is a modifier of the form__input element.
As you can see the conventions of BEM require you to stick to using two “_” for the elements, and two “-” for the modifiers. This means when looking over your code, it is easy to see which is which.
Benefits of using BEM
There are lots of good reasons for giving BEM a go.
1. It prevents you from deep nesting
When adhering to the BEM principles when writing your CSS in a pre-processor, it prevents you from deep nesting, as you can only ever have elements and modifiers.
2. Makes reading and deciphering code much easier
When reading through your CSS or your SCSS file it’s much easier to discern what elements you are looking at.
3. It makes you think about it
Let’s face it CSS is really easy to write, but by sticking to a methodology, it makes you conscious of the quality of, and of how your CSS is written. This means better styling.
A Code Example
Below is an example of coding up a form in SCSS without using BEM.
HTML
<form id="contact-form">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="text" class="large-input" placeholder="Name">
<input type="submit" value="Go">
</form>SCSS
#contact-form {
input {
&[type=text],
&[type=email] {
display: block;
padding: 10px 20px;
border: 1px solid #333333;
color: #000000; &.large-input {
padding: 30px 20px;
}
}
&[type=submit] {
display: inline-block;
background: #ff0000;
color: #ffffff;
}
}
}Compiled CSS
#contact-form input[type=text], #contact-form input[type=email] {
display: block;
padding: 10px 20px;
border: 1px solid #333333;
color: #000000;
}
#contact-form input[type=text].large-input, #contact-form input[type=email].large-input {
padding: 30px 20px;
}
#contact-form input[type=submit] {
display: inline-block;
background: #ff0000;
color: #ffffff;
}
And here is how you would do it using BEM
HTML
<form class=”contactForm”>
<input class=”contactForm__input” type=”text” placeholder=”Name”>
<input class=”contactForm__input” type=”email” placeholder=”Email”>
<input class=”contactForm__input contactForm__input--large” type=”text” placeholder=”Name”>
<input class=”contactForm__submit” type=”submit” value=”Go”>
</form>SCSS
.contactForm {
&__input {
display: block;
padding: 10px 20px;
border: 1px solid #333333;
color: #000000;
&--large {
padding: 30px 20px;
}
}
&__submit {
display: inline-block;
background: #ff0000;
color: #ffffff;
}
}Compiled CSS
.contactForm__input {
display: block;
padding: 10px 20px;
border: 1px solid #333333;
color: #000000;
}
.contactForm__input--large {
padding: 30px 20px;
}
.contactForm__submit {
display: inline-block;
background: #ff0000;
color: #ffffff;
}
If you compared the compiled CSS, it is considerably easier to read, and smaller in size. Doing this on a project scale would see a decrease in CSS file size.
Worth trying out on your next project?
Most definitely. Give it a go, and analyse the difference in the amount of CSS you’ve written, along with file size and load time.
Next time I am going to consider two other types of CSS architecture.
