[puppybeard]

Some nice ideas, but not many new ones. And the new ones don't always make sense:

"For each level of markup nesting, try and indent your CSS to match" <= that made my teeth itch. Mostly just down to personal taste, but I really find it quicker to read css if only the values are indented. It's easier to compare nested classes that way, as repeated values would occupy more similar space.

"Also write vendor prefixed CSS so that colons all line up" <= not all vendor css3 values have the same structure, so this can't be a standard (eg: gradients, mixed border-radius)

I suppose whether or not you add conditional support for IE is a matter of taste. I prefer to handle IE the boilerplate way, with conditionals determining what class the html element has, and including appropriate styles in the main css. Why sacrifice good, standards-compliant css for dirty IE?

[csswizardry]

> that made my teeth itch

Fair enough; any reason as to why?

> not all vendor css3 definitions have the same structure, so this can't be a standard

Well if it can’t be done then it can’t be done…

[puppybeard]

The "teeth itch" thing: It feels too much like over-ornamentation. It just wouldn't suit my style of work. I find it much faster to scan css when everything is vertically aligned. If I have to scan left and right as well as up and down, it takes me longer, and comparisons are slower.

[grannyg00se]

It could also lead to lazy naming. I'd prefer to see intelligent names used instead. If your css is tab-synched with your markup you might be tempted to lazily name your attributes assuming that people will figure out due to the tabbing. But your css should make some kind of sense independent of the markup.

Also, it confuses the functionality of the nesting (IMHO). When I look at

    .nav
        .nav li
            .nav li span

It looks like the indents imply some kind of syntactic meaning. Is it tabbed because tabs now mean something? In which case the second line might be equivalent to

  .nav.nav li         which it is not.

Usually an indent implies some kind of relation to the previous line. For example when you indent the body of a function it helps to indicate that the body is part of the function. There's a logical difference and most likely even a scope level difference. The indents that you are adding to CSS don't work that way because each new line starts its select with no concern for the line above.

Also, there may be some deeply nested markup that doesn't require css except for the first and last level of nesting. Are you supposed to then have a series of empty tab levels in your css file? And then if you remove some of those nests in the markup, you have to remove them in the css? Not nice. The coupling provides no advantage.