Style Sheet use and basic rules

[chuck1rar]

I have a designer that has created around 18 css files in one site and need to explain to him about what the proper way to design with style sheets.

But since we are a very small team/company I really dont know the hard facts myself so is there a site which gives the basic concepts or rules in how to use style sheets?

Obviously each of his existing style sheets have slight differences but surely there must be a better way to implement his design without the need of having so many style sheets...

Maybe a simple 10 rule list of how a good designer uses styel sheets would be perfect...

THanks

[paul_wilkins]

When it comes time for production, you can merge all of the stylesheets together based on what media they're designed for. So for example, if there are a couple of stylesheets designed for the print media, they should be kept separate (but still combined together) from the screen stylesheets.

That will help to reduce the number off http requests required to build the page.

[Dr John]

If he is creating an new css file just to ADD a couple more styles for a few special pages with all other styles the same, then really, the extra styles all belong in the original. So he's doing it wrong. If he is changing existing classes eg making classX wider for some pages than others, then it might be better to invent a new class, and put it in the original file. So that's basically wrong as well.

It's acceptable to keep the nav styles in one file and the framework/layout/text styles in another just for convenience. Mainly to stop accidentally editing part of one when it was the other you were after. I'm not keen on having lots of css files for a site, but occasionally have needed a "special" when some part needs to be altered for a couple of pages, especially when lots of other parts are referenced relative to it. ( eg #content p. #content li, etc)

[C. Ankerstjerne]

One reason for him creating multiple files could be that he wish to only includes classes relevant to the current page, to avoid forcing the user to download a very large file. Unfortunately, this probably won't work, because each file's overhead will most likely exceed the size of the omitted code.

[ianpurton]

It smells bad to me. You'd be surprised how much styling you can do with just small amounts of CSS.

But, to be fair it takes time to learn CSS and how to apply it properly.

[C. Ankerstjerne]

I couldn't agree more. Looking back at some of my early style sheets, they're extremely bloated.

[jeffvdovjak]

It might be worth investing in a book for him to read.
Build Your Own Web Site The Right Way Using HTML & CSS could be helpful (Sitepoint). Chapter 3 would be especially helpful and is available in the pdf preview of the book (in the Books section).


The first chapter of Web Standards Creativity - Innovations in Web Design with XHTML, CSS, and DOM Scripting would be helpful specifically to the problem you're having now, but the rest of the book itself would probably be handy as well (since it sounds like he's just learning CSS).

[paul_wilkins]

The following recent article may be of use too.
Are You Making These 10 CSS Mistakes?