css-composition.md

The problem with SASS mixins*

1. mixins with SASS can balloon your css files quickly.
2. mixins stop it being clear where stuff came from (can't search for class names for instance).

WARNING: The below is pseudo-code as I'm too lazy to double-check the APIs, output etc:

@mixin flexThing {
  color: red;
  height: 100px;
  width: 100px;
  display: flex;
}

.button {
  @include flexThing;
  border: 1px solid;
  
}

.avatar {
  @include flexThing;
}

Compiles to

.button {
  color: red; // Where did this line come from? A mixin? Which one?
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid; // Is this line from a mixin? Where do I edit in my code?
}

.avatar {
  color: red;
  height: 100px;
  width: 100px;
  display: flex; // So much repetition! Lots of lines of CSS added!
}

CSS Modules saves you

In CSS modules composes solves this

// Example components

import avatarStyles from "./avatarStyles.css";
import buttonStyles from "./buttonStyles.css;

// avatarStyles.css

.avatar {
  composes: flexThing from "./flexThing.css"
}

// buttonStyles.css

.button {
  composes: flexThing from "./flexThing.css"
  border: 1px solid;
}

// flexThing.css

.flexThing {
  color: red;
  height: 100px;
  width: 100px;
  display: flex;
}

// ------- Output ----------

// output.css

.__flexThing_asd234 {
  color: red;
  height: 100px;
  width: 100px;
  display: flex;
}

.__buttonStyles_234o8d {
  border: 1px solid;
}

// HTML

<img className="__flexThing_asd234" />

<button className="__buttonStyles_234o8d __flexThing_asd234" />

... something like that anyway. As I say, I didn't double check :D

* Ok what about SCSS @extend. Isn't that the same?

Yep. It's just mixins that have the above problems.