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!