Group and conquer

One of the simplest things you can do order your css is group by type. Most sites can be divided into some basic type groups:

• Layout / Structure
• Typography
• Navigation
• Images
• Forms

To get this basic structure into your CSS when you first create your document it’s a good idea to put something like the following in CSS comments:

/*Layout*/

/*Typography*/

/*Navigation*/

/*Images*/

/*Forms*/

/*Miscellaneous*/

I use layout rather than structure but the naming doesn’t really matter this is the ‘bones’ of your site. I always add a miscellaneous as a sort of section overflow – this often becomes a dumping ground I sort into a section or create new one if it’s required. You can of course drill down even further and I’d always suggest if it’s a component that takes several styles you group that with a new comment. For instance, you may have a top navigation block that uses ul, li and some other link styling. I would in this case have the following:

/*navigation*/
/*top navigation*/
style elements go here

One visual thing you can do to split each section further is even after a section add:

/* end of typography */
or
/* ********************* */

Big things come first

In ordering my typographical elements with regards to headers I always make sure I list them in order so I end up with h1, h2, h3 and so on going down the typographical elements section. I find this makes it far easier to see at a glance particularly when I come back to a style sheet I’ve not been working on for a while. A great way to deal with the same types within these widget groups is to just like the similar elements use further grouping. For instance, all paragraph styles would be together.

What’s the point in being organised?

As I’ve said the main reason is readability, beyond that it means less time spent hunting for the CSS need in a haystack. The semantic naming of your code should extend to clean code that is well organised. Using simple methods like this you can easily spot and understand the CSS even if you are coming to it a long time after it was written. It’s also a great way to work if you are in groups and more than one person is editing the CSS. In the case of groups I like to have a ‘dump’ or scratch section where changes can be put – this works great if you are in control of the CSS but other developers may need to apply styles. I still would always recommend a single person has sole control over the CSS as that helps with consistency – that or have a very stringent organisation that all working on it understand and adhere to.

It may sound a bit like CSS by police, but there is nothing worse than a lines upon lines of chaos dumped CSS where there is no meaning and to find anything you’re trawling through lines of text. There are far more advanced methods of course of organising CSS, this is more the bare minimum you should do. When working in larger groups I think time stamping in comments and even commenting changes can be beneficial. It may on the surface seem a bit of a chore to do this but once you do it will quickly become part of your CSS writing routine and you’ll find it also helps you visualise the styles laying it out.

A small step for usability

Visited links is a small step but important one when making your site more user friendly. By having a visited link you are increasing the knowledge your site gives people as they use it. They will know where they have been and what links they haven’t visited. If you think about it, not having a visited link style is sort of shooting yourself in the foot when it’s so easy to apply one.

Colour me different

When you do have visited links I think it’s best to set the colour to something that stands out less than the rest of your site. Setting it to be a grey colour that is readable is also a good method. Often I opt for making it a colour that is down several shades of the link colour. In this way the unvisited links stand out but you still can maintain the readability of the links. The key with visited links is not that they vanish totally – it’s so at a glance users can see what they have seen or not.

CSS abc

You may think this is all basic and who wouldn’t use the visited links styling. The truth is it’s easy to over look and many sites do. With a little simple consideration though you can enhance the usability of your site. It’s as easy as a:visited.

#nav ul{ margin: 0px; }

Useful if you just don’t want to have space at the top of any list and you can easily adapt using just the ul{ } rather than the class named ul.

Looks like Santa has already brought all I wanted this year. It makes me happy to think now this company whose knowledge previously of web standards and application was somewhat lacking; now recognise (maybe through some of my bashing over head) that it is important and a need not a designer whim. Perhaps it is also a reminder that if you prove through actually doing the web standards and css sites, then you prove the point without having to bash your head too much. I may have become some gibbering web standards creature most of this year, but it seems it was all worth it.

Coupled with this comes the offical roll out of my CMS system which is now in a form that can be implemented in a day onto any site. So, with that in mind this is turning out to be a grand ole webmas.

The early confusion days of CSS appear to have long gone with it becoming now the accepted norm. Long ago in a land not too far away where tabless roamed free of tabular data; showcase sites showed no distinction. The CSS mixed with the tabular in uneasy harmony. Recently this isn’t the case and you would be hard to pushed to find good examples of web design that aren’t CSS. The death rattle appears to have sounded and with relief we have now all gotten our head around the difference between a class and an id.

If I had more time I would finally get the old table monsters I still know about and batter them into CSS submission. This at this current time is not a luxury that I have. I accept that and as long as I stick with my own personal CSS revolution then I can live with it. I find it second nature now and the possibilities of what else I can do open up regularly as I now turn to linking with xhtml and facing web standards head on.