Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

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;
    }
} 

About

▽ Dead simple modular CSS architecture.

Topics

Resources

License

Releases

No releases published

Packages

No packages published