CuriousLearner/CSS-Styleguide.md

## CSS-Styleguide.md

      
    Raw
  

              CSS-Styleguide.md
            
          
    This page outlines the style guide for CSS stylesheets in all Mozpacers' projects.
CSSComb

In general, all Mozpacers' repositories has a .csscomb.json file with the configuration as follows:
{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "upper",
    "block-indent": "  ",
    "color-shorthand": false,
    "element-case": "lower",
    "leading-zero": true,
    "quotes": "single",
    "sort-order-fallback": "abc",
    "space-before-colon": "",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": " ",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "tab-size": true,
    "unitless-zero": true,
    "vendor-prefix-align": true
}
Just run the CSSComb command at the end of your work and you'll be good to go.
How to use CSSComb

Use from text-editor:
We're listing out plugins for the most popular text-editors that you can use to run CSSComb.

Atom: Atom CSSComb Plugin
Sublime: Sublime CSSComb Plugin
Brackets: Brackets CSSComb Plugin
Vim: Vim CSSComb Plugin

Use from CLI
You'll need to do a global installation of CSSComb as a npm package
npm install csscomb -g
After that, you can use it as follows
csscomb assets/css
Spacing


Indentation with two spaces.


No whitespace at the end of line or on blank lines.


Use a space after a property name's colon, do not use a space before the colon.


Put a space before { in rule declaration.
Example:
p {
  padding-left: 2px;
}


Place the closing brace of a rule declaration on a new line.


When listing multiple selectors associated with the same CSS rule, add a space after each , and not before ,.


The only time you should indent selectors is within nested rule declarations, like media queries.


No spaces within () for urls.


The line length should be no more than 80 characters.


Unix-style linebreaks ('\n'), not Windows-style ('\r\n').


Formatting


Use hex color codes (#5C8FB3) unless using rgba().


Always use full hex codes using upper case letters.


Don't specify units for 0 values.


Avoid cascading selectors that are more than 3 selectors long.


Avoid unnecessary cascading selectors.


Use shorthand properties when possible.

Instead of writing out
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 5px;
shorten it to one rule
padding: 20px 10px 5px 10px;
However, if you're only changing the left padding, then it is appropriate to use padding-left.


Don't omit leading zeros in decimal values.


Use single quotes instead of double quotes.


Always have a semicolon at the end of each declaration.


Avoid the use of !important. Use specific selectors instead.


While creating styles try to follow a top-down approach in writing element selectors. Each new rule should go to specific section where the HTML selector is actually placed.
Example:
/* Header */
header{
  ...
}
/* End of header */

/* Home Section */
section#home{
  ...
}
/* End of home section */

/* Footer */
footer{
  ...
}
/* End of footer section */


Imports


Don't use @import in distribution files. It is slower, adds extra page requests, and can cause other unforeseen problems.
Do not use more than 31 @imports in a single CSS file, it will break IE.
Do not nest @imports, you will not be able to guarantee their order.

Comments

Comments are always preceded by a blank line. Comments start with a capital first letter, but don't require a period at the end, unless you're writing full sentences. There must be a single space between the comment token and the comment text.
When comments take up multiple lines, use a * at the beginning of each line. There must be a space between the first word and the * on each line.
/* Good single line comment */

/*
* Good example of a multi-line comment.
* If your comment takes up multiple lines, please do this.
*/
Class Names


Class names should be all lowercase letters.


Build class names with hyphens (-).


Avoid excessive and arbitrary shorthand notation for classes. .ui-button is useful for button, but .b doesn't mean anything.


Use classes to identify selectors instead of ids.
/* Bad Example */
.uiButton,
.ui_button,
#uiButton,
.b {

}

/* Good Example */
.ui-button {

 }


Proudly forked from jQuery