Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Camilo Lucero
Camilo Lucero
27,692 Points
Posted by 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

Nick Ocampo
Nick Ocampo
15,661 Points

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.

Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

Yeah Nick said it better :)

Camilo Lucero
Camilo Lucero
27,692 Points
Camilo Lucero
Camilo Lucero
27,692 Points

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

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

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. :)