Skip to content

Instantly share code, notes, and snippets.

@jglovier
Last active December 14, 2015 14:38
Show Gist options
  • Save jglovier/5101573 to your computer and use it in GitHub Desktop.
Save jglovier/5101573 to your computer and use it in GitHub Desktop.
A suggested style guide for composing easy to read scss files.

My SCSS Style Guide

One of the beauties of authoring code is that apart from basic syntax rules, formatting is flexible. But we all know there are best practices for helping make certain code more readable, and more friendly for collaborator environments.

Here's a suggested style guide for authoring SASS files (SCSS flavor specifically) based on my own personal experience. You may like what I've come up with (then use it), or you may not like it (then fork it). Either way I hope it gets you to think more critically about how formatting your code can lead to efficiency for yourself, and for your team.

// Style category name
// -------------------------------------------/

.some-element { 
    // styles for the `self` item at the top
    overflow: hidden; 
    margin: 0 auto;
    background-color: #0099ff;
    border-bottom: 10px solid #fff;

    // When less than 3 properties leave them inline
    .some-child { background-color: #fff; display: block;

        // When 3 or more properties, add new lines and bracket after last
        &:first-child { 
            width: auto; height: 3em; // group props onto 1 line for logical associations
            margin: 0; padding: 0;
            display: block;
            position: absolute;
            top: 0; left: 50%; }

        .some-child-again { width: 50%; height: 40px;

            element { 
                display: block; 
                color: inherit;
                text-decoration: underline; }

        }

}

// end style category name ------------/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment