Ben Frain's ECSS naming conventions. All components are self-contained, grouped with their html
/js
/...
files. Roll your own classes and components!
Be pragmatic, use as much as is appropriate
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 {}
Use css declaration order by @mdo, but mixins come first.
- Mixins
- Positioning
- Box model
- Typographic
- Visual
.declaration-order
// Mixins
baseline-grid()
// Positioning
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: 100
// Box-model
display: block
float: right
width: 100px
height: 100px
// Typography
font: normal 13px "Helvetica Neue", sans-serif
line-height: 1.5
color: #333
text-align: center
// Visual
background-color: #f5f5f5
border: 1px solid #e5e5e5
border-radius: 3px
// Misc
opacity: 1