modularCSS

A dead simple modular CSS architecture.

Naming

.module.module_child.-option

What

• Everything is a module.
• A module is self-contained.
• Don't modifiy other modules from it.
• The goal is reusability.

How

• Every styled element has a class, don't use ids.
• Stick to single level, use options, not nesting.
• That way you'll keep the same low specificity and element flexibility.

When

• Start with bigger modules.
• Don't repeat yourself.
• Break them down into smaller modules, if part of them is needed.
• Eventually, you'll know when to create new modules.

Examples

Module example

<divclass="module"><divclass="module_child"></div><divclass="module_child -option"></div></div>

.module {
background-color: silver;
}
.module_child {
background-color: gray;
&.-option {
background-color: red;
}
} 

Complex nesting and naming

<divclass="moduleName -small"><divclass="moduleName_childName"></div><divclass="moduleName_childName -option"></div></div>

.moduleName {
background-color: silver;
font-size: 18px;
&.-small {
font-size: 14px;
}
}
.moduleName_childName {
background-color: gray;
padding: 40px;
&.-option {
background-color: red;
}
@nest .moduleName.-small& {
padding: 20px;
}
}