General rules

• selector names should have '-' as a separator



 
• use a CSS reset
• no inline styles​
• avoid over-qualification, like div#contact-form
• always include your CSS using the <link> tag, @import will fire additional HTTP request and slow down the site
• use understandable names for selectors

Correct: 
    #name-of-the-selector

Incorrect: 
    #name_of_the_selector, #nameOfTheSelector

Templates

• all html template should go in a _html name folder
• don’t create index or home html / php file such that when accessing the _html folder the list of templates will be listed in the browser
• add number-template-name names to the html / php files

Correct: 
    01-homepage.php

Incorrect: 
    homepage.php

Images

• use jpg instead of png if it’s possible
• optimize the images
• double check the image file size
• use sprites if possible
• create vector fonts if needed

Libraries

• the files used in libraries should have a separate folder, for both css and js
• all the other custom files will be in the root of the folder:

Correct : css/libs/bootstrap.css
Incorrect : css/bootstrap.css

Correct  : scripts/libs/bootstrap.min.js
Incorrect : scripts/bootstrap.min.js

Correct  : css/style.css
Incorrect : css/libs/style.css

Correct  : js/scripts.js
Incorrect : js/libs/scripts.js

Structure

• use one line per property declaration
• put spaces before '{' in rule declarations
• provide fallback properties for older browsers

Correct:
    #selector-1,
    #selector-2,
    #selector-3 {
        background: #fff;
        color: #000;
    }

Incorrect:
    #selector-1, #selector-2, #selector-3 {
        background: #fff;
        color: #000;
        }
     
    #selector-1 { background: #fff; color: #000; }

Colors

• use hex colors instead of RGB
• use rgba() with opacity if the browser requirements allow you to do so
• use 6 digit HEX colors instead of 3

Correct:
    .block {
        background: #FFFFFF;
    }

Incorrect:
    .block {
        background: rgba(255,255,255,0);
    }
    .block {
        background: #FFF;
    }

• use shorthands

Recommended:
    .block {
        margin: 10px 20px;
    }

Instead of
    .block {
        margin: 10px 20px 10px 20px;
    }

Or
    .block {
        margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 10px;
        margin-left: 20px;
    }

• use vendor prefixes

Correct
    .box {
         -webkit-box-shadow: inset 0 0 1px 1px #eee;
        -moz-box-shadow: inset 0 0 1px 1px #eee;
        box-shadow: inset 0 0 1px 1px #eee;
    }

Values

• should always end in semicolon ';'
• line-height should be valueless or .em
• avoid unnecessary px to 0 values
• use fallback for fonts

Correct:
    .block {
        margin: 0;
        font-family: ’CustomGoogleFont’, Arial, sans-serif;
    }

Incorrect
    .block {
        margin: 0px;
        font-family: ’CustomGoogleFont’;
    }

Inheritance

• Don’t duplicate style declarations that can be inherited

Correct:
        div {
            color: #000000;
        }

Incorrect:
        div p, div h1 {
            color: #000000;
        }

General rules

• nest selectors, but not too much! try not to nest more than 3 levels

.weather {
  .cities {
    li {
      // no more!
    }
  }
}

• make your own custom mixins 

@mixin rounded-corner($arc) {
    -moz-border-radius: $arc;
    -webkit-border-radius: $arc;
    border-radius: $arc;  
}

.cta-button {
     @include rounded-corner(8px); 
}

• use a base.scss as the primary scss file; here you can import the other partials; try to see this as a table of contents and write the styles into components

• partials should be named like this: _partial.scss

/* VENDOR - Default fall-backs and external files.
========================================================================== */

@import 'vendor/_normalize.scss';


/* BASE - Base Variable file along with starting point Mixins and Variables.
========================================================================== */

@import 'base/_variables.scss';
@import 'base/_mixins.scss';


/* MODULES - Re-usable site elements.
========================================================================== */ 

@import 'modules/_buttons.scss';
@import 'modules/_lists.scss';
@import 'modules/_tabs.scss';

• don't be vague when naming your variables and don't be too specific

Correct:
        $black: #000000;
        $white: #ffffff;

        $body-color: $black;
        $text-color : $white;

Incorrect:
        $black-body-color: #000000;
        $white-text-color : #ffffff;

• use functions

Top Margin classes

    @for $i from 0 through 10 {
      .#{margin-top}-#{$i*5} {
        margin-top: $i*5px !important;
      }
    }