Skip to content

CSS Guidelines

Elisabeth Hamel edited this page Jan 17, 2017 · 27 revisions

Formatting

  • Try not to use ID selectors: they should be used only for JS purpose
  • Use tabs (4 spaces) for indentation
  • Use dashes instead of camelCasing, underscore or PasalCasing in class names
  • Put closing braces } of rule declarations on a new line
  • In properties, put a space after, but not before, the : character
  • Put blank lines between rule declarations

Bad

.avatar{
    border-radius:50%;
    border:2px solid white; }
#lol-no {
  // ...
}

Good

.avatar{
    border-radius: 50%;
    border: 2px solid white;
}

Comments

  • Prefer line comments (// in Sass-land) to block comments
  • Prefer comments on their own line. Avoid end-of-line comments
  • Write detailed comments for code that isn't self-documenting (z-index, compatibility or browser-specific hacks...)

Border

Use 0 instead of none to specify that a style has no border.

Bad

.foo {
    border: none;
}

Good

.foo{
    border: 0;
}

Clone this wiki locally