Folks at the Sydney Rails Group asked me how to clean up their CSS and make it easily maintainable. I delivered that message in a way that way that would appeal to them philosophically rather than just show code

1. beautiful
maintainable
css.

2. the premise
Separation of the
various layers that
make up a webpage
is a ‘good thing’™

3. the premise
Presentation should not be
mussed in with structure
or behaviour

4. the premise
Your HTML needs to be
clean, elegant and
semantic

5. old skool
Anybody still using
TABLEs for layout?

6. old skool
What about when
everything gets
a little bit too hard?

7. old skool
And you have a
deadline?

8. You’re going to
hell!

9. old skool
The hell of applying CSS
to poor HTML

10. clean and shiny
Your HTML should be like
your Ruby code

11. clean and shiny
Let’s assume your app has
the most glorious HTML
ever known to geeks

12. clean and shiny
It’s semantically rich

13. clean and shiny
It’s human readable

14. clean and shiny
It’s
beautiful!

15. clean and shiny
Your CSS needs
to match up,
right?

16. some basics
Readability = maintainability

17. If people can read your code
they (and you) can work out
what you thought you were doing
4.32am
@
that morning your client ‘needed’
the code live.
before breakfast.

18. readability
Order your rules according
to a defined system

19. readability
And stick to it!

20. readability
Detail that system at the
top of the file

21. readability
Provide a table of contents

22. readability
Use indenting
to
denote
hierarchy

23. inside your rules
Alphabetise your
property-value pairs

24. inside your rules
It’s a system everybody
can recognise

25. inside your rules
Maximise use of shorthand

26. shorthand
margin-bottom: 0.3em;
margin-left: 3em;
margin-top: 2em;

27. shorthand
margin-bottom: 0.3em;
margin-left: 3em;
margin-top: 2em;
is ugly

28. shorthand
margin: 2em 0 0.3em 3em;
a

29. shorthand
margin: 2em 0 0.3em 3em;
is elegant

30. shorthand
Plus, defining all properties
makes sure you don't miss
any.

31. So now anybody
can read your code...
Let’s make it beautiful

32. Isolate your hacks
We all know you’ll need
them

33. Isolate your hacks
Don’t sully the good code

34. Isolate your hacks
Put hacks in separate files

35. Some people will tell you
that Microsoft's proprietary
Conditional Comments are
evil and wrong.

36. ... that makes them perfectly
suited to dealing with the
evil wrongness
that is IE’s CSS support.

37. ... and that means
you can use the
proprietary Microsoft
CSS Expressions without
invalidating your good code.

38. The Validator
is your friend.

39. use the validator
when you finish significant
CSS coding

40. use the validator
when you’ve got bugs that
don’t make sense

41. use the validator
before you migrate code
to production

42. To summarise...

43. semantic

44. readable

45. hierarchical

46. alphabetised

47. shorthand-ed?

48. valid

49. maintainable

50. beautiful

51. If you get stuck, let me know.
I’m always happy to help.
Email:
lachlan@lachstock.com.au
MSN:
lachlan@lachstock.com.au
AIM: lachlanhardy