DOs/DONTs

CSS

General

  • Do NOT reinvent the wheel.
  • Have a look at what is already existing, and use it.
  • Using several classes for an element is a good practice.
  • Separating design styles of a module from its positionning (if possible) is also a good practice: better for reusability/responsive/etc.

Sass nesting inferno

.my-module {
  .blabla {
    .why-not-more-complexifing {
      em {
        …
      }
    }
  }
}
.my-module {
  …
}
.my-module-title {
}
.my-module-other {
}
.my-module-important {
}

Stop doing Sass nesting inferno. The structure must NOT be so complex and intricated with CSS, and it is a pain to surcharge (and the weight of the CSS will be far lighter not doing this). Let's be flexible!

Targetting elements

#my-module {
  …
}
#my-module a {
  …
}
.icon-30-blah, .icon-30-blahblah { /* etc. */
  …
} 
.my-module {
  …
}
.my-module-link {
  …
}
[class*=icon-30] {
    …
}

Please avoid targetting via id and neighbour, better use a direct target via a class (See performance from CSS point of view). Also better factorising when possible.

line-height

No unit for this property. Do NOT use it to center vertically text.

line-height: 36px;
line-height: 3em;
line-height: 1.5;
line-height: normal

See unitless values for line-height.

Positionning

Unless you really have to, avoid mixing positionning on tables (creates bugs on some browsers).

<td class="my-module-style">
.my-module-style {
  display: flex
  …
}
<td><span class="my-module-style">…</span>
.my-module-style {
  display: flex
  …
}

A bug on v3, so trust me :)

HTML

<button></button>
<button><span></span></button>
    
<button title="What it does"></button>
<button><img alt="What it does" …></button>
<button><span class="sr-only">What it does</span></button>
    

Put a title in the button, an image with alt in it, a span class="sr-only" in it, but do not leave it empty, otherwise, will be vocalized “button” without any information for the user.

<button class="ellipsis">lorem dolor si amet…</button>
    
<button class="ellipsis" title="lorem dolor si amet consegur">lorem dolor si amet…</button>
    

When using the class ellipsis, add a title attribute with the full version.