Skip to content

Latest commit

 

History

History
173 lines (137 loc) · 4.94 KB

css.md

File metadata and controls

173 lines (137 loc) · 4.94 KB
Raw

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.

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