BEMantic: DRY Like You Mean It
Matt Stow
18615

I completely agree with what you’re saying here Matt. Just for the simple fact that if you decide to change your markup you’ll have to change your stylesheets too, the article you reference is talking utter bollocks.

I’d also agree that many developers tend to take on practices due to dogma, and don’t spend enough time really considering the implications of their decisions. We need to spend much more time thinking, and less time rushing into whatever Mr. BigShotOfTheMonth is saying is good practice.


Lastly, I just want to mention a practice I use myself. I’ve not seen it anywhere else yet, but it could be more common than I think.

Instead of solely using BEM style syntax to write my SASS, I’ve started working with very specialised classes which can be built up to create components.

I create the classes dynamically based on design requirements such as colours, radii, heights, widths, z-indexes, padding, margin, etc, etc, and then apply these to my HTML. In this way, the SASS is quite easy to create, easy to understand, and the classes become fully semantic.

For example, if I had to create a card element. I wouldn’t to this: <div class=”card”></div>. Instead I’d do something like <div class=”bg — brand-primary radius — large padding — small text — dark-primary”></div>

It’s currently a bit of an experiment in my projects, but it seems to be working well so far. And it allows junior devs to code up nice looking elements much more easily even when they’re not great with CSS or SASS.

Like what you read? Give Adam a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.