I am working on several projects where I often have to make small changes. Now I know it is important to have a fast loading page, but as a developer it is also handy to keep organized by splitting files.

On most of the pages I have a huge CSS file. I have my reset in there, the framework, the actual styling, everything. I have combined the files. And this can also be taken a step further by minifying it. Same goes for the JS. One file, fast load time.

When I need to make changes after a few months, it's always a hassle to find out where the correct stuff is located in the huge file. It would be better if the files were split and imported.

Now my question is which one do you prefer, or is there a method to have both.

  • A little more about your particular development environment/process might help as far as getting specific suggestions. Or you can just take the shopping list I posted below and go from there.
    – Su'
    Aug 16, 2011 at 22:11
  • I have different development environment. I have sites running a cms like wordpress or joomla. And I have certain website that I build from scratch. Nice answer bellow. Aug 17, 2011 at 0:30

3 Answers 3


Are you using a CMS? Many of them have plugins that will let you reference multiple CSS/JS files in your template or theme setup, but then automatically combine and minify them for you on render(WordPress; I think Drupal does this in core now with an option). Sometimes the function is built into a more general caching plugin.

In Movable Type, I have CSS and JS resources stashed as several modules that are then included in an index template for output as a single static file.

CSS preprocessors like Sass can also usually do this for you, either by watching entire directories of source files, or with import functions.

Any development framework should have a mixin/module/whatevertheirtermis to do this, but there are also standalone implementations you can just bolt directly onto any site.

  • I was not aware of those kind of plugins, they sound great. I just started wordpress so the minify and caching plugin I will definitely check out. thanks. Aug 17, 2011 at 0:32

I always lean towards keeping multiple, organized files for CSS or Javascript, even though it may create more connection overhead through multiple HTTP requests.

I've come to this conclusion by weighing the different resources at stake; mainly, bandwidth vs. developer time.

I'm only one guy, and I have a lot on my plate. Keeping everything separate and organized means less time rooting through minimized blobs of CSS or JS, and more time improving the web sites I maintain.

Besides, things like HTTP compression make a much bigger impact, in my experience, than optimizing the last byte out of your code and preventing a request or two. Keep things lean where you can, but don't drive yourself nuts in the process!

  • This: "things like HTTP compression make a much bigger impact" has long since been specifically addressed and disproven. HTTP requests are expensive, even with browser caching(which is not a given). For low-traffic projects it won't matter, but with proper tools, maintaining the habit of combining files regardless is pretty much transparent.
    – Su'
    Aug 18, 2011 at 18:07
  • I have to agree with Jacob on the comment about keeping organized. I don't like to split trough all the minified files either. But Su' comment got me thinking. Conclusion is then to have a solid way to create these minified files for production and still keep your normal production environment. Aug 18, 2011 at 20:55

Just keep 2 versions of file

  • for developing
  • for production

and minify your developing version everytime you update something

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.