Recently James and I went to Canvas Conf and listened to a number of great talks on web development. We particularly got a lot out of Harry Roberts’ (Senior UI Developer for BSkyB) talk 'Big CSS' which focussed on writing maintainable CSS for big projects. While we predominantly write CSS for relatively small projects we still came away with some very useful ideas and practices that will help us do what we do better.
With CSS we'd always tend to write a rough set of styles that broadly cover the whole project, setting up basic things like a reset, typography, header and footer etc. and then write the rest of the CSS as specific chunks of code that do one thing.
Instead of doing this however we’re realizing that we can break down a lot of that stuff so it's more re-usable, so more efficient. Take, for instance, a list of links that supplements an article; there are many abstractions to this one object that we can break out and re-use:
- A vertical list without bullets.
- It has links inside.
- It might have icons on the left of each link.
We can then apply some or all of those abstractions to another object, like a list of downloads, which would have all of the above plus an additional rule for the filesize meta-data that forms part of each link.
Another aspect we took away from Harry's talk was how important it is to structure your CSS sensibly. Firstly, we have to get out of the pattern of writing our CSS in the same order as the markup ... that just doesn’t make the best use of the cascade!
So instead I think we’ll be following something along the lines of this:
- Table of contents
- Reset
- Typography
- Structural framework
- Generic objects
- Specific components
- Style trumps
All the while we can be picking and choosing from our growing library of abstractions.
The final part of all this is comments. We came away determined to use more comments in our CSS; the uses comments can have are endless but for us I think the following practices will be fairly revolutionary:
- Linking markup to the CSS by adding in blocks of HTML as reference.
- Explaining weird bits of code or specific techniques used.
- Linking back to an abstraction when overriding something further down the cascade or in another file.
So over the next few months, we’ll be steadily building a little CSS framework that works for us, with lots of abstractions that we can re-use and a structure that makes sense.
