We're now using BEM which makes the patterns in this card obsolete.
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.
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.
.list {…} instead of #list {…}
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.
CSS properties do not use underscores or camel case, they use dashes. Do the same with classes.
.main-page {…} instead of .main_page {…}
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,
Splitting CSS into multiple files in a constant way makes it easier to find the CSS you are looking for.
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.
Specifying that something is an icon, its size and its image separately allows for maximum flexibility and minimal code repetition
.ico { padding-left: 15px }
.ico-small { width: 10px }
.ico-warning { background-image: url(../images/warning.png) }