Big development teams can't handle a single CSS style sheet?

Question

I am currently in a 5-7 large development team creating a really large website with lots of pages and features.

I feel like we are in such a situation where a developer can change the style sheet to suit his own needs, but is unaware of the 1000 places where it probably change it for something else. I cannot blame him either, since I know it's hard to check everything.

It's a total mess.

I know that using one single style sheet file saves bandwidth and prevents duplicated code and maintenance, but I cant help wondering - is using style sheets a good idea for big sites, or should it be more object/element oriented.

Let's say you forget about the crazy large CSS and you define the CSS on each element instead. So each time you render a GreenBuyButton, it has the "style='bla bla bla'" on it. And this is pretty much done for all elements.

This will increase the bandwidth, but it will not create duplicated code.

Could this be a good idea or how does really large teams work on a single website do with CSS to avoid it being a mess?

Answer 1

Why don't you create multiple CSS sheets depending on the area of the site?

• blog.css
• accounts.css
• shopping.css

Then you could have a serverside script (say PHP) combine all CSS into 1 sheet which will get you the same result of 1 small file (could use a minimizer as well).

Check your overall site with a CSS checker to find duplicates (css defined) and manage it that way.

Otherwise communication is key between your team, who develops what, and so people don't duplicate CSS definitions. A master CSS keeper would be best suited to manage the CSS styles, besides your team should have an agreed upon style and not go rouge creating their own unique styles.

Answer 2

My recommendation would be to use the CSS rules on specifity to help you. For each CSS that is not global, put an activate selector on, for example

.user-list .p {
    font-size: 11pt
}

.login-screen .p {
   font-size: 12pt
}

This will make it easy to identify what rules are for which pages, and which rules are global. That way developers can stick to their own set of styles, and no mess up anyone else's.