Sassy Components

Introduction

Sassy Components is inspired by BEM methodology

Note: To understand how Sassy Components works you must first learn BEM and SASS

Abstract

A nested selector in CSS gives the power of changing one class and effect other elements (this is not allowed in BEM). Therefore you only need to change one class and that's very practical when JavaScript is brought to the party. With nested selectors comes problem with often very bloated CSS and that isn't a good thing due to specificity concerns.

To ensure the CSS artist doing it the right way a layer between the compiled CSS and the written CSS is needed. This layer is key to have a cascading effect like BEM but still enable nested selectors.

Comparison - CSS Syntax

Select	BEM	Sassy Components
Block / Component	.block {…}	.component {…}
Element / Part	.block__element {…}	.p-part {…} .
Modifier -> Block / Modification -> Component	.block--modifier {…}	.component.m-modification {…} .
Modifier -> Element / Modification -> Part	.block__element--modifier {…}	.p-part.m-modification {…} .
Component Modification -> Component	None	.component.cm-modification {…}
Component Modification -> Part	None	.component.cm-modification .p-part

Problem with BEM

Let's say we have a block with two elements in it.

<div class="block">
  <div class="block__element1"></div>
  <div class="block__element2"></div>
</div>

Now we want to change the style of the block to be bigger. With BEM we'd create a new block or use modifiers. This example shows when modifiers is used.

<div class="block block--bigger">
  <div class="block__element1 block__element1--bigger"></div>
  <div class="block__element2 block__element2--bigger"></div>
</div>

Now we've added "block" on three elements and "element1", "element2" on two others. This is the way to go if you're going to fully follow BEM. This gets very complex and tricky when using JavaScript to change the style of a block.

Solution with Sassy Components

Same situation as before but with Sassy Components syntax

<div class="component">
  <div class="p-part1"></div>
  <div class="p-part2"></div>
</div>

Let's make the block / component bigger

<div class="component cm-bigger">
  <div class="p-part1"></div>
  <div class="p-part2"></div>
</div>

Wow! Only one class. Now we may think this is not at all like BEM because it's now nested. SASS mixins to the rescue!

SASS mixins

Mixins
+component()
+part()
+modification()
+componentModification()
+and()

Now when we can use these awesome mixins. Let's style this block!