Beautiful Maintainable CSS

33,419 views

Published on

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

Published in: Technology, Education

Beautiful Maintainable CSS

  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

×