My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

CSS methodology: To BEM or not?

Kevin C.'s photo
Kevin C.
·Oct 6, 2018

Is writing CSS the BEM way a good idea? I've been struggling to figure out whether I should start writing CSS that way because I just haven't been able to get over the fact that BEM naming tends to be long and it is tedious to have to give every single element a class name. I do see its modularity, but I've always thought that I could get that by giving each section a unique class name and write nested CSS from there just like how they write HTML in CSS Zen Garden site. Am I missing something here?

If you don't know what BEM is, take a look at getbem.com for a detailed guideline and sample code. I am not convinced of their claims.

They say I should care because BEM supposedly fixes the two most significant common issues:

1) CSS Inheritance

Their argument seems to be that CSS inheritance is infinite without scope or closure, and BEM can provide some scope by using unique CSS classes per element.

2) CSS Specificity

They argue that developers often find themselves using very long nested CSS selectors or the '!important' keyword to overcome existing specificity in an existing project someone else created. It results in a complicated mess of overlapping and conflicting CSS rules. BEM supposedly tames such situation by keeping CSS specificity to a minimum. They also say that BEM makes CSS code readily portable to a different HTML structure. They further argue that BEM avoids CSS conflicts by using unique contextual class names for every block, element and modifier combination and makes it much easier to maintain the codebase.

I'm not entirely convinced. Doesn't wrapping a module with a class/ID and avoiding abusing IDs and !important in the first place solve these problems?

They say that BEM helps to have fewer things for a browser to evaluate, which supposedly results in rendering a webpage faster. Supposedly, locating a class name is faster than evaluating nested CSS definitions. But, by how much?