My CSS coding style, part I – CSS properties order

Some weeks ago Harry Roberts wrote a piece about his HTML & CSS coding style. I found it very interesting to see how an other Front-End Developer works and so today I want to talk a little bit about my own ‘style’. I decided to split it into more than one post. So here is part I about CSS properties.

Over the years I have developed a set of rules for writing my CSS. For example I order my properties in a specific way. This makes it a lot easier to find specific ones if I need to change them later and I also have a good procedure while writing the code. For example I always define the display first, then I do the positioning and so on. Some of my rules make sense, some don’t, but I’m used to writing it that way and it helps me to work faster and better.
The overall thinking behind my order is that I first define general things like what the element is, where it sits, how big it is. Then I define the things in the element, beginning with the typhography. In the next step I work myself to the outside with things like border or box-shadow. And at the end I place some general stuff like overflow and z-index.

Today I want to show you my order. I might have forgotten some very rare properties, but I think I covered the most used ones. In reality you’ll probably almost never have to write all these properties at once, but if you had to (I had to once), it could look like this.
Maybe it’s something you want to adopt for your own code or you can just look how I work. Either way, here it goes:

.myclass {
    content: '';
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
    position: static;
    float: none;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0;
    padding: 0;
    max-width: auto;
    max-height: auto;
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    color: #000;
    font-family: 'Droid Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 15px;
    text-align: left;
    text-indent: 0;
    text-decoration: none;
    text-transform: none;
    text-overflow: clip;
    text-shadow: none;
    letter-spacing: normal;
    vertical-align: baseline;
    white-space: normal;
    word-spacing: normal;
    word-wrap: normal;
    direction: ltr;
    -webkit-text-size-adjust: none;
    -webkit-column-count: 1;
       -moz-column-count: 1;
    ccolumn-count: 1;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
    background: transparent;
    -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
    border: 0;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
        -ms-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
        -ms-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
    -webkit-opacity: 1;
       -moz-opacity: 1;
        -ms-opacity: 1;
         -o-opacity: 1;
            opacity: 1;
    -webkit-outline: 0;
       -moz-outline: 0;
        -ms-outline: 0;
         -o-outline: 0;
            outline: 0;
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none;
    -webkit-transition: 0;
       -moz-transition: 0;
        -ms-transition: 0;
         -o-transition: 0;
            transition: 0;
    visibility: visible;
    clear: none;
    clip: auto;
    cursor: auto;
    overflow: none;
    z-index: auto;
}

I’m very interested if you might have some similar rule or if you just write your CSS as it pops into your head. Write a comment or publish a blog post about your rules and let me know it. Cheers!

Kommentare

4 Responses to “My CSS coding style, part I – CSS properties order”

  1. Marcel says:

    That’s my favorite order:

    .myclass { content: ”; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; position: static; float: none; top: auto; right: auto; bottom: auto; left: auto; margin: 0; padding: 0; max-width: auto; max-height: auto; min-width: 0; text-align: left; min-height: 0; width: auto; height: auto; color: #000; font-family: ‘Droid Sans’, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 15px; text-indent: 0; text-decoration: none; text-transform: none; text-overflow: clip; text-shadow: none; letter-spacing: normal; vertical-align: baseline; white-space: normal; word-spacing: normal; word-wrap: normal; direction: ltr; -webkit-text-size-adjust: none; -webkit-column-count: 1; -moz-column-count: 1; ccolumn-count: 1; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; background: transparent; -webkit-background-size: 100% 100%; background-size: 100% 100%; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; -webkit-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; -webkit-outline: 0; -moz-outline: 0; -ms-outline: 0; -o-outline: 0; outline: 0; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: 0; -moz-transition: 0; -ms-transition: 0; -o-transition: 0; transition: 0; visibility: visible; clear: none; clip: auto; cursor: auto; overflow: none; z-index: auto; }

  2. Ich mach das alphabetisch, ganz im Ernst jetzt. Und gehöre zusätzlich noch zu der Fraktion mit einer reset.css, die alles auf ein Defaultwert setzt und dann jeweils pro Selektor nur überschreibt, was wirklich relevant ist. (Aber wenn ich das hier richtig lese, führst Du ja auch nicht immer alle Attribute bei jedem Selektor auf. Wie beruhigend.)

  3. […] Chris Coyier shows some examples of CSS Style Guides from GitHub, Google, WordPress and more. It’s very interesting to see which rules they apply. In the last few days or maybe weeks I often thought about writing down my CSS writing rules in a more detailed way. For me and also for someone else who might need to work with me on my CSS code. I’ll approach this very soon and post about it here. You might remember I’ve already begun it. […]

Leave a Reply