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?