beautiful maintainable css
Post on 22-Oct-2014
19.618 views
DESCRIPTION
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 codeTRANSCRIPT
beautifulmaintainablecss.
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 structureor 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 getsa 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 ♥Ruby
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 codethey (and you) can work outwhat you thought you were [email protected] morning your client ‘needed’ the code live.
before breakfast.
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 indentingtodenotehierarchy
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 missany.
So now anybodycan 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 meansyou can use theproprietary Microsoft
...
CSS Expressions without invalidating your good code.
The Validatoris 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: [email protected]: [email protected]: lachlanhardy