Thoughts on BEM

1

Just wondering if anyone has used the BEM methodology when writing your CSS code.

What are your opinions?
Do you see any value in using BEM?
Would it be better to use SASS?

1 Like
2

BEM and Sass are not incompatible. You can use the same naming conventions in Sass.

I used it a couple times but I don’t really see many benefits. Maybe getting used to it makes a difference, but it’s just one way to name your classes. I think the good thing about BEM is that it can be used by all team members so the codebase has consistency.

Anyway, never a bad idea to learn new stuff, right? :smiley:

1 Like
3

BEM is very useful when dealing with a large code base and working with a team of developers. SASS + BEM are a great combination in fact. Another important aspect of CSS is spiting SASS into components and keeping your files in order.

In summary, yes BEM is good… perhaps overkill for smaller projects but certainly useful to learn in preparation for a career in web development.

1 Like
4

As said above, I agree that Sass + BEM is a great combination, and lots of Google results will come up if you search both of 'em.

BEM is essentially a way of writing CSS in a consistent and systematic way. That makes it invaluable for large projects, but even if you never use it on a large project, it’s a very useful thing to learn and adopt on a small project anyway. And you can list it as a skill on your resume as you use it more. Most front-end dev positions, especially in established companies, will want you to know either BEM or one of the other methodologies like SMACSS.

5

I’ve used BEM and Sass from almost the beginning of my journey to become a developer. For big projects I honestly don’t see myself working without Sass, it helps a lot to keep things organized. In fact I hardly write in CSS unless it’s a very simple and small project I’m working on.

As for BEM, if you work in a team you will probably need some way to consistently write CSS. I use it all the time as it helps me to identify components.

6

I’ve never thought of listing BEM method as a skill, however it’s part of my development workflow. I have seen a few companies listing BEM as a desired skill, in those cases I usually mention that on my cover letter.

Would you advice listing that on a resume?

7

BEM is basically a buzzword of sorts, and there’s really no disadvantage to listing BEM as a skill, especially when it might match a keyword search. BEM is on my own resume, for whatever that’s worth.

8

I only use SASS, writing in CSS is very difficult as it gets messy fast. BEM is very wordy at times so I use it when necessary

  • I use SMACSS as my main methodology for everything. Its consistent, not verbose, and semantically easy to understand on both the html and css side. I use SMACSS 80% of the time. SMACSS rules are pretty simple, read them under the “core” section here https://smacss.com/book/type-base

  • Complex nested compnents, I use BEM. 20% of the time I use BEM

Using a mixed style like this makes it easy to identify things, because there aren’t many BEM components across your entire project

I use a 7-1 Sass folder architecture as my starting point, it follows pretty closely to SMACSS architecture. https://sass-guidelin.es/#architecture

If I load in a CSS framework, like bootstrap 3 or 4, I will overwrite their styles in a folder called vendor. With SMACSS or BEM, you shouldn’t have too many naming conflicts.

E.g., for SMACSS rules are as follows:

  • Base rules -> A CSS framework like bootstrap will have base rules here, just override them and put them in base folder
  • Layout rules -> use the l- prefix or some sort of prefix on these items.
  • Module rules -> Modules, use semantic naming here
  • State rules -> Use the prefix word “is-visible”, or “is-hidden-xs-down”, etc
  • Theme rules -> don’t bother

Here’s a sample of a project I’m working on for ecommerce. The naming conventions aren’t perfect though, currently its about 2000 lines of sass code and my own mini-css framework built on top of bootstrap. These 20 files get compiled down to 1 css file

The way I write SASS is the following, though, using the 7-1 pattern

There’s two ways to approach SASS designs imo. An Agile approach or a Waterfall Approach

agile

An agile approach (for solo / smaller team development). This is when you have a low-fidelity mockup on paper, some ideas from othersites you wish to emulate, but its all in your head mostly. This is for people who just want to get things done very quickly without much planning

  • First determine how many unique pages you will have on your site.
  • Write all your CSS in these page_styles first
  • You’ll realize whenn you repeating yourself, constantly refactor this CSS code into layouts for bigger things, and components for small reusable items like buttons
  • If you modify HTML elements, h1,h2,h3, marquee, section, body etc, put these in base_styles
  • If you load in bootstrap, override these styles in vendors folder
  • If you find yourself writing repetitive code, put in things in mixins folder under abstracts
  • ALWAYS, constantly refactor your CSS code when you use an agile approach. Same with your HTML. You won’t remember to do it later, this isn’t like writing business logic in javascript. Refactoring CSS is easier if done right away

waterfall

A waterfall approach (bigger companies, bigger teams, etc) -> this would be defining all the UX elements on figma, color documents, color schemas, etc. There will be a full mockup of the site already

  • First determine how many unique pages you will have on your site.
  • Identify which pages have overlapping styles, with your UX figma design
  • Focus on the layout folder and components folder.
  • Use the pages only if they don’t meet your requirements.
  • Slowly pick which styles you should adopt

You can pick whatever preference you want, I would start off with an agile approach, and alternative to a waterfall approach maybe 20% of the time.

Also, my favorite tools when doing sass architecture is a thesaurus. Naming is half the battle. I use https://www.thesaurus.com/

2 Likes
9

I see the value for the use of BEM, however my concern would be that the code can potentially be repetitive for each component created which in turn means slower web application performance as the browser engine needs to read more lines of code.

10

I use SASS + BEM.

It’s wonderful. Global variables in SASS is nice, theming is good. (there are css3 variables but you need to type the fallback value again and again)

How I use them together,
SASS for general components (used through out the application) :
E.g. Button, I use SASS like button class=button and adding variants like button class=button is-primary

For specific sections, like
article class=box box__with-media I use bem. Because this box with media has a special layout.

11

Personally, I don’t use BEM but the way I name things is sort of like it. I see the benefits and I don’t know how much of hit you are really going to take, I can’t see it being much at all. If you are worried then minify.