ECSS

⚠️ For small things, such as Anki Programming Themes, this is overkill. It's proven effective for large-scale projects with large teams. The alternative that I'm now working with is GPS (global, page, section). I couple that with a couple of cherry picked features from ECSS.

Ben Frain's ECSS naming conventions. All components are self-contained, grouped with their html/js/... files. Roll your own classes and components!

Example

shopping-cart-template/
- shopping-cart.html
- shopping-cart.css
- shopping-cart.js

// .[namespace][-ModuleOrComponent][_ChildNode][-variant].namespace-ModuleOrComponent_ChildNode-variant{}
// A standalone component.sc-Title{}
.sc-RemoveBtn{}
// A component with multiple views.mc-ShoppingCart_Title{}
.mc-ShoppingCart_RemoveBtn{}

CSS declaration order

Use css declaration order by @mdo. Mixins (if any) also come first.

1. Positioning
2. Box model
3. Typography
4. Visual
5. Miscellaneous

.declaration-order// Mixinsbaseline-grid()
// Positioningposition: absolutetop: 0right: 0bottom: 0left: 0z-index: 100// Box modeldisplay: blockfloat: rightwidth: 100pxheight: 100px// Typographyfont: normal13px"Helvetica Neue", sans-serifline-height: 1.5color: #333text-align: center// Visualbackground-color: #f5f5f5border: 1pxsolid#e5e5e5border-radius: 3px// Miscopacity: 1