Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How far should you break up stylesheets?

Tags:

css

I'm building a new site for my company, and I'm at the stage where I've created the html mockup of the first page. I'm going to use this as a basis for the rest of the site. I'm thinking of organising my stylesheet better now I've got the design looking consistent cross-browser, but I'm wondering how far to go when I'm breaking it up.

One idea is to have the following:

  • reset.css
  • typography.css
  • layout.css
  • colors.css

but where do I draw the line? theoretically I could go on and break them down into classes, ids etc, but I think thats going overboard.

Does this seem a reasonable method?

like image 230
Chris J Allen Avatar asked Oct 21 '08 14:10

Chris J Allen


People also ask

Should you have multiple stylesheets?

A web app with different rather “siloed” sections probably need two CSS files. One global with the most common design patterns and then a section-specific CSS file with the less common design patterns that section needs. Sites with many vastly different styles of pages likely need two stylesheets.

How many stylesheets should I have?

you should keep only one css file.

Should I split CSS files?

Summary: You shouldn't organise CSS by splitting it into separate files any more than you should organise a pane of glass by dropping it on a concrete floor.

How many CSS lines are too much?

It depends on what is your website supposed to do. If it is a small blog and you need, say, 3000 lines of CSS, that is probably too much. If it is an online store with multiple sections and a complicated layout, it might not be enough.


1 Answers

Coincidentally, A List Apart had an article covering this today. They recommend separating out into a few main categories, including some you listed (type, layout, color), but going further to include various tricks to keep older browsers happy.

On the other hand, keeping everything in one css file keeps the requests between browser & server down. A compromise might be to keep things separate for development, and merging for production (as a part of your build process, naturally :p).

like image 198
swilliams Avatar answered Oct 24 '22 13:10

swilliams