Kitsimons

Journal Feed

Before we start, I should mention that I'm not suggesting the techniques mentioned here are superior to any other way of working, but they are the techniques that work best for me. There will always be alternative ways of getting things done - what is important is to find those which you are most comfortable with.

General Information

The beginning of any CSS document should list information about the stylesheet and the website it relates to. This information can include details such as website name, main block level element dimensions, main colour values used and so on. For example, the information contained in the kitsimons.com stylesheet is as follows;

/*

----- kitsimons.com screen stylesheet -----
----- Simon Kitson 2007 -----

----- Background Colours -----

Main Background: #000
Secondary Background: #c00

----- Foreground Colours -----

Main Divider: #6a6a6a

----- Text Colours -----

Main Heading: #fff
Sub-Heading: #fff
Main Body: #ccc
Secondary Body: #999
Internal Link: #c00
External Link: #cf3
Internal Link Hover: #900
External Link Hover: #690

----- Dimensions -----

Site Width: 970px
Column Width: 130px
Gutter Width: 10px 

*/

This tip, above all others, will probably save you time and effort in the long run. If documented correctly, this information eliminates the need to refer back to creative documents for commonly used colour values and column widths. Obviously this is particularly helpful when others may be working on your stylesheet in the future, or if you have to pick up a stylesheet created by someone else.

Global Reset

The first rule in any stylesheet should globally set the values of certain properties to predefined defaults (which properties you set is down to you). The main purpose of this exercise is to ensure that you always know what the value of these properties will be for any given HTML tag, even if you do not explicitly create rules for them later on.

An asterisk (*) is used to select all tags;

* {
	margin: 0;
	padding: 0;
	list-style: none;
	border: none;
}

In this instance, globally setting the margin and padding of all HTML tags to zero will prevent a tag from picking a web browsers' default values, should its margin and padding be left undefined in the stylesheet.

Default values can, and do, differ between web browsers (the margin on a <p> tag in Firefox and Internet Explorer, for example) and can cause undesired formatting differences if left unset. Using a global reset ensures the only values used will be those you define yourself.

Style Grouping

Group styles under a commented title according to their application on the website. Typically this will be a specific page, page section, navigation menu or text styles etc. Logically grouping styles, rather than dropping styles into a document ad-hoc, makes things much easier to follow as a CSS document grows, and is especially handy when hunting down styles.

Styles should be grouped as necessary for the website they relate to, but you'll probably find most documents you work with end up following a similar structure;

/* ----- tags ----- */
/* Generic styles that apply to specific HTML tags e.g. body, ul, p, a, strong, blockquote, cite, pre, code etc… */

/* ----- universal styles ----- */
/* Styles that are used universally e.g. a .hide style. */

/* ----- masthead ----- */
/* Styles that apply to the website masthead. */

/* ----- global navigation ----- */
/* Styles that apply to global navigation. */

/* ----- sub navigation ----- */
/* Styles that apply to sub-navigation. */

/* ----- footer ----- */
/* Styles that apply to the website footer. */

/* ----- content ----- */
/* Styles that apply to the main content area. */

/* ----- heading and text styles ----- */
/* Styles that apply to content headings and body text. */

Style Formatting

It is important to be consistent in how you write your rules. Personally I stick with the one-line per property approach;

.class-name {
	property: value;
	property: value;
	…
}

#id-name {
	property: value;
	property: value;
	…
}

I prefer this method as it keeps things nice and clear. I find it much easier to quickly locate specific properties if they are each on their own line. Others, however, may prefer to write all properties for a rule on the same line, which can trim bytes off the document file-size. Whichever method you use, make sure you use it consistently throughout your stylesheet.

Shorthand

Use CSS shorthand where possible to avoid clutter and to save time when writing CSS. Various CSS properties can be written in shorthand, the most common of which are margin, padding, font, border and list-style.

Compare the following rules and their shorthand counterparts;

p {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 20px;
}

/* and the same using shorthand */
p {
	margin: 10px 20px;
}

div {
	border-width: 1px;
	border-style: dotted;
	border-color: #000;
}

/* and the same using shorthand */
div {
	border: 1px dotted #000;
}

Certain hexadecimal colours can also be written in shorthand where the values pair up;

p {
	color: #FF0033;
}

/* and the same using shorthand */
p {
	color: #F03;
}

For more information on CSS shorthand, see the W3Schools CSS reference.

Relative Font Sizes

Use relative font sizes instead of fixed font sizes. Relative font size units are % (percent) and em. Fixed font size units are px (pixels) and pt (points).

/* relative font sizes */
p {
	font-size: 90%;
}
p {
	font-size: 0.9em;
}

/* fixed font sizes */
p {
	font-size: 10px;
}
p {
	font-size: 10pt;
}

The main reason for steering clear of fixed font sizes is that they can prevent users from viewing the text on your website at a larger size. Someone with poor eyesight, for example, may have their default browser text size set twice as large as normal. Fixing your text at 8px is not exactly the best way to endear yourself to them.

Given that you can set your text at the size you wish using relative font sizes, which will allow for text resizing, there's very little excuse for not being a good citizen.

Descriptive Comments

Use comments to describe what styles are doing, and why, in situations where it may not be immediately apparent;

#header {
	position: relative; /* allows us to position absolutely within this element using its co-ords */
	width: 800px;
	height: 94px;
	background: url(../images/header_bg.png) 0 0 no-repeat !important;
	background-image: url(../images/header_bg.gif); /* substitute background image for gif in IE6 */
	z-index: 10; /* set higher z-index to position above masthead */
}

This is an obvious, but oft forgotten tip, that can save many a headache down the road. I am guilty of slacking on this one from time to time, and can testify that the rule you just can't figure out when re-visiting a stylesheet is always the rule you didn't write a comment for.

Serving Different Values to Internet Explorer 6

Unfortunately Internet Explorer 6 (IE6) is replete with CSS rendering bugs. Invariably this means sooner or later you'll come across a property that requires one value for well behaved web browsers and another to drag IE6 into line.

In most circumstances this is best accmplished by first using the !important declaration to define properties for other web browsers, and then setting the property again for IE6;

p {
	margin-top: -20px !important; /* all browsers other than IE6 */
	margin-top: -15px; /* IE6 */
}

In this example, the !important declaration tells web browsers to use the first margin-top value over and above the subsequent margin-top value, which would otherwise be applied (CSS rules are read from top to bottom). IE6 does not understand the !important declaration and as such uses the value from the second margin-top property.

There are plenty of other hacks out there for hiding styles from IE6, but this method is particularly nice as it ensures your CSS remains valid.

And there we have it. Hope it was helpful.