BEM Style Naming for Sass Color Variables?! What?!1
I did something kind of crazy today. Or genius, I’m not really sure yet. But it’s making sense to me so far…
I’ve been taking a very modular (read: awesome) approach to the projects that I’m working on right now – which ultimately means some hybrid of OOCSS, BEM, SMACSS, Atomic Design, etc.
I’ve been applying my version of the BEM naming convention to my elements and writing styles for those classes. I’ve also been using two sets of color variables – descriptive and functional. Descriptive variables get assigned the actual HEX(etc.) values and the functional variables get assigned descriptive variables, for example:
// Descriptive Colors
$white: #ffffff;
$black: #222222; // ha!
$eggplant: #531946;
$darkEggplant: #30162B;
$teal: #095169;
// Functional Colors
$background: $white;
$copy: $black;
$headerBg: $eggplant;
$headerLogoColor: $white;
$headerLogoHoverColor: $teal;
$footerBg: $darkEggplant;
$footerColor: $white;
$featureWorkBg: $darkEggplant;
$featureWorkColor: $white;
$featureWorkHoverColor: $eggplant;
.content {
background: $background;
color: $copy;
}
.header {
background: $headerBg;
}
.header--logo {
color: $headerLogoColor;
&:hover {
color: $headerLogoHoverColor;
}
}
.footer {
background: $footerBg;
color: $footerColor;
}
See the Pen %= penName %> by Julie Cameron (@jewlofthelotus) on CodePen
So those are some alright variables… but then they got really long and hard to read. It wasn’t scannable. Naturally, I’ve come across a number of posts recently discussing color variable naming.. one thing was for sure, I had to flip my descriptives. Turn $darkEggplant
into $eggplant--dark
. Well hey! Would you look at that.. “dark” is essentially a modifier. And then I thought, “Eureka! Why not apply BEM to my color variables?!” … Ok, I definitely didn’t think “Eureka!” but you get the idea…
// Descriptive Colors
$white: #ffffff;
$black: #222222; // ha!
$eggplant: #531946;
$eggplant__dark: #30162B;
$teal: #095169;
// Functional Colors
$header__background: $eggplant;
$header--logo__color: $white;
$header--logo__color__hover: $teal;
$content__background: $white;
$content__color: $black;
$footer__background: $eggplant__dark;
$footer__color: $white;
.content {
background: $content__background;
color: $content__color;
}
.header {
background: $header__background;
}
.header--logo {
color: $header--logo__color;
&:hover {
color: $header--logo__color__hover;
}
}
.footer {
background: $footer__background;
color: $footer__color;
}
See the Pen %= penName %> by Julie Cameron (@jewlofthelotus) on CodePen
Wow. How much more readable is that?! And look how the variables match the class names! BEM FTW. I am already really digging this format. I’m not yet sure how I feel about chaining multiple modifiers together, ie. $header__logo--color--hover
, but I think it still makes sense. --color
is modifying the __logo
and --hover
is modifying the --color
. This seems alright to me.
Does anyone else do anything like this?
6 Comments | Post a comment
It’s funny, but I do just that. And yes, also atomic design variant of BEM-style OOCSS.
Every time I think I’ve discovered something original, Google proves me wrong… But that’s a good thing, teaches humility, you know))
Nice, Dmitri! I have to think that I was very likely not the first to come up with this either! Glad to hear it’s working out for you too!
Actually i started to use BEM for my stuff and I really stumbled over your article right now. I started now to convert all my variables to BEM-style. It really makes sense. The readability is much more better, it breaks down the complexity and pushes myself to more standardised thinking.
Thanks for your kick!
That’s awesome, Martin! Glad this could help you out!
In terms of global variables, the usual naming of elements might fail sometimes. I started to use names like this:
$theme__bg–gradient-bottom-color or $base__bg–gradient-bottom-color.
This is for real global stuff, which cane be used anywhere or will be inherited into new variables.
Of course, maybe $body__bg–gradient-bottom-color would be correct, but which one is more meaningful? Or in terms of bootstrap, names like $navbar__bg–gradient-upper-color might make sense too. The ultra correct name would be in my case $container–navigation__bg–gradient-upper-color. container–navigation (a variant of bootstrap’s container class) is the outer container in which navbar lives. That’s an combination we don’t want read, i guess
So, using BEM for variables gives some room for your own rules.
I also like to declare my colour variable names as $color-{name}, feels a little more “namespace-d”. I really like the idea of using the modifier style for tints and shades, as opposed to just tacking it on the end with a single hyphen, $color-blue-darkest for example. $color-blue–darkest is not much different, but reads much easier and fits in with the BEM paradigm, thanks for the tip!