CSS property order example

new_gist_file

.selector {
  /* positioning */
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    width: 100px;
    padding: 10px;
    border: 1px solid #333;
    margin: 10px;
    
    /* appearance */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    color: #fff;

    /* text */
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #000;

    /* other */
    curor: pointer;

    /* background */
    background: #000;
    background-image: -webkit-linear-gradient(top, #000, #fff);
    background-image:    -moz-linear-gradient(top, #000, #fff);
    background-image:     -ms-linear-gradient(top, #000, #fff);
    background-image:      -o-linear-gradient(top, #000, #fff);
    background-image:         linear-gradient(top, #000, #fff);

    /* transforms */
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);

    /* transition */
    -webkit-transition: color 0.3s ease;
       -moz-transition: color 0.3s ease;
        -ms-transition: color 0.3s ease;
         -o-transition: color 0.3s ease;
            transition: color 0.3s ease;
}