My CSS declaration order

properties.css

/** -------------------------------------------------------------------------- *\
 * Version 0.1.0 [2016-07-04]
 *
 * Identifies the proper way for declaring the order of CSS properties
 *
 *   Project       : Acuity
 *   Markup        : order.css
 *   Author        : Rye Miller <[email protected]>
 *   Version       : 0.1.0
 *   Created       : 2016-07-04
 *   License       : GPLv3
 *   License URL   : https://www.gnu.org/licenses/gpl-3.0.html
 *
 * Website:        http://ryemiller.com
 * Copyright:      (c) 2016 Rye Miller
 *
 * --------------------------------------------------------------------------- *
 *                              TABLE OF CONTENTS                              *
 * --------------------------------------------------------------------------- *
 *
 * ORDER
 *  [1].....Content
 *  [2].....Positioning
 *  [3].....Display
 *  [4].....Overflow
 *  [5].....Animations
 *  [6].....Box Model
 *  [7].....Background
 *  [8].....Typographic
 *  [9].....Other
 *  [10]....Pseudo-*
 *
 * RESOURCES
 * - http://markdotto.com/2011/11/29/css-property-order/
 * - https://github.com/brandon-rhodes/Concentric-CSS/blob/master/style.css
 * - https://gist.github.com/awkale/ad46e2ade70e833fa178
 * - https://gist.github.com/fiskus/3426801
 * - https://gist.github.com/simurai/40902209f695b2d080e1
 * - https://gist.github.com/erikjung/5249484
 * - https://gist.github.com/joshuapekera/4582549
 */

.selector {

    /* --------------------------------------------- *
     * ORDER @content
     * --------------------------------------------- *
     *
     * NOTE: Does the quotes property need to come
     *       at the beginning since content will
     *       place them there as a value anyway?
     *
     * TODO Research usage of quotes placement
     */

    content: normal;
    quotes: '\201C' '\201D' '\2018' '\2019';

    /* --------------------------------------------- *
     * ORDER @positioning
     * --------------------------------------------- *
     *
     * NOTE: flex property is also included in this
     *       section and follows the property for
     *       a `left` positioning value.
     */

    position: static;
    z-index: auto;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    float: none;
    clear: none;

    /* --------------------------------------*
     * ORDER @display
     * -------------------------------------*/

    display: inline;
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    transform-style: flat;

    /* --------------------------------------*
     * ORDER @overflow
     * -------------------------------------*/

    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    clip: auto;

    /* --------------------------------------*
     * ORDER @animations
     * -------------------------------------*/

    animation: none;
    animation-delay: 0;
    animation-direction: normal;
    animation-duration: 0;
    animation-fill-mode: none;
    animation-iteration-count: 1;
    animation-name: none;
    animation-play-state: running;
    animation-timing-function: ease;
    -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;
    transition-delay: 0s;
    transition-duration: 0s;
    transition-property: none;
    transition-timing-function: ease;

    /* --------------------------------------*
     * ORDER @box-model
     * -------------------------------------*/

    margin: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    outline: none;
    outline-width: medium;
    outline-style: dotted;
    outline-color: #C0C0C0;
    outline-offset: 100px;
    border: 0;
    border-style: none;
    border-width: medium;
    border-color: inherit;
    border-collapse: separate;
    border-image: none;
    border-spacing: 0;
    border-bottom: 0;
    border-bottom-color: inherit;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-left: 0;
    border-left-color: inherit;
    border-left-style: none;
    border-left-width: medium;
    border-right: 0;
    border-right-color: inherit;
    border-right-style: none;
    border-right-width: medium;
    border-top: 0;
    border-top-color: inherit;
    border-top-style: none;
    border-top-width: medium;
    border-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
    box-sizing: content-box;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;

    /* --------------------------------------*
     * ORDER @background
     * -------------------------------------*/

    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    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);
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;

    /* --------------------------------------*
     * ORDER @typographic
     * -------------------------------------*/

    font-size: 100%;
    line-height: inherit;
    font-family: sans-serif;
    -moz-osx-font-smoothing: inherit;
     -webkit-font-smoothing: none;
    font-style: inherit;
    font-weight: 400;
    hyphens: none;
    word-spacing: inherit;
    letter-spacing: 1px;
    color: #333333;
    text-align: center;
    text-decoration: none;
    text-indent: each-line;
    text-overflow: clip;
    text-rendering: auto;
    text-shadow : none;
    text-transform: none;
    word-break: normal;
    word-wrap: normal;
    white-space: inherit;
    vertical-align: baseline;
    list-style: none;
    list-style-type: disc;
    list-style-position: outside;
    list-style-image: none;
    pointer-events: auto;
    cursor: pointer;

    /* --------------------------------------*
     * ORDER @other
     * -------------------------------------*/

    filter: inherit;
    size: 0;
    zoom: normal;
    caption-side: top;
    table-layout: auto;
    empty-cells: show;
    backface-visibility: visible;
    resize: none;
    -webkit-appearance: inherit;
       -moz-appearance: inherit;
    -webkit-user-select: inherit;
       -moz-user-select: inherit;
        -ms-user-select: inherit;
    -ms-interpolation-mode: inherit;
    direction: ltr;
    marks: none;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    unicode-bidi : normal;

    /* --------------------------------------*
     * ORDER @pseudo
     * -------------------------------------*/

    :hover,
    :focus,
    :active,
    :before,
    :after,
    :first-child,
    :last-child

}