Read more

CSS-Style

Dominik Schöler
October 15, 2012Software engineer at makandra GmbH

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.

Do not use ID's in CSS Selectors

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

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 {…}

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.

.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

.ico { padding-left: 15px }
.ico-small { width: 10px }
.ico-warning { background-image: url(../images/warning.png) }
Posted by Dominik Schöler to makandra dev (2012-10-15 15:21)