CSS Style Guides

Below is a list of some style guides for CSS provided by GitHub and Google.

GitHub

GitHub CSS style guide

– use soft-tabs with a two space indent
– put spaces after : in property declarations and before { in rule declarations
– use hex color codes #000 unless using rgba.
– use // for comment blocks, instead of /**/
– use px for font-size, because it offers absolute control over text. Additionally, unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.

Google

Google HTML/CSS style guide

Style Rules:

type selectors: avoid qualifying ID and class names with type selectors;

/* NOT */
ul#example {}
div.error {}

/* DO */
#example {}
.error {}

shorthand properties: use shorthand properties where possible;

/* NOT */
font-family: georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 0;

/* DO */
font: 100%/1.6 georgia, sans;
padding: 10px 15px 20px 0;

0 and units: omit unit specification after ‘0’ values;
hexadecimal notation: use 3 character hexadecimal notation where possible;
ID and class naming: use meaningfull or generic ID and class names;
ID and class delimiters: separate words in ID and class names by a hyphen;

/* NOT */
.demoimage {}
.error_status {}

/* DO */
.demo-image {}
.error-status {}

Formatting Rules:

indentation: indent by 2 spaces at a time;
capitalization: use only lowercase;

/* NOT */
FONT-SIZE: 14PX;

/* DO */
font-size: 14px;

declaration order: alphabetize declarations;
declaration stops: use a semicolon after every declaration;

/* NOT */
.test {
  display: block;
  height: 100px
}

/* DO */
.test {
  display: block;
  height: 100px;
}

property name stops: use a space after a property name’s colon;
selector and declaration separation: separate selectors and declarations by new lines;
rule separation: separate rules by new lines;
CSS quotation marks: use single quotation marks for attribute selectors and property values where necessary.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s