Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Camilo Lucero
Camilo Lucero
27,692 Points

Grouping all CSS/JS files into one file. Good/bad practice?

If I have more than one CSS or javascript files in my project, is it a good practice to join all the .css files together in one single file and all the .js files in one another?

I am thinking this would reduce server requests, therefore slightly optimizing page load speed.

For example, if I use normalize.css and a file with my styles "style.css", would it be good to paste all the normalize code into my style.css file, thus ending up with just one .css?

Thank you.

2 Answers

A little more detail on that. As a developer I usually take this approach:

When I'm developing, I try to keep my files as modular as possible. That is, I try to separate my code into many concise and separate files. This makes it easier to stay organized and will make a project much more manageable as it grows. So instead of having one giant main.js file that contains thousands of lines of code, I much rather have several separate files, all appropriately named and neatly arranged into subfolders as needed.

There's an obvious downside to this which you mentioned though. This creates additional requests to the server, and we could user a more optimal method in a production environment. So usually, I will create a separate "production-ready" version of my project that has all my code combined into one file. It's really easy to automate this with a task runner like GruntJS or GulpJS (you can also use task runners for many other great things that will optimize performance).

So in short, I'll develop in lots of separate files and concatenate all my files into one big one in the end product that goes on a server.

Yeah Nick said it better :)

Camilo Lucero
Camilo Lucero
27,692 Points

Got it. Thanks a lot to you both! :)

Yes and no, but the short answer is yes.

You can use optimizers that take all the .css files you are working on and all the .js files you are working on and cram them into 1 css file and 1 js and also removes all the white space which, as you stated above, reduces the number of requests and the size of the files. :)