To separate, or not to separate

Simple question. Do you put all of your selectors/rules in one .css, or separate them into sections (forms,typography,layout, .ect)? I decided to go with the multiple .css files, instead of one gigantic one. Just curious what others do.

If you have completely different sections that need different css then its worth separating the CSS files for each section so that users don’t have to load them all for a large site.

For small sites it would be better to keep to one css file as it is easier to manage as you don’t have to remember which pages need which files.

I organise the styles to follow the markup so would start with a small general reset and a few defaults and then would work from the top down starting with the body rules first and then , page wrapper, header , main, columns, and footer. In different pages need additional css then I will list them separately at the bottom of the stylesheet along with a suitable comment name so that I can just find them with a search if needed.

I’ve never seen the need to group forms or typography unless you are doing a styleswitcher type of thing because my pet hate is looking in more than one place for code that applies to a section. I want to go to that section and see all the code that applies.

However, with best intentions and a 1000 client changes things always start to get messy when rules are removed or become obsolete.:slight_smile:

I think the best thing is that whatever you do you do it logically and rigidly stick to that format.

Separate and combine when you deploy to production.

Really? Wouldn’t you have selector conflicts? I guess it comes down to skill level, but even for an intermediate developer you have a good chance of something breaking.

I consider such breaking up of the CSS to be LESS useful as you’re hunting all over the place for properties of single items / item types… you took the color and you threw it over there, and you took the size and you threw it over there and you took the typeography and you threw it over there… as if that’s magically somehow easier to maintain?

Tin man: Oh, that’s you all over

(No wonder some people rely on firebug for their own code).

Multiple files just makes it worse for one simple reason – HANDSHAKING. the more files you have to request to build a page, the longer it’s going to take to load REGARDLESS of the size of those files or the bandwidth of the connections at either end! EVERY time you request a separate file the browser has to request the file, ack the request and say send it, then start receiving the data – each of those can take basically the ‘ping time’ to the server so you’re talking anywhere from 200ms to 3 seconds ‘overhead’ per separate file. While browsers can request multiple files at once (typically 4 to 8), you get on a work or public connection where it’s already bumping up against the connection limit (or if you’re just running a torrent client in the background) that ability to do multiple requests at once gets GREATLY reduced.

Think of it like with FTP, which typically has much MUCH more overhead than HTTP (though it can be less if you use LOTS of cookies) but works much the same – ever notice it takes longer to upload thirty 1k files than it does one 30k file?

As a rule of thumb I consider it bad practice to have more than TWO stylesheets per MEDIA target. You are coding for MEDIA targets, right?

Really? Wouldn’t you have selector conflicts? I guess it comes down to skill level, but even for an intermediate developer you have a good chance of something breaking.

the more files you have to request to build a page, the longer it’s going to take to load REGARDLESS of the size of those files or the bandwidth of the connections at either end!

You both misunderstood me, sorry I thought this was common knowledge.
During development you link to all the stylesheets in the right order to prevent conflicts.


<link href="css/reset.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

Before you deploy you combine & compress everything into one file.


<link href="css/application-k12n3890fnafn129012rhjlfdsnfasfai383.css" rel="stylesheet">

Sprockets and Compass are examples that will do the heavy lifting for you.

I actually have a heap of CSS files and Javascript files now that these tools are so easy to use.

  • reset.css
  • fonts.css
  • forms.css
  • layout.css
  • controls.css
  • styles.css

And then I also do what paul was suggesting and have page specific stylesheets when it’s really custom.
pages/home.css

ds, I do find this much easier to manage and work with.

Gotcha. I’ve heard of compressing and eliminating white space, just never knew it would avoid conflicts, along with ordering. Good to know, I will use the given approach.

I find it the exact opposite – as it is I’ve got two or three editor windows open side-by-side (markup, cms and style) last thing I need is twenty at once… and I can NEVER find anything in that sort of arrangement without resorting to firebug or similar… which if you have to use firebug on your own code, IMHO there’s something horrifically wrong with said code. It’s all spread out over different files so you can’t even just open up the file and hit CTRL-F.

Though also, if you break 32k of CSS there’s probably something wrong too… and just part of why I consider white-space compression a royal pain in the ass that is more about hiding bad code than fixing bad code.