with SCSS

Best Practices

Code Quality

    
.btnLarge {width:200px;height:200px;display:block;};

.orangeButton {
background-color: orange;@extend %button-normal;
}
.blue-btn {
@extend %btnBIG;
background-color: blue;
}
.BUTTONSMALL {width:50px;height:50px;display:block;};
.greenBUTTON{width:50px;height:50px;display:block;background-color:green;};
.button-SmallBlack
{@import specialButton(2,4);
width:50px;height:$randomHeight;display:block;
background-color:black;
};
    

Its not fun to read or write code like this.

We are in danger of falling into the Broken Window Theory

So what makes css easier to read and maintain?

Consistent Formatting

• Write classes and ids in 'hyphenated-case'
• Use consistent spacing, line-breaks and curly formatting

#home-section {
    width: 960px;
}

.button-large {
    width: 100px;
    height: 40px;
}

.button-small {
    width: 30px;
    height: 10px;
}

Comments

Document complexity just like your Javascript

Sass has both /* */ and //

// Safari disabled state override
input[disabled] {
    -webkit-text-fill-color: rgb(14, 43, 141);
    -webkit-opacity: 1;
    color: rgb(14, 43, 141);
}

Use effective variable names

$link: #ffa600;
$width: 300px;
$length: 200px;
$radius: 5px;

$link-primary: #ffa600;
$info-button-width: 300px;
$home-sidebar-length: 200px;
$tab-radius: 5px;

Properties order

We have hundreds of possible properties, would a logical order make this easier to read?

    
.button {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    margin: 1em 0;
    text-transform: uppercase;
    padding: 1em 4em;
    color: #fff;
    border: 0.25em solid #196e76;
    text-decoration: none;
    background: #196e76;
    font-size: 3em;
    display: inline-block;
    text-align: center;
}
    

Order and group your properties by context

1. Layout (position, float, clear, display)
2. Box Model (width, height, margin, padding)
3. Visual (color, background, border, box-shadow)
4. Typography (font-size, font-family, text-align)
5. Misc (cursor, overflow, z-index)

A contextual order

.button {
    display: inline-block;
    margin: 1em 0;
    padding: 1em 4em;

    color: #fff;
    background: #196e76;
    border: 0.25em solid #196e76;

    font-size: 3em;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

Sorting properties by context

• Redundant and duplicate properties will be more obvious
• Less of a cognitive load to find a specific property to modify

Use the same order in your SASS mixins

@mixin button($color, $background-color, $border-color, $font-family) {
    display: inline-block;
    margin: 1em 0;
    padding: 1em 4em;

    color: $color;
    background: $background-color;
    border: 0.25em solid $border-color;

    font-size: 3em;
    font-family: $font-family;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

Order your css styles 'visually' where possible

.header {}
.header-nav {}
.sidebar {}
.main-content {}
.section-a {}
.section-b {}
.section-c {}
.footer-nav {}
.footer {}

Don't over complicate your selectors

Rule of thumb with more than 3 levels you may want to rethink the style

nav div li ul li > a {
    /* Over specific hard to read */
}

.sub-menu a {
    /* Think about using a class */
}

Limit your SASS nesting

3 is also a good indicator, nesting should be easy to read.

.element {
    /* your general CSS properties */

    &:hover,
    &:active,
    &:focus {
        /* hover/focus state can be encapsulated */
    }

    &::before {
        /* The same for pseudo styles */
    }
}

Redundant @mixins can bloat your css

• Each time you use a mixin it will insert the properties into the final css
• Mixins are best suited when argument(s) are needed eg: @include rounded-corner(3);
• When no parameter is required, @extend or placeholders prevent repitition in the compiled css

@extend example

.bg-image {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    @extend .bg-image;
    background-image:url("/images/image-one.jpg");
}

.image-two {
    @extend .bg-image;
    background-image:url("/images/image-two.jpg");
}

Compiles to

.bg-image, .image-one, .image-two {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    background-image:url("/images/image-one.jpg");
}

.image-two {
    background-image:url("/images/image-two.jpg");
}

Using @mixin

The more you use it, the bloated the compiled stylesheet

.image-one {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image:url("/images/image-one.jpg");
}

.image-two {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image:url("/images/image-two.jpg");
}

Use the SASS to avoid hard coding style, calculations and repeating yourself