Writing CSS

Cascading StyleSheets (CSS) are a powerful tool for designing websites, but everyone has different authoring styles and writes CSS differently. In this week’s tip, I will show you how I tend to write my own CSS, in a way that keeps it tidy and easy for others to reference. This article assumes you already have a basic knowledge of how CSS works.

Using IDs and Class names
When creating CSS styles, we can refer to an element through both it’s ID and class name. For your HTML to be valid, IDs must be unique to a single element, while class names can be used multiple times.

IDs are referenced in CSS using a #, while class names are referenced with a . For example:

#header { background-color:blue }

.menuitem { background-color:red }

I tend to use ID’s sparingly in my HTML, using them only for major ’sections’ of a page, such as container, header, footer, sidebar and page.

Class names can be used multiple times, but that doesn’t mean using them multiple times is always correct. If you are styling two completely different sections of the page, it is best practice to use two different class names in case one changes at a later date. If the elements are in a similar section, using the same class name will cut down on your code significantly. Don’t forget you can stack classnames to use the same style using a comma seperated list. For example:

.pagebody, .sidebody { padding:0 6px }

This way, should either class change at a later date you can simply move it out of this list and create it’s own style.

When giving elements class names it is a good idea to ensure they have a name which clearly defines their function so at a later date your CSS makes sense, but make sure the class name defines their function rather than the actual style, eg: login-box rather than green-box.

Inheriting class names

Avoid using too many class names on inner elements, putting them on the parents wherever possible. For example:

<h3 class="pagetitle">Page Title</h3>
<div class="pagedate">1st February 2008</div>
<div class="pagebody">This is the body text</div>
<div class="pageinfo">Posted by Andi Smith</div>

Could instead be written as:

<div class="page">
<h3>Page Title</h3>
<div class="date">1st February 2008</div>
<div>This is the body text</div>
<div class="info">Posted by Andi Smith</div>
</div>

Using the shorthand properties of CSS

If you are defining a lot of properties for one element, consider using shorthand properties. For example, if we had a background formatted as below:

#header {
background-color:#fcfcfc;
background-image:url("/images/thisone.jpg");
background-repeat:none
}

It could be re-written as:

#header {
background:#fcfcfc url("/images/thisone.jpg") none;
}

Color shorthands

If you are using colours where hexadecminal six digit colour value repeats, you can use a three digit shorthand. For example, #ffffff can be reduced to #fff, and #0000ff could be reduced to #00f.

CSS Layout

When I layout my CSS, if I have a lot of styles to apply to an element I tend to spread my CSS over three lines where items are categorised so I find it easier to find them at a later date. I tend to use the pattern:

.element {
[measurements and positioning]
[text formatting]
[borders and backgrounds]
}

So, for example, a header element may look like:

#header {
position:relative;float:left;margin:0 auto;width:500px;
font-family:verdana,arial,sans-serif;text-decoration:underline;color:#000;
border:solid 1px #000
}

Tags: best practices, CSS