Best Practice CSS

The below is a guide that I follow and I believe it’s great for maintaining best practice CSS. I’d be interested to hear of your best practices as I’m certainly not claiming to know the one and only way!

CSS Stylesheet Layout

Keeping classes and id’s in a particular order will quicken development between multiple developers and avoid unnecessary confusion.

Order your tags by authority

Place the predefined tags such as ‘BODY’ and ‘A’ at the top
Next have your main framework tags, followed by main classes, and then lastly a general section.

This way you will be able to quickly scroll to the general area you want to add/modify.

An example is as below:
/** Standard tags **/

BODY {}
TD {}
A {}
H1 {}

/** Framework tags **/

#full_page {}
#main_content {}
#footer {}

/** Main classes **/

To contain all general classes, with sections for each different area. This may have a sub-section grouped with ‘News classes’, ‘Resource Classes’ … etc.

Note that the predefined tags (BODY, A, H1…) are all in UPPERCASE. Another quick and easy way to identify and organise your code.

Style Arrangement

Keep styles formatted with properties listed alphabetically and in a vertically listed format.
(Ok it MAY be a little OTT for some of you less organisation-enthusiasts, but every little bit helps)

Example:

.info_box {
border:1px solid #fff8f3;
color:#067;
margin-bottom: 10px;
}


General Rules

Accessibility
It is important to have a style sheet for accessibility. This style sheet will replace certain objects for non-graphical / resize-able objects depending on the situation/media used. It is also best practice to create a style sheet to adapt your website specifically for printing. Don’t waste all your visitor’s ink on pointless menus they can not use!

Re-using Code
Re-usable code is best. If there is a consistently repetitive attribute within your style sheet, consider creating a class specifically for the repetitive code and calling in two classes within your pages.

Example #1

Incorrect:
.class1 { border:1px solid #000; color:#F00; }
.class2 { border:1px solid #000; color:#F09; }
.class3 { border:1px solid #000; color:#233; }

[div class=”class1”]This text[/div]
[div class=”class2”]This text[/div]
[div class=”class3”]This text[/div]

Example #2

Correct:
.border { border:1px solid #000; }
.class1 { color:#F00; }
.class2 { color:#F09; }
.class3 { color:#233; }

[div class=”border class1”]This text[/div]
[div class=” border class2”]This text[/div]
[div class=” border class3”]This text[/div]

The second example is better because by combining the repetitive code it will prove to be more flexible, if for example, you decided to change the border to 2px and blue.

Naming Conventions

Especially if multiple developers will be working on a project, a naming convention should be decided upon and kept consistent throughout the project. There are two main adopted methods of naming your classes: camelCase and underscore_separated.

For this guide I make use of the ‘underscore_separated’ method.

Use a generic name for your styles

Use something that describes what it is the class/id will do, NOT how it does it. For example do not say .yellow_text but rather .highlight_text. This way if you were to change the colour to green it would still be relevant without having to change the class/id name throughout your project.

Tidbits of Knowledge

These are little bits that I have found to be saviours of otherwise frustrating situations. Have a go and see if they work for you as well. I’d be interested in hearing little things you do as a developer that makes things more fluid.

Use margins instead of padding wherever reasonably possible. Different browsers still read padding values differently, resulting in different spacing.

Develop using Firefox and then fix bugs in IE. From my experience, and that of other developers I’ve spoken to, it has proved to be far easier to get your desired results matching throughout different browsers if you use Firefox while developing and then flip over to IE to fix any inconsistencies.

Make use of predefined tags by applying classes/id’s to tags already in use throughout your code without loading it down with div’s and span’s. (Example below)

Incorrect:
[div class=”highlight”][a href=”mylink.asp”]My site[/a][/div]

Correct:
[a href=”mylink.asp” class=”highlight”]My site[/a]

See how the class is applied directly to the ‘A’ tag. Reducing of code where reasonable should be one of your targets. In case you are wondering what the stylesheet would look like, here are the two styles that would have been used in the above examples:

Incorrect
.highlight A {
color: #067;
}

Correct
A.highlight {
color: #067;
}

or even

.highlight {
color: #067;
}

Use EM in font size and not pixels or other. EM is recommended because of it’s ability to easily scale when required for accessibility. It also makes it very easy to scale your text throughout the project.

And that’s my CSS bible!

Hopefully it will help you sort out what might currently be a disaster of a stylesheet.