CSS-Style

Richard Powell presents a collection of CSS styling advice that's mainly taken from SMACSS Show archive.org snapshot . Although at makandra we're using BEM instead of SMACSS, here's my favorites.

Do not use ID's in CSS Selectors

It is never safe to assume there will only ever be one of something on a page so do not use ID's for CSS. Id's are much better used as javascript hooks so use them for this instead.

Copy.list {…} instead of #list {…}

Animate an interface using classes not inline styles

Inline styles added by javascript are harder to update and maintain, prefer to add classes using javascript. CSS3 transitions can then handle any animations and if CSS3 transitions are not supported the state will still be updated.

Use dashes to separate words

CSS properties do not use underscores or camel case, they use dashes. Do the same with classes.

Copy.main-page {…} instead of .main_page {…}

Normalise Don't Reset

A global reset is a convenient way of ensuring consistent styling cross browser but it is often overkill and it makes CSS harder to debug in developer tools.Split CSS into Normalise,

Layout, Module & Icon files

Splitting CSS into multiple files in a constant way makes it easier to find the CSS you are looking for.

Separate Layout and Module rules

A Module defines the appearance and positing of its elements, nothing else. If a module were to define a specific width then it would not be flexible enough to be included in multiple locations of different dimensions.

Split icon styles into ico, ico-size & ico-img classes

Specifying that something is an icon, its size and its image separately allows for maximum flexibility and minimal code repetition

Copy.ico { padding-left: 15px }
.ico-small { width: 10px }
.ico-warning { background-image: url(../images/warning.png) }