This page outlines the style guide for CSS stylesheets in all Mozpacers' projects.
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.
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
-
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').
-
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
shorten it to one rule
padding-left: 10px; padding-right: 10px; padding-top: 20px; padding-bottom: 5px;
However, if you're only changing the left padding, then it is appropriate to usepadding: 20px 10px 5px 10px;
padding-left
.
- Instead of writing out
-
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 */
- 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 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 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
Hi @manrajgrover
Actually I tried to look into the gap creeping in between points, but I'm not sure what's the cause of this! It is perfectly all right on other MarkDown editors.
I've modified the point 4.