Coding Standards & Formatting: CSS

Code

Unrelated, but here I am outlining some nice CSS practices and ones that I prefer:

CSS

I try and reference a parent whenever making CSS declarations to keep IDs and Classes organized:

Formatting & Commenting

/***************************
/* CSS Formatting Example 
***************************/
header {}
header nav#top {}
header nav#top ul.menu {list-style: none; background: transparent; font-size: 18px; font-family: 'Calibri', sans-serif; height: 55px; margin: 0 0 0 23px; padding-top: 17px;}
header nav#top ul.menu li {display: inline-block; margin-right: 7px;}
header nav#top ul.menu li:not(:last-of-type) {padding-right: 7px;}

header nav#top ul.menu li a {color: #0060a8; ;}
header nav#top ul.menu li a:hover {text-decoration: underline;}

On some sites we did indenting whenever a property refers to a child, such as…

header {}
	header nav#main {clear:both;}
			header nav#main ul.menu {list-style: none; padding: 13px; background: #78ae6e; border-bottom: 2px solid #387d2c; border-right: 2px solid #387d2c;font-family: 'Oswald', sans-serif;}
		header nav#main ul.menu li {display: inline-block; position: relative;}
			header nav#main ul.menu li a {padding: 13px; font-size: 22px; font-weight: bold; font-weight: bold; text-shadow: 1px 1px #5c8854; transition: color, ease, 0.5s; color: white;}
			header nav#main ul.menu li a:hover {color: #2a4a25;}

… but that got somewhat cumbersome and easily gets disorganized so we have tried to stick to the former when possible. Also note the commenting structure of the first example — we want to try and organize CSS by page section as much as possible.

Pseudo Classes

Pseudo classes are terrific for only targeting an nth-child in a declaration, and lets you avoid adding a specific class to the HTML of that particular object. I find this especially useful for grids and vertical menus. An example:

header nav#top ul.menu li {display: inline-block; margin-right: 7px;}
header nav#top ul.menu li:not(:last-of-type) {padding-right: 7px;}

With this declaration, all menu items except for the last one will have right padding, so a right justified menu will fit nice and snug into any container.

Google Font Imports

If you’re going to import more than one Google font, please make sure to only use one @import request per the example below:

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700|Pacifico|Roboto:400,700);