A mostly reasonable approach to CSS
-
Don't use
#id's
in your CSS. Use.classes
to allow for the maximum level of reusability. -
Don't add vendor prefixes manually. Use
@mixins
or autoprefixer which allows you to write your CSS rules without vendor prefixes (in fact, forget about them entirely).
-
Use soft tabs set to 4 spaces.
// bad .selector { ∙∙color: red; } // bad .selector { ∙color: red; } // good .selector { ∙∙∙∙color: red; }
-
Place 1 space after
:
in property declarations, with no space before.// bad .selector { color:red; } // bad .selector { color : red; } // good .selector { color: red; }
-
Place 1 space after commas in lists.
// bad .selector { color: rgba(0,0,0,.1); } // good .selector { color: rgba(0, 0, 0, .1); }
-
Place 1 space before the leading brace.
// bad .selector{ // ...stuff... } // good .selector { // ...stuff... }
-
Place line breaks between rulesets.
// bad .selector { // ...stuff... } .selector--other { // ...stuff... } // good .selector { // ...stuff... } .selector--other { // ...stuff... }
-
When grouping selectors, keep individual selectors to a single line.
// bad .selector--one, .selector--two, { // ...stuff... } // good .selector--one, .selector--two { // ...stuff... }
-
Each declaration should appear on its own line for more accurate error reporting.
// bad .selector {background-color: #000; color: #fff;} // good .selector { background-color: #000; color: #fff; }
##Formatting
-
Code should be lowercase.
// bad .Selector { color: #E5E5E5; } // good .selector { color: #e5e5e5; }
-
Use hex color codes
#000
unless usingrgba()
. -
Use 3 character hexadecimal notation where possible.
// bad .selector { background-color: #ffffff; color: #ff0000; } // good .selector { background-color: #fff; color: #f00; }
-
Avoid specifying units for zero values.
// bad .selector { margin: 0px; } // good .selector { margin: 0; }
-
Don't write leading zeros for numeric values with a decimal point.
// bad .selector { margin: 0.5em; } // good .selector { margin: .5em; }
-
Use shorthand properties where possible, preferring the shortest form.
// bad .selector { padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; } // good .selector { padding: 0 1em 2em; } // bad .selector { margin: 1em 1em 1em 1em; padding: 1em 2em 1em 2em; } // good .selector { margin: 1em; padding: 1em 2em; }
-
Alphabetize declarations to achieve consistent code in a way that is easy to remember and maintain. Sublime Text will do this for you if you hilight the declaration and hit F9.
// bad .selector { text-align: center; text-indent: 2em; border: 1px solid; border-radius: 4px; color: black; background: fuchsia; } // good .selector { background: fuchsia; border-radius: 4px; border: 1px solid; color: black; text-align: center; text-indent: 2em; }
-
Use single
''
rather than double""
quotation marks for attribute selectors or property values.// bad .selector { font-family: "open sans", arial, sans-serif; } // good .selector { font-family: 'open sans', arial, sans-serif; }
-
Indent all block content to reflect hierarchy.
// bad @media screen { html { background: #fff; color: #444; } } // good @media screen { html { background: #fff; color: #444; } }
##SASS Specific
-
Variablize all common values
$brand-primary: #2c9c54; $brand-secondary: darken($brand-primary, 20%); $brand-error: #f00;
-
Prefer
//
comments over/* */
as they don't get rendered in the final generated CSS.// bad /* This is a comment that gets rendered */ // good // This comment never gets rendered
-
Write
@extend
statements first in rule sets, followed by "regular" property declarations, then@include
statements and finally nested rule sets. Nothing goes after the nested stuff..fatal-error { @extend %error; color: $brand-error; @include transition(all .3s ease); p { // ...stuff... } }
-
Always use placeholder selectors in
@extend
.// bad .fatal { @extend .error; } // good .fatal { @extend %error; }
-
Place
@else
statements on the same line as the preceding curly brace.// bad @if { // ...stuff... } @else { // ...stuff... } // good @if { // ...stuff... } @else { // ...stuff... }
-
Functions, mixins, and variables should be declared with all lowercase letters and hyphens instead of underscores.
// bad $myVar: 10px; @mixin myMixin() { // ...stuff... } // good $my-var: 10px; @mixin my-mixin() { // ...stuff... }
-
Separate rule, function, and mixin declarations with empty lines.
// bad p { margin: 0; em { // ...stuff... } } a { // ...stuff... } // good p { margin: 0; em { // ...stuff... } } a { // ...stuff... }