beautiful maintainable css

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 doing@4.32amthat 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: lachlan@lachstock.com.auMSN: lachlan@lachstock.com.auAIM: lachlanhardy