Best Bet CSS Practices

The tip about indenting your CSS based on the hierarchy of the DOM it styles is key. I've done this for a few years now and it makes coming back to a stylesheet to make some changes a lot easier.

Another tip I've found useful: sort your properties alphabetically within a selector.

Re: Best Bet CSS Practices

#7

Post by treyp » Mon, Feb 22, 2010, 8:58 AM UTC

uggedal wrote: post #6

The tip about indenting your CSS based on the hierarchy of the DOM it styles is key. I've done this for a few years now and it makes coming back to a stylesheet to make some changes a lot easier. Another tip I've found useful: sort your properties alphabetically within a selector.

hate to be a dissenter, but just want to put out another opinion. i work on stylesheets every day, and i've found neither one very helpful. i'd spend more time indenting and alphabetizing than working on styles. i don't know where indenting would be too useful since you'd still have to scan the entire document manually. ordering these in sections of the site in which they're used has been most helpful for me.

my tip: use a decent IDE, like Aptana. it'll outline the stylesheet and make definitions searchable and orderable. use whatever order you find most logical for definitions and properties.

the TOC and commenting is probably useful for other members on your team, though.

Re: Best Bet CSS Practices

#8

Post by uggedal » Mon, Feb 22, 2010, 10:20 AM UTC

treyp wrote: post #7

uggedal wrote: post #6

The tip about indenting your CSS based on the hierarchy of the DOM it styles is key. I've done this for a few years now and it makes coming back to a stylesheet to make some changes a lot easier. Another tip I've found useful: sort your properties alphabetically within a selector.

hate to be a dissenter, but just want to put out another opinion. i work on stylesheets every day, and i've found neither one very helpful. i'd spend more time indenting and alphabetizing than working on styles. i don't know where indenting would be too useful since you'd still have to scan the entire document manually. ordering these in sections of the site in which they're used has been most helpful for me. my tip:…

I'm sitting in our 10.000 lines (don't ask) stylesheet as we speak and the only thing keeping my sane is indenting and grouping (which the indenting gives your for free) of related styles.