Making CSS layouts with fewer selectors?

Question

What are the best practices for making CSS layouts with fewer selectors and fewer DIVs?

Fewer selectors means less HTML and CSS, which is easier to manage.

How can we avoid using too many class/other selectors?

Answer 1

See How to Develop with CSS:

Among other topics there is how to:

• Minimize HTML Markup
• Minimize HTML—Contextual Selectors
• Let the structure of the document work for you.
• Minimize CSS
• Group Logically Related Styles
• Tables are for Tabular Data. Period.

Great resource and a must read for any developer as well as designer.

Answer 2

You can try LESS. It does in a way help you to minimize the amount of repetetive coding.

Answer 3

What are the best practices for making CSS layouts with fewer selectors and fewer DIVs?

There are three of these:

1. Don't add selectors until you need them.
2. Don't add divs unless you need them.
3. If you're not sure whether or not you need something, you don't need it.

Fewer selectors means less HTML and CSS, which is easier to manage.

I know, right? The easiest page I ever managed had no selectors and no tags at all, and was in fact a text file!

How can we avoid using too many class/other selectors?

Use tag selectors.

I know, I know... Some folks like to give everything classes, thinking to themselves, "I might some day want to make odd-numbered paragraphs bright red with a royal blue background, and it'd be a real shame if I had to go back and modify the markup first." But that's just silly - red on blue is horrible. Avoid adding classes until you need to; that is, avoid adding classes until you've used up all of the tags. HTML has lots of tags, so use 'em.

Answer 4

Check out Sass (Syntactically Awesome Stylesheets). It helps you write CSS that's leaner and more maintainable.

Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.