- Document Times
- Frameworks
- Style Guide
- OOCSS
- SMACSS
- Pre-processer
- PostCSS
- Application Times
- Shadow DOM
- CSS "4"
- Naming Convention
- BEM
- SUIT
- Atomic CSS
- CSS in JS
-
CSS Modules
- Interoperable CSS
- PostCSS, again
- My Opinionated Proposal
- POCss
// Component/index.scss
.ComponentName {
&--mofierName {}
&__decendentName {
&--modifierName {}
}
.isStateOfComponent {}
}// Component/index.js
require('./index.scss');CSS is always bundled with components
(from loading, mount to unmount)
2. Components can be Overrode by Pages
There is always requirements to rewrite styles of components in pages
// Pages/PageA.scss
#PageA {
.pagelet-name {
.pagelet-descendent-name {}
}
.ComponentName{ /* override */ }
}// Pages/index.js
require('./PageA.scss');- #Page for absolutely scoping between pages
- .pagelet-name should be lowercase to prevent conflicting with components
-
It's technology-agnostic
*You can combined Scss, PostCSS and whatever you want*
-
Solving problems, and easy
*Get all benefit from BEM, SUITCSS and others*
-
Leverage the power of cascading properly
*It's pragmatic, flexible and hitting the sweet spot*