Style Rules

Type Selectors - Specificity

Avoid qualifying ID and class names with type selectors unless necessary.

LESS/CSS
/* Not Recommended */
div.slideshow div.slide {
    height: 290px;
    width: 620px;
}

/* Recommended */
.slideshow .slide {
    height: 290px;
    width: 620px;
}

/* Exception - html classes */
html.lt-ie8 #banner {
    display: block;
}
     
/* Exception - body classes */
body.login-page #login-main {
    float: left;
    width: 32%;
}

Capitalization

Use only lowercase (with the exception of strings).

LESS/CSS
/* Not Recommended */
color: #23A1E2;

/* Recommended */
color: #23a1e2;

Shorthand Properties

Use shorthand properties where possible.

LESS/CSS
/* Not Recommended */
border-top-style: none;
font-family: “Helvetica Neue”, helvetica, arial, sans-serif;
font-size: 14px;
line-height: 1.4;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;

/* Recommended */
border-top: 0;
font: 14px/1.4 , “Helvetica Neue”, helvetica, arial, sans-serif;
padding: 0px 5px 10px 5px;

ID & Class Name Delimiters

Separate words in ID and class names by a hyphen. Do not concatenate words.

LESS/CSS
/* Not Recommended */
.page_header {}
.pageHeader {}
.pageheader {}

/* Recommended */
.page-header {}

0 and Units

Use units after 0 values for margin and padding.

LESS/CSS
margin: 0px;
padding: 0px 5px;

Leading 0s

Do not use 0s in front of values or lengths between -1 and 1.

LESS/CSS
font-size: .8em;

Hexadecimal Notation

Use 3 character hexadecimal notation where possible. Use lowercase only.

LESS/CSS
color: #ccc;

Declaration Stops

Use a semicolon after every declaration.

LESS/CSS
/* Not Recommended */
.slideshow .slide {
    height: 290px;
    width: 620px
}

/* Recommended */
.slideshow .slide {
    height: 290px;
    width: 620px;
}

Property Name Stops

Use a space after a property name's colon.

LESS/CSS
/* Not Recommended */
color:#ccc;

/* Recommended */
color: #ccc;

Declaration Block Separation

Use a space between the last selector and the declaration block.
Opening brace should be on the same line as the last selector in a given rule.

LESS/CSS
/* Not Recommended: missing space */
.slideshow .slide{
    height: 290px;          
    width: 620px;
}

/* Not Recommended: unnecessary line break */
.slideshow .slide
{
    height: 290px;
    width: 620px;
}

/* Recommended */
.slideshow .slide {
    height: 290px;
    width: 620px;
}

Selector and Declaration Separation

Separate selectors and declarations by new lines.

LESS/CSS
/* Not Recommended */
a, a:link, a:visited {
    color: #23a1e2;
    cursor: pointer;
    text-decoration: none;
}

/* Recommended */
a,
a:link,
a:visited {
    color: #23a1e2;
    cursor: pointer;
    text-decoration: none;
}

CSS Quotation Marks

Use double quotation marks for attribute selectors and property values.
Do not use quotation marks in URI values (url()). (Documentation)

LESS/CSS
/* Recommended: Attribute Selector */
input[type="text"]

/* Recommended: Property Value */
content: "Hello";

/* Recommended: URI Example*/
.something-blue {
  background: url(images/bg-something-blue.gif) repeat-y scroll;
}

Vendor Prefixes

Use -webkit prefix only for Safari, iOS and Android support unless a specific property requires other vendor prefixes.
Indent so that values align for readability.

LESS/CSS
/* Not Recommended */
.example {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Recommended */
.example {
    -webkit-border-radius: 6px;
            border-radius: 6px;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
            box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}