Skip to content
Ecss examples
CSS HTML Kit
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
source
README.md
config.codekit3
package-lock.json
package.json

README.md

ECSS

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

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, but mixins come first.

  1. Mixins
  2. Positioning
  3. Box model
  4. Typographic
  5. 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
You can’t perform that action at this time.