https://github.com/modularorg/modularcss
▽ Dead simple modular CSS architecture.
https://github.com/modularorg/modularcss
architecture css modular
Last synced: about 1 year ago
JSON representation
▽ Dead simple modular CSS architecture.
- Host: GitHub
- URL: https://github.com/modularorg/modularcss
- Owner: modularorg
- License: mit
- Created: 2018-12-17T00:04:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-26T23:28:08.000Z (over 7 years ago)
- Last Synced: 2025-04-13T14:53:51.382Z (about 1 year ago)
- Topics: architecture, css, modular
- Homepage:
- Size: 1000 Bytes
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
modularCSS
A dead simple modular CSS architecture.
## Naming
```postcss
.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
```html
```
```postcss
.module {
background-color: silver;
}
.module_child {
background-color: gray;
&.-option {
background-color: red;
}
}
```
#### Complex nesting and naming
```html
```
```postcss
.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;
}
}
```