- mixins with SASS can balloon your css files quickly.
- 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!
}
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
Yep. It's just mixins that have the above problems.