Skip to content

Instantly share code, notes, and snippets.

@fleishmanhillard

fleishmanhillard/css-style-guide.md

Created April 4, 2014 21:40
Show Gist options
  • Save fleishmanhillard/9983654 to your computer and use it in GitHub Desktop.
Save fleishmanhillard/9983654 to your computer and use it in GitHub Desktop.
Download ZIP
CSS style guide with coding standards and best practices.
Raw
css-style-guide.md

CSS Style Guide

All rules and guidelines in this document apply to css/scss files unless otherwise noted.

The keywords "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119.

Most sections are broken up into two parts:

  1. Overview of all rules with a quick example
  2. Each rule called out with examples of do's and don'ts

Icon Legend:

· Space, ⇥ Tab, ↵ Enter/Return

Table of Contents

  1. Files
    1. File Format
    2. Filename
    3. File Structure
  2. Skeleton
  3. Comments
    1. Section Comments
    2. Inline Comments
  4. Formatting
    1. Line Indentation
    2. Blank Lines
    3. Trailing Whitespace
    4. Declaration Order
    5. Property Name Stops
    6. Quotation
    7. Poperty Units
    8. Background Images
  5. Sass
    1. Variable Names
    2. Variable Prefix
    3. Mixin Names
    4. Mixin Arguments
    5. Nesting Levels
  6. Best Practices
    1. Selector Specificity
    2. CSS Shorthand
    3. CSS Hacks
    4. CSS3 Properties
    5. SASS Variables and Mixins
    6. Mobile

1. Files

This section describes the format and naming convention of css and sass files.

File Format

  1. Character encoding MUST be set to UTF-8 without BOM
    • Sublime.app → File › Save with Encoding › UTF-8
  2. Line endings MUST be set to Unix (LF)
    • Sublime.app → View › Line Endings › Unix

Filename

  1. Letters MUST be all lowercase
    • e.g. style.css, _mobile.scss
  2. Words MUST be separated with a hyphen
    • e.g. ie8-styles.css
  3. Minified MUST be appended to the filename if the css file is minified
    • e.g. style.min.css

File Structure

The following files below are the files that should be created for a new project that utilizes SASS

Filename Description
_colors.scss Color styles and variables live here
_global.scss Styles that should be applied sitewide live here
_mobile.scss Styles that are specific to moblie devices live here
_objects.scss Sitewide variables and mixins should be defined here
_style.scss Imports all partials and is monitored for changes by sass (compiled into style.css)
_typography.scss Font styles and variables live here
_widgets.scss Reuseable modular styles should live here 

|-- styles/scss/
|   |-- partials/
|   |   |-- _colors.scss
|   |   |-- _global.scss
|   |   |-- _mobile.scss
|   |   |-- _objects.scss
|   |   |-- _typography.scss
|   |   |-- _widgets.scss
|   |-- style.scss
|   |  
|   | 
|-- style.css

▲ Table of Contents

2. Skeleton

This section showcases a barebones css file with its minimum requirements.

Stylesheet section blocks breakdown:

  • Section 1: Stylesheet Update Log
  • Section 2: Line break
  • Section 3: Table of Contents
  • Section 4: Line break
  • Section 4: Your css rules
/**
 * [Master Stylesheet]
 */

/******************************************************************************/

/**
 * Project:	Sample Project Name
 * Version:	1.1
 * Last change:	02/07/14 [fixed Float bug, vf]
 * Assigned to:	Your Name (yn), Secondary Name (sn)
 * Primary use:	Usage 
 */

/******************************************************************************/

/**
 * [Table of Contents]
 * 1. Imports
 * 2. Body
 * 3. Header / #header
 * 4. Navigation / #navbar
 * 5. Content / #content
 * 6. Left column / #leftcolumn
 * 7. Right column / #rightcolumn
 * 8. Sidebar / #sidebar
 * 9. RSS / #rss
 * 10. Search / #search
 * 11. Boxes / .box
 * 12. Sideblog / #sideblog
 * 13. Advertisements / .ads
 * 14. Footer / #footer
 */

/******************************************************************************/

/**
 * [1. Imports]
 */

/******************************************************************************/
@import 'reset.css';
@import 'layout.css';

/**
 * [2. Header]
 */

/******************************************************************************/
body {
	color: #606060;
	font-family: 'Helvetica, Arial, san-serif';
	font-size: 100%;
}

▲ Table of Contents

3. Comments

  1. Section Comments MUST be placed on the line above their subject
  2. Inline Comments MUST use /* */ delimiters
    • e.g. #navigation{ /*height: 30px;*/ }

▲ Table of Contents

1. Section Comments

Section comments MUST be placed on their own line above the associated section's declarations

✖ Incorrect

/**
 * [3. Header]
 */

/******************************************************************************/ #nav li{ display: inline; }

↳ Incorrect because the section comment is not on it's own line.

✔ Correct

/**
 * [3. Header]
 */

/******************************************************************************/
#nav li{ display: inline; }

2. Inline Comments

Inline comments MUST use /* */ delimiters.

✖ Incorrect

#navigation li {
	color: #404040;
	display: inline-block;
	font-family: 'Proxima-nova, helvetica, sans-serif';
	line-height: inherit; // inherits the line-height from parent element
}

↳ Incorrect because it uses an invalid // for a single-line comment.

✔ Correct

#navigation li {
	color: #404040;
	display: inline-block;
	font-family: 'Proxima-nova, helvetica, sans-serif';
	line-height: inherit; /* inherits the line-height from parent element */
}

✖ Incorrect

#navigation li {
	//color: #404040;
	//display: inline-block;
	//font-family: 'Proxima-nova, helvetica, sans-serif';
	//line-height: inherit;
}

✔ Correct

#navigation li {
	/*color: #404040;
	display: inline-block;
	font-family: 'Proxima-nova, helvetica, sans-serif';
	line-height :inherit;*/
}

▲ Table of Contents

4. Formatting

This section outline various, general formatting rules related to whitespace and text.

  1. Line indentation MUST be accomplished using tabs
    • i.e. .selector-1 { ↵ ⇥ ... ↵ }
  2. Blank lines MUST be include between rulesets
    • i.e. .selector-1 {} ↵ ↵ .selector-2 {}
  3. Trailing whitespace MUST NOT be present after ruleset brackets , css declarations, stacked selectors or on blank lines
    • i.e. no ... · · ↵ · ↵ ...
  4. Declaration order SHOULD be consistantly ordered either logically or alphabetically
    • e.g. background: #000; ↵ color: #fff; ↵ font-family: 'sans-serif';
  5. Property name stops MUST use a space after a property name's colon.
    • e.g. font-weight: 700;
  6. Quotation MUST use single quotes.
    • e.g. background: url('images/logo.png') no-repeat 0 0;
  7. Property Units
    • percentages SHOULD be used to define: width, height, padding and margins
      • i.e. width: 60%; height: 100%; padding: 0 2%; margin-right: 3%;
    • font-sizes SHOULD be defined using em or rems
      • i.e. font-size: 1.8em; font-size: 1.9rem;
    • image height and widths SHOULD be defined using percentages
      • i.e. img { width: 65.7%; }
  8. Background Images MUST use protocol-relative urls
    • e.g. background-image: url(//bar.com/foo.png);

▲ Table of Contents

1. Line Indentation

Line indentation MUST be accomplished using tabs.

✖ Incorrect

#footer .awards h3{
    color: #000;
    font-weight: 600;
    text-transform: capitalize;
}

↳ Incorrect because spaces are used to indent instead of a tab.

✔ Correct

#footer .awards h3 {
	color: #000;
	font-weight: 600;
	text-transform: capitalize;
}

2. Blank Lines

A blank line MUST be included between rulesets.

✖ Incorrect

.selector-1 {
	background: #efefef;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webki-tborder-radius: 4px;
	color: #999;
}
.selector-2 {
	display: inline-block;
	text-decoration: none;
}

↳ Incorrect because there is not a blank line between the closing bracet of the .selector-1 and the .selector-2 opening bracket.

✔ Correct

.selector-1 {
	background: #efefef;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webki-tborder-radius: 4px;
	color: #999;
}

.selector-2 {
	display: inline-block;
	text-decoration: none;
}

3. Trailing whitespace

Trailing whitespace MUST NOT be present after ruleset brackets , css declarations, stacked selectors or on blank lines.

✖ Incorrect

.selector-1, 
.selector-2, 
.selector-3 {
	background: #efefef;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webki-tborder-radius: 4px;
	color: #999;
}

↳ Incorrect because there is a space after ,.

.selector-1, 
.selector-2, 
.selector-3 {
	background: #efefef; 
	border-radius: 4px; 
	-moz-border-radius: 4px; 
	-webki-tborder-radius: 4px; 
	color: #999; 
}

↳ Incorrect because there is a space after each of the css declarations.

.selector-1, 
.selector-2, 
.selector-3 {
	background: #efefef;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webki-tborder-radius: 4px;
	color: #999;
}

↳ Incorrect because there is a space after }.

✔ Correct

.selector-1,
.selector-2,
.selector-3 {
	background: #efefef;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webki-tborder-radius: 4px;
	color: #999;
}

4. Declaration Order

Ruleset declarations MUST be consistantly ordered alphabetically.

✖ Incorrect

.jspscrollable span {
	text-transform: underline;
	font-weight: 700;
	padding: 4px 3px;
	border-radius: 4px;
	height: 100%;
	overflow: hidden;
	-moz-border-radius: 4px;
	-webki-tborder-radius: 4px;
	line-height: 15;
	border: 1px solid rgba(60, 60, 60, .4);
	width: 75%;
	color: #aaa;
}

↳ Incorrect because the ruleset declarations are not ordered alphabetically.

✔ Correct

.jspscrollable span {
	border: 1px solid rgba(60, 60, 60, .4);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webki-tborder-radius: 4px;
	color: #aaa;
	font-weight: 700;
	height: 100%;
	line-height: 15;
	overflow: hidden;
	padding: 4px 3px;
	text-transform: underline;
	width: 75%;
}

↳ Correct - this is an alphabetical arrangement.

5. Property name stops

Properties must have a space after the colon following the property name

✖ Incorrect

body {
	height:100%;
	overflow: hidden;
	position: relative;
}

↳ Incorrect because there is no space between height: and 100%.

✔ Correct

body {
	height: 100%;
	overflow: hidden;
	position: relative;
}

6. Quotation

Single quotes should be used in all css declarations

✖ Incorrect

body {
	height: 100%;
	overflow: hidden;
	position: relative;
	font-family: "Helvetica, Arial, Sans-serif";
	background: url("images/background.png") no-repeat 0 0;
}

↳ Incorrect because the background and font-family declarations use double quotes instead of single quotes.

✔ Correct

body {
	height: 100%;
	overflow: hidden;
	position: relative;
	font-family: 'Helvetica, Arial, Sans-serif';
	background: url('images/background.png') no-repeat 0 0;
}

7. Property Units

Percentages SHOULD be used to define: width, height, padding and margins

✖ Incorrect

#content .left-container {
	float: left;
	font-size: 4%;
	height: 100%;
	margin-right: 28px;
	overflow: hidden;
	width: 672px;
}

#content .sidebar {
	float: left;
	font-size: 12px;
	height: 100%;
	margin: 0;
	overflow: hidden;
	width: 307px;
}

#content .sidebar img {
	height: auto;
	max-width: inherit;
	width: 500px;
}

↳ Incorrect because the widths and margin-right declarations use px instead of %.

↳ Incorrect because the font-size(s) are not defined with ems or rems.

↳ Incorrect because the #content .sidebar img {} isn't using percentages for the width.

✔ Correct

#content .left-container {
	float: left;
	font-size: 1.8em;
	height: 100%;
	margin-right: 3%;
	overflow: hidden;
	width: 70%;
}

#content .sidebar {
	float: left;
	font-size: 1.75rem;
	height: 100%;
	margin: 0;
	overflow: hidden;
	width: 27%;
}

#content .sidebar img {
	height: auto;
	max-width: inherit;
	width: 72%;
}

8. Background Images

MUST use protocol-relative urls.

✖ Incorrect

#footer .awards h3{
    background: url(http://bar.com/foo.png) no-repeat 0 0;
    color: #000;
    font-weight: 600;
    text-transform: capitalize;
}

↳ Incorrect because a protocol has been specified in background: url(http://bar.com/foo.png) no-repeat 0 0;.

✔ Correct

#footer .awards h3{
    background: url(//bar.com/foo.png) no-repeat 0 0;
    color: #000;
    font-weight: 600;
    text-transform: capitalize;
}

▲ Table of Contents

5. SASS

This section outlines basic style guidelines for defining variables with SASS.

  1. Variable Names MUST be all lowercase and words MUST be separated by hyphens.
    • i.e. $link-dark-gray: #a9a9a9;
  2. Variable Prefix SHOULD be prefixed with element type that variable will be applied to.
    • i.e. $font-weight-bold: 600;
  3. Mixin Names MUST be lowercase and words separated with underscores i.e. @mixin mixin_border_radius() {}
  4. Mixin Arguments
    • MUST NOT have a space before the comma
    • MUST have a space after the comma
    • MAY use line breaks for long arguments
    • MUST then place each argument on its own line
    • MUST then indent each argument once
    • MUST be ordered from required to optional first
    • MUST be ordered from high to low importance second
    • MUST use descriptive defaults
    • MUST be preceded by a comment that explains the functionality of the mixin
    • e.g. @mixin border-radius($radius-left, $radius-rght, $radius-top = 100);
  5. Nesting Levels SHOULD never go more than four levels deep.

▲ Table of Contents

1. Variable Names

Variable names MUST be all lowercase and words MUST be separated by hyphens.

✖ Incorrect

/* Color Variables */
$color-dark-gray: #a9a9a9;
$color-black: #000;
$colorLightBlue: #add8e6;
$color-Kiwi: #7f9a65;
$color_ruby_red: #c82536;

↳ Incorrect because $colorlightBlue is not seperated with hyphens. Variables should not be camelcase.

↳ Incorrect because $color-Kiwi is not all lowercase.

↳ Incorrect because $color_ruby_red is separated by underscores.

✔ Correct

/* Color Variables */
$color-dark-gray: #a9a9a9;
$color-black: #000;
$color-light-blue: #add8e6;
$color-kiwi: #7f9a65;
$color-ruby-red: #c82536;

2. Variable Prefix

Variables SHOULD be prefixed with the element type that the variable will be applied to.

~ Acceptable

/* Define Variables */
$dark-gray: #a9a9a9;
$line-height: 16;
$color-blue: #add8e6;

↳ Acceptable, as some variables may be applied to several types of elements. This makes it difficult to assign an appropriate prefix to the variable.

✔ Preferred

/* Define Variables */
$font-color-dark-gray: #a9a9a9;
$slideshow-caption-line-height: 16;
$logo-color-blue: #add8e6;

↳ Preferred. Try to make variable names as consise, descriptive and semantic as possible.

3. Mixin Names

Mixin Names MUST be lowercase and words seperated with underscores.

✖ Incorrect

@mixin myMixinName($opacity: .5) {
	opacity: $opacity;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity =' $opacity * 100 ')';
	filter: alpha(opacity = $opacity * 100 );
	zoom: 1;
}

↳ Incorrect because @mixin myMixinName() {} is not all lowercase.

↳ Incorrect because the words in @mixin myMixinName() {} are not separated with underscores.

✔ Correct

@mixin my_mixin_name($opacity: .5) {
	opacity: $opacity;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity =' $opacity * 100 ')';
	filter: alpha(opacity = $opacity * 100 );
	zoom: 1;
}

4. Mixin Arguments

Mixin Arguments

  • MUST NOT have a space before the comma
  • MUST have a space after the comma
  • MAY use line breaks for long arguments
  • MUST then place each argument on its own line
  • MUST then indent each argument once
  • MUST be ordered from required to optional first
  • MUST be ordered from high to low importance second
  • MUST use descriptive defaults
  • MUST be preceded by a comment that explains the functionality of the mixin

✖ Incorrect

/* Round Borders
 1. 'size' sets the width of the border-outline in px
 2. 'type' sets the type of the border (solid)
 3. radius* is the radius in px for the border in every corner of the element - if there's only one radius, every radius gets the amount of the first one */

@mixin mixin_border_radius($size: none, $type: none, $color: none, $radius1: 999, $radius2: 999, $radius3: 999, $radius4: 999) {

	@if $radius2 == 999 {$radius2 : $radius1};
	@if $radius3 == 999 {$radius3 : $radius1};
	@if $radius4 == 999 {$radius4 : $radius1};

	@if $size != none {border: $size $type $color};

	-webkit-border-radius : $radius1 $radius2 $radius3 $radius4;
	-moz-border-radius    : $radius1 $radius2 $radius3 $radius4;
	border-radius	      : $radius1 $radius2 $radius3 $radius4;
}

↳ Incorrect because long list of arguments are not broken up one per line.

↳ Incorrect mixin arguments should be more descriptive e.g. $radius1, $radius2. While you could derive what each variable is doing, this could be made more obvious with descriptive names.

✔ Correct

/* Round Borders
 1. 'size' sets the width of the border-outline in px
 2. 'type' sets the type of the border (solid)
 3. radius* is the radius in px for the border in every corner of the element - if there's only one radius, every radius gets the amount of the first one */

@mixin mixin_border_radius(
	$border-size: none,
	$border-type: none,
	$border-color: none,
	$border-top-left-radius: 999,
	$border-top-right-radius: 999,
	$border-bottom-left-radius: 999,
	border-bottom-right-radius: 999
) {

	@if $border-top-left-radius == 999 {$border-top-left-radius : $border-top-right-radius};
	@if $border-bottom-left-radius == 999 {$border-bottom-left-radius : $border-top-right-radius};
	@if $border-bottom-right-radius == 999 {$border-bottom-right-radius : $border-top-right-radius};

	@if $size != none {border: $size $type $color};

	-webkit-border-radius : border-top-left-radiius $border-top-right-radius $border-bottom-right-radius $border-bottom-left-radius;
	-moz-border-radius    : border-top-left-radiius $border-top-right-radius $border-bottom-right-radius $border-bottom-left-radius;
	border-radius	      : border-top-left-radiius $border-top-right-radius $border-bottom-right-radius $border-bottom-left-radius;
}

5. Nesting Levels

✖ Incorrect

.blog-post {
	background: transparent;
	color: #606060;
	display: inline-block;
	.blog-post-content {
		color: #000;
		font-weight: normal;
		.blog-post-meta {
			display: block;
			float: right;
			.blog-post-meta-author {
				color: blue;
				.blog-post-author-link {
					text-decoration: underline;
				}
			}
		}
	}
}

↳ Incorrect as the nesting above goes more than four levels deep.

✔ Correct

.blog-post {
	background: transparent;
	color: #606060;
	display: inline-block;
	.blog-post-content {
		color: #000;
		font-weight: normal;
		.blog-post-meta {
			display: block;
			float: right;
			.blog-post-meta-author {
				color: blue;
			}
		}
	}
}

.blog-post-author-link {
	text-decoration: underline;
}

▲ Table of Contents

8. Best Practices

  1. Selector Specificity
    • SHOULD be efficient and consise.
    • Elements that occur once in the page SHOULD use an ID, otherwise use classes.
    • SHOULD not use more than one id selector in a rule declaration.
    • SHOULD use specific and descriptive classnames and reflect the purpose of the element in question.
  2. CSS Shorthand SHOULD use shorthand properties when possible.
    • e.g. padding: 0 4px;
  3. CSS Hacks SHOULD avoid using css hacks.
    • Usage of inline IE version hacks SHOULD be avoided. A version specific stylesheet should be conditionally loaded instead.
    • MUST avoid using !important. Selector specificity increased for the affected rule instead.
    • SHOULD avoid firfox,chrome,safari and opera targetting hacks. Hacks used to target firefox, Chrome, Safari and Opera browsers may be used sparingly, as there are instances where rendering in these browsers may need to be slightly different. It is preferrable to use a js library that adds a browser specific class to the body tag of a html layout. That new class could then be used for your styling purposes.
      • e.g. NO #slider { color: blue\9; } #slider { width: 100%!important; }
  4. CSS3 Properties MUST include vendor prefixes for css3 properties if needed.
    • e.g. border-radius: 3px; ↵ -webkit-border-radius: 3px; ↵ -moz-border-radius: 3px;
  5. SASS Variables and Mixins
    • SHOULD use variables to store singular values that will be reused frequently within the stylesheet. Colors, fonts, font-sizes, widths, margin and paddings could all be stored as variables.
      • e.g. $nav-link-color: #555; $default-font-family: 'Proxima-nova, Helvetica, Sans-serif';
    • SHOULD use mixins in place of repetitive blocks of declarations. Any css3 declarations that require vendor prefixis could be combined into a mixin, groupings of declarations for an element could also be combined into a mixin.
      • e.g. @mixin border-radius($radius) { ↵ ⇥ -moz-border-radius: $radius; ↵ -webkit-border-radius: $radius; ↵ border-radius: $radius; }
  6. Mobile
    • SHOULD Use fluid grids where percentages are utilized for widths, heights, margins and paddings. A mobile-first css framework will automatically work within these principals.
      • i.e. .col-md-12 { width: 100%;} ↵ .col-md-6 { width: 50%; } (example is from bootstrap)
    • SHOULD Use either EMs or REMs for font-sizes.
      • e.g. .blog-post .content { font-size: 1.44rem; }
    • SHOULD Use percentages for image sizes.
      • e.g. .author img { max-width: 75%; }

▲ Table of Contents

1. Selector Specificity

  • SHOULD be efficient and consise.
  • Elements that occur once in the page SHOULD use an ID, otherwise use classes.
  • SHOULD not use more than one id selector in a rule declaration.
  • SHOULD use specific and descriptive classnames and reflect the purpose of the element in question.

✖ Incorrect

.color {
	background: #000;
}

↳ Incorrect as .color selector doesn't clearly indicate what it will be used for.

✖ Incorrect

.this-is-going-to-be-used .to-set-the-color-to-black {
	background: #000;
}
#navigation #subnav li a {
	display: inline-block;
}

↳ Incorrect as the selectors while clear, could be rewritten to be more consise.

↳ Two ids should not be used in a selector Unless absolutely neccessary as this can prove to be nearly as problematic as having !important;.

✔ Correct

#footer .contact-form-submit {
	float: left;
}

2. CSS Shorthand

✖ Incorrect

.#footer .contact-form-submit {
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 4px;
	margin-bottom: 5px;
}

↳ Incorrect as these declarations could be simplified into a single declaration.

✔ Correct

#footer .contact-form-submit {
	margin: 4px 3px 5px 3px;
}

3. CSS Hacks

  • Usage of inline IE version hacks SHOULD be avoided. A version specific stylesheet should be conditionally loaded instead.
  • Usage of !important MUST be avoided. Selector specificity increased for the affected rule instead.
  • Hacks used to target firefox, Chrome, Safari and Opera browsers may be used sparingly, as there are instances where rendering in these browsers may need to be slightly different. It is preferrable to use a js library that adds a browser specific class to the body tag of a html layout. That new class could then be used for your styling purposes.

~ Acceptable

#header .logo {
	position: relative; /* Position relative for modern browsers */
	position: absolute\9; /* Position absolute for IE8 and IE7 */
}

↳ Acceptable but not the preferred method.

✔ Correct

#header .logo {
	position: relative; 
}

.ie7 #header .logo,
.ie8 #header .logo {
	position: absolute;
}

↳ The preferred method would be either to create a stylesheet that is conditionally loaded for IE7 & IE8 or to use js detection that will add classes such as ie7, that could then be used for styling purposes.

4. CSS3 Properties

The table below details some css3 properties that MUST be vendor prefixed .

MUST have vendor prefixes Vendor prefixes recommended
animation border-radius
border-image box-shadow
box-sizing
calc
filters
flexbox
gradients
masks
regions
text-overflow
transforms
transitions

~ Acceptable

.#footer .contact-form-submit {
	border-radius: 3px;
	box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
}

↳ Acceptable. The current versions of all popular browsers do not require prefixes for box-shadow or border-radius. It is possible that some users may still be running versions of these browsers that are a few versions behind the current version. These older versions would not recognize the border-radius and box-shadow declarations without the vendor prefixes.

✔ Preferred

.#footer .contact-form-submit {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
}

✖ Incorrect

.#footer .column {
	box-sizing: border-box;
	padding: 0 2.2%;
}

↳ Incorrect, no vendor prefixes have been specified for box-sizing: border-box;.

✔ Correct

.#footer .column {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 0 2.2%;
}

5. SASS Variables and Mixins

  • SASS variables SHOULD be used to store singular values that will be reused frequently within the stylesheet. Colors, fonts, font-sizes, widths, margin and paddings could all be stored as variables.

  • SASS mixins SHOULD be used in place of repetitive blocks of declarations. Any css3 declarations that require vendor prefixis could be combined into a mixin, groupings of declarations for an element could also be combined into a mixin.

~ Acceptable

body {
	color: #000;
	font-family: 'Proxima-nova, Helvetica, Sans-serif';
	font-size:14px;
}   

#widget .container {
	box-shadow: inset 3px 1px 6px rgba(60, 60, 60, .75);
	-moz-box-shadow: inset 3px 1px 6px rgba(60, 60, 60, .75);
	-webkit-box-shadow: inset 3px 1px 6px rgba(60, 60, 60, .75);
}

↳ This is valid syntax as variables, but there is also an opportunity for storing these values as variables as there is a good chance they will need to be reused within the stylesheet at somepoint. Changing this value in one location is normally preferrable over having to modify it in several places.

✔ Preferred

/* Variables and mixin below were defined within a separate stylesheet */
body {
	color: $color-black;
	font-family: $proxima-nova-regular;
	font-size: $default-font-size;
}   

#widget .container {
	@include box-shadow(3px, 1px, 6px, rgba(60, 60, 60, .75), true);
	
}

6. Mobile

  • SHOULD Use fluid grids where percentages are utilized for widths, heights, margins and paddings. A mobile-first css framework will automatically work off these principals.
  • SHOULD Use either EMs or REMs for font-sizes.
  • SHOULD Use percentages for image sizes.

6. Mobile

✖ Incorrect

.blog-post .content {
	font-family: $proxima-nova-regular;
	font-size: 12px;
}
.author-box img{
	vertical-align: middle;
	max-width: 320px;
}

↳ Incorrect as font-size: 12px; SHOULD utilize em or rem instead. max-width:320px; should be defined with a percentage.

✔ Correct

.blog-post .content {
	font-family: $proxima-nova-regular;
	font-size: .750em;
}
.author-box img{
	vertical-align: middle;
	max-width: 33.3%;
}

▲ Table of Contents

Inspired in part by code standards from:
idiomatic.css, Google Style Guide.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment