John Cheesman

Ordering Properties in SASS

Code

A detailed example of how I organise properties when writing SASS.

At work we are constantly looking for ways to improve maintainability and consistency throughout our code, which will only become more important as our team grows in the future. So, having an agreed method for grouping and formatting styles now should be a big help further down the line.

After reading the results of this CSS-Tricks poll, which asked people how they order CSS properties, I had a go at writing down my own formatting style. To be totally honest, until recently I fell into the random camp when it came to ordering properties. I would mostly just write them out in the order I thought of them and any additional rules would be added at the bottom.

I’m now trying to incorporate the grouped by type method, which came out on top in the poll, with my existing practices for formatting in SASS. This is what I have so far:

.parent-selector {
    @extend %pattern;                // Extend a placeholder
    @extend %another-pattern;        // Extend another placeholder

    @inlcude simple-mixin();         // Include a single line mixin
    @inlcude another-simple-mixin(); // Include another single line mixin

    position: relative;              // Positioning
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    float: left;
    clear: left;

    display: block;                  // Display & box model
    overflow: hidden;
    box-sizing: border-box;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background-image: none;

    color: #000;                     // Colour
    background-color: #fff;

    font-family: sans-serif;         // Text
    font-size: 1em;
    line-height: 1.5;
    text-align: left;
    text-indent: 0;
    letter-spacing: auto;
    word-spacing: auto;
    white-space: auto;

    cursor: pointer;                 // Other
    transition: all 0.2s;

    @include block-mixin() {         // Include a mixin with content
        // Mixin @content
    }

    @include another-block-mixin() { // Include another mixin with content
        // Mixin @content
    }

    &:hover, &:focus {               // Interaction pseudo selectors
        // Hover and focus styles
    }

    &:first-child {                  // Pseudo selectors
        // First child styles
    }

    &:before, &:after {              // Pseudo elements
        content: '';
    }

    .child-selector {                // Child elements
        // Repeat above format
    }
}

I’m maintaining the above example as a Gist so it can be modified and added to as needed.