Best CSS & SASS Practices

Naming Conventions

Name major elements by main function and/or content, and prefix nested elements with this name. For example, the slide for search on the homepage is called #search.

<div id="search">
    <div id="search-box">
        <input id="search-bar" placeholder="search"/>
    </div>
</div>

Formatting SASS

Use either four spaces or tab to indent. For uncompressed SASS/CSS, include a space after the colon (i.e. display: block;).

Nest everything when possible. Keep the same nesting if you have multiple instances (i.e. different media queries) - otherwise, you'll have to include !important which is unnecessary. Nest pseudo-elements and states by using an ampersand (&). Gabrielle has also created a shortcut for links - #{$links} = a:active, a:focus, a:hover

#search {
    #search-box {
        #search-bar {
            display: block;
            &:before {
                content: "search";
            }
            a {
                color: red;
            }
            #{$links} {
                color: green;
            }
        }
    }
}

Property order generally starts with major properties that determine location on the page and end with font styles. For SASS, include mixins at the beginning. For properties that require prefixes, start with the longest prefix and always end with the non-prefixed property. Gabrielle likes to put prefixed properties either right below mixins or at the end of the property list.

#search {
    #search-box {
        #search-bar {
            // location
            display: flex;
            position: absolute;
            // size
            width: 600px;
            height: 50px;
            // margins
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            margin: 5px 10px;
            // padding and borders
            padding: 5px 10px;
            border: 1px solid;
            // font styles
            font-family: "Source Sans Pro", sans-serif;
            font-size: 16px;
            font-weight: 200;
            line-height: 1.25;
            letter-spacing: 0px;
            text-align: left;
            text-transform: uppercase;
            &:before {
                // mixins
                @include round;
                // transitions
                transition: all .15s ease-in-out;
                // content for pseudo-elements
                content: "search";
                // location
                display: block;
                position: relative;
                z-index: 999;
            }
        }
    }
}

SASS Mixins

Gabrielle has already created mixins and default class styles that you can include on any of your own SASS files. See mixing.scss and default.scss for more details.

• @include flex

• @include flex-wrap

• @include flex-center - flex centering

• @include center-xy - absolute centering, also includes individual x and y centering

• @include round - for circle elements

• @include listless - removes bullets and styling from ordered and unordered lists

• @include opacity($opacity) - includes filter for other browsers, use 0-1 (i.e. @include opacity(0.5))

• .margin-20-x, .margin-20-y, .margin-20-xy

• .margin-20-top, .margin-20-bottom, .margin-20-left, .margin-20-right

• .padding-20-x, .padding-20-y, .padding-20-xy

• .padding-20-top, .padding-20-bottom, .padding-20-left, padding-20-right

• .text-left, .text-right, .text-center

Color variables:
$shamrock, $cerise, $charcoal, $slate, $taupe, $smoke, $campus, $moola, $lake, $azure, $orange, $gold, $eggplant

Typeahead Styling & Elements

Class Names

• tt-input - Added to input that's initialized into a typeahead.
• tt-hint - Added to hint input.
• tt-menu - Added to menu element.
• tt-dataset - Added to dataset elements.
• tt-suggestion - Added to suggestion elements.
• tt-empty - Added to menu element when it contains no content.
• tt-open - Added to menu element when it is opened.
• tt-cursor - Added to suggestion element when menu cursor moves to said suggestion.
• tt-highlight - Added to the element that wraps highlighted text. Defaults to tt-highlight.