Successfully reported this slideshow.
beautiful
maintainable
css.
the premise


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


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


Your HTML needs to be
clean, elegant and
semantic
old skool



Anybody still using
TABLEs for layout?
old skool


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


And you have a

deadline?
You’re going to



hell!
old skool



The hell of applying CSS
to poor HTML
clean and shiny



Your HTML should be like
your Ruby code
clean and shiny


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




It’s semantically rich
clean and shiny




It’s human readable
clean and shiny


It’s

beautiful!
clean and shiny


Your CSS needs
to match up,
right?
some basics




Readability = maintainability
If people can read your code
they (and you) can work out
what you thought you were doing
 4.32am
@
that morning your clien...
readability



Order your rules according
to a defined system
readability




And stick to it!
readability



Detail that system at the
top of the file
readability




Provide a table of contents
readability

Use indenting
 to
  denote
    hierarchy
inside your rules



Alphabetise your
property-value pairs
inside your rules



It’s a system everybody
can recognise
inside your rules




Maximise use of shorthand
shorthand


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


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



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



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


Plus, defining all properties
makes sure you don't miss
any.
So now anybody
can read your code...
Let’s make it beautiful
Isolate your hacks



We all know you’ll need
them
Isolate your hacks




Don’t sully the good code
Isolate your hacks




Put hacks in separate files
Some people will tell you
that Microsoft's proprietary
Conditional Comments are
evil and wrong.
... that makes them perfectly
    suited to dealing with the
  evil wrongness
  that is IE’s CSS support.
... and that means
    you can use the
  proprietary Microsoft
  CSS Expressions without
  invalidating your good code.
The Validator
is your friend.
use the validator



when you finish significant
CSS coding
use the validator



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



before you migrate code
to production
To summarise...
semantic
readable
hierarchical
alphabetised
shorthand-ed?
valid
maintainable
beautiful
If you get stuck, let me know.
I’m always happy to help.
Email:
 lachlan@lachstock.com.au
MSN:
 lachlan@lachstock.com.au
A...
Upcoming SlideShare
Loading in …5
×

Beautiful Maintainable CSS

34,658 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

×