As a former print-designer who now lives life as a software developer, I’ve discovered a number of “warm fuzzy blankets” in the coding world that take me back to the “old days.” They allow me to apply the lessons I learned in a 20-year career as a print designer to modern technologies that are constantly in flux.
Things like the 12-column grid were a natural guidepost for me. Add in Google’s Material Design philosophy, one that is inspired by ink on paper, and I’m even more at home.
One thing I did not expect to geek out over as much as I have, however, has been the seemingly simple concept of naming conventions.
Excuse me while I grab some of my earliest CSS code …
This… This is a mess. And when we take a look at the corresponding HTML, it’s just as messy…
Ignoring all else that is likely wrong with this code (it was an early project), There’s no rhyme or reason to how things are named, and therefore the targeting in my CSS file is a nightmare. If you look closely, we have a class in the CSS (card-subtitle) that doesn’t even exist in the HTML!
There are countless ways to approach this particular problem, but I recently discovered the BEM method for naming elements in HTML.
BEM stands for Block, Element, Modifier. It not only makes for more descriptive code, but it makes targeting your elements in SASS so much easier.
Classes are written like so: “Block__Element--Modifier,” where the block is the name of the entire code block, the element is a particular item you are targeting, and modifier would be something like a particular size, like small, medium or large. Blocks are separated from Elements with two underscores, and modifiers are placed at the end with two dashes.
We’ll start with the “B”. These block elements are going to be things like divs, headers, sections, footers, etc. In the example above, our block element is the “ingredient card,” which I, in my infantile wisdom, classified as an ID. Let’s give it a class, start using some SASS, and then figure out our styling from there.
The "E"s are going to be each element within our "ingredient-card" block, so things like the __img, the __title and the __btn. Each of these can get its own style treatment, but with nested SCSS, they'll inherit whatever styles apply to the entire block. In this case, that's something like the font-family.
In this example, we only have one "M", and that's the modifier on our button element. We want one solid and one outlined, so you'll notice that while much of the styling applies to both, where the "--outline" modifier comes in, just a few styles need to be changed.
And here is how we can clean it up using nesting in SCSS…
Not only does it result in fewer lines of code, but this naming method makes our HTML much easier to follow. There’s no question as to what classes are being declared throughout the code block.
But it’s where we combine that with nesting in the SCSS that it really becomes clear. How many times did I declare the font-family in the original code? I can’t remember, but it was too many. With our improved code, we only have to do it once. Any modifications to weight or size are added later.
With BEM naming and SCSS, we can achieve truly dry and readable code that any other programmer can pick up and understand.
Latest comments (0)