CSS Standards - Part 2

[Alex]

Style Definitions
Styles are defined in a simple enough syntax:

Selector {property:value;}

The selector can be one of the following:

An element like BODY, P, LI or A.
A class selector like .warning, .specialoffer
An ID selector like #mainnav, #extracontent
You can group selectors with a comma in between.

H1, P, DIV, SPAN {font-family:Verdana,Arial,Sans-Serif;margin:.5em 0 .5em 0;}

The property is what you want to set. For a whole list of which properties are there, check the CSS guides.

The value is the value you assign to the property. Depending on the property it can be.

A named value like top, left, justify or green
A colour definition in RGB or Hex.
Measurements in pixels, percentages or EMs
Each property-value pair ends in a semicolon, let's also add one after the last one, to make it easy to extend at a later stage.

Keeping CSS documents lean and mean
Let's ensure that we don't make the CSS documents overly long. It is pretty frustrating trying to fix another developer's CSS and searching for the problem by scrolling a lot.

Line syntax
General rule: If there is only one property, the curly brackets should appear on the same line. If there is more than one property, they should appear in separate lines and get indented.

wrong:
H2 {
	color:#ff0000;
}
P {font-family:Verdana,Sans-Serif;font-size:120%;background:#cc0000;}
right:
H2 {color:#ff0000;}
P {
	font-family:Verdana,Sans-Serif;
	font-size:120%;
	background:#cc0000;
	color:#ffffff;
}

Using contextual selectors instead of classes
Let's avoid using classes in our markup unless there is a very good reason for them. A better option is to use contextual selectors and the correct markup. Also ensure to inherit as much as possible from the parent element.

wrong:
<div id="menu">
	<p class="blueback"><a class="white" href="">Link1</a></p>
	<p class="blueback"><a class="white" href="">Link2</a></p>
	<p class="redback"><a class="yellow" href="">Active</a></p>
	<p class="blueback"><a class="white" href="">Link3</a></p>
	<p class="blueback"><a class="white" href="">Link4</a></p>
	<p class="blueback"><a class="white" href="">Link5</a></p>
	<p class="blueback"><a class="white" href="">Link6</a></p>
</div>
.blueback{background-color:blue;}
.white{
	color:#ffffff;
	font-family:arial,sans-serif;
	font-size:14px;
}
.redback{
	background-color:red;
}
.yellow{
	color:#ffff00;
	font-family:arial,sans-serif;
	font-size:14px;
	font-weight:bold;
}
right:
<div id="menu">
	<ul>
		<li><a href="">Link1</a></li>
		<li><a href="">Link2</a></li>
		<li><a href=""><strong>Active</strong></a></li>
		<li><a href="">Link3</a></li>
		<li><a href="">Link4</a></li>
		<li><a href="">Link5</a></li>
		<li><a href="">Link6</a></li>
	</ul>
</div>
#menu {
	background:blue;
	font-family:arial,sans-serif;
	font-size:14px;	
}
#menu li,#menu ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
#menu a{
	display:block;
	color:white;
}
#menu a strong{
	display:block;
	color:yellow;
	background:red;
}

This way the navigation also works without a style sheet (the strong shows the active element in bold) and redesigning it is a lot easier.

Using shortcut notations
To save even more space in CSS documents, we should use shortcut notations whenever possible.

p.warning {
	font-family:arial,sans-serif;
	font-size:14px;	
	line-height:200%;
	color:#ff0000;
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:5px;
	background-color:#ffcccc;
	border-style:solid;
	border-color:#f00000;
	border-width:1px;
}
Can be
p.warning2 {
	font:14px/200% arial,sans-serif;
	color:#f00;
	padding:5px 10px;
	background:#fcc;
	border:1px solid #f00;
}

Explanations:

Every colour that has the same letter in each of the triplets, can be abbreviated. XXYYZZ is the same as XYZ
Padding and Margin can be abbreviated: margin:top right bottom left;. If bottom, top and right, left are the same, it can be margin:topandbottom rightandleft;.
Font can be abbreviated as font:size/line-height types;.
border can be abbreviated as border:width type colour;.
background can be abbreviated as background:imageurl coordinates(top left bottom right, percentage) type(no-repeat,fixed, repeat-x,repeat-y) colour;. Always add a colour to show if the image is not available.

Christian Heilmann