A dead simple modular CSS architecture.
Clone or download
Latest commit bd69131 Dec 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig Initial readme Dec 26, 2018
.gitignore Initial readme Dec 26, 2018
license Initial readme Dec 26, 2018
readme.md

readme.md

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

<div class="module">
    <div class="module_child"></div>
    <div class="module_child -option"></div>
</div>
.module {
    background-color: silver;
}

.module_child {
    background-color: gray;

    &.-option {
        background-color: red;
    }
} 

Complex nesting and naming

<div class="moduleName -small">
    <div class="moduleName_childName"></div>
    <div class="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;
    }
}