The following are coding conventions for Cascading Style Sheets. They are not meant to be restrictive; rather, they are based upon best practices that have been developed over the years within the web development community.
Strings should be double-quoted.
Style sheets should use the following syntax when being referenced to externally:
<link rel="stylesheet" type="text/css" media="screen" href="http://www.benjamintoll.com/lib/global.css" />
The rel attribute should always come first. The link element is a self-closing element.
Embedded styles should use the following syntax:
<style type="text/css"> ...styles... </style>
Use two spaces.
CSS uses only the /* ... */ syntax for comments.
Each declaration should appear on its own line, except if it's a simple selector. Please review the following rules and the proper spacing for each:
div, p, li { //div,[space]p,[space]li[space]{ property: value; //property:[space]value; } div#container > ul, //one space should not only separate each item in the selector... div#menu > p + ol { //...but a space should also separate a combinator from an element name; property: value; property: value; property: value; //each declaration (property/value pair) should be indented two spaces, be on its own line and end with a semi-colon; }
Note that the opening bracket appears on the same line as the last selector, and the closing bracket appears on its own line and lined up with the beginning of the selector grouping.
Declarations should be listed alphabetically, except when an element is positioned. In that case, it is acceptable to put the locations immediately after the position declaration.
div#shingle { background: #CCC; border: 1px solid #000; padding: 17px 10px 0 5px; position: absolute; top: 25px; right: 100px; width: 400px; z-index: 100; }
Use shorthand properties and shorthand hex properties.
All IE-specific hacks and bug fixes should be exported to their own style sheet and referenced by a conditional comment. For example:
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="http://www.benjamintoll.com/lib/fix-ie6.css" /> <![endif]-->
Any other hacks or complex fixes should be commented.
!important DeclarationUse of the !important declaration is generally considered a hack and should be avoided. It masks errors. It is always better to investigate why a particular declaration or rule is being overidden rather than resorting to this heavy-handed "solution" (hint, it's always specificity).
There are only a few justifiable uses of the !important declaration, such as the following, and even this is debatable:
.hide { /*ensure that all classed elements are hidden*/ display: none !important; }
The rules governing CSS are not whimsical nor are they voodoo, and those who claim they are don't understand specificity and the cascade (and other things, actually). Unfortunately, a quick Google search revealed that many of the top-ranked explanations of specificity are wrong. The best source out there is Eric Meyer's O'Reilly book, which thankfully dispels much, if not all, of the anxiety and hand-wringing surrounding CSS.
Do not use inline styles, as they cannot be overidden.