When you first start writing css there is a temptation as you write it to just add more and more without creating any order to your file. Pretty quickly this becomes a shooting yourself in the foot technique whilst you search through numerous lines to find just one style. There are various for and against arguments to using multiple style sheets but lets look at how you can for now in one file get some basic order and structure.
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.
Justin Lilly
Hey, I was curious if you might be willing to do something similar to this for folder structure. Specifically folder structure when designing. I currently have something akin to:
Code/
-Documents/
– holds contracts, briefs, etc
-Dev/
– hold source images and such
-Http/
– holds current working copy
-Live/
– holds code approved for production
Do you have any thoughts on this matter? Do you have a better suggestion? Do your readers?