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 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 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
AIM: lachlanhardy