CSS declaration order

I recently heard many developers actually have a system other than the alphabetical one to order the rules inside their CSS. Apparently a growing number of developers is ordering their CSS rules by means of dividing them into sections and then writing them according to what they do.

For instance, you put height and width together, because they decide the size of the element and position, top and left go together for the fact they tell the element where to go. Code Guide shows you the guidelines it wishes to see online: http://codeguide.co/#css-declaration-order

Personally I’m sticking with alphabetical ordering of rules. There’s no real reason to this, but after years of working it still works pretty good. Am I a dinosaur?

What do you use and why?

2 comments

  • Rolf

    I do it similar. For my ‘Kopfkino’ ;-)

    1. width height
    2. padding margins
    3. floats
    4. typo
    5. and so on

    but with sass and mixins its relative. you can define css functions and the rest is done with codekit or an other compiler.

    • P.Gersöne

      I use a clear system to order CSS declartions.

      The basic concept is to put everything on the top that affects the box-model (from outside to inside: border > margin > padding > font-size etc.). After that i set my rules for pure style elements (color, background etc.).
      If the element has positioning rules they go first.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top