Why have all CSS files in one folder?

Question

I've been adhering to the practice of having all CSS files in one folder. Is it just for the sake of keeping things organized or does it have any other benefit besides that.

This questions isn't just for clarification purposes, I have a whole lot of Websites that I'm trying to decrease their load time and I was wondering if this method will help.

Answer 1

two reasons come in mind right now (to do with keeping both html, js and css seperate):

• both css and js can be reused in multiple html files if are in external file but you need to copy same code in each page if is a single html+css+js page.
• If you want you can develop a new version of the code, css or js, for a online page and when you finish the only thing you need to do is to change the filename in the link or script element in html. This means you're not being repetitive

Placing them into a single css also means that it's easier to find the styling and bulk edit a lot of the html styling in a single place.

I also found:

• Easier editing: Suppose you find that distances are calculated wrong (or whatever you are currently working on), then it's definitely easier to just open the file that contains the object responsible for distance calculation than scrolling through your huge HTML file looking for the culprit.

• Syntax highlighting / Code completion / other features of you IDE (like refactoring): This might work partially with code inside of HTML files, but not all that well. So, you could work faster and actually see errors before they become bugs.

• Cachability: While your HTML code will be different for all the pages of your site, your CSS and JS won't, and it would be silly to reload them for every page (which happens when they are put directly into the HTML).

• Page load time: With CSS and JS in the HTML file, they have to be loaded before the browser will see any actual HTML, so the page will show slower. Also, search engines that don't really care about your scripts will have to load them, and there are penalties based on page load time.

• Minification: In production, you use a minified (and concatenated) version of your CSS and JS, and of course you don't want to manually create that every time you make a change, so you do it programatically. Trying to do that without separate files would become very ugly, and you wouldn't be able to cache that minified version, which would be quite the performance hit.

• CSS generators: When you start to care about keeping code duplication to a minimum, you will quickly tire of writing CSS, which is full of duplications, and switch, for example, to SASS (like I did quite some time ago). You will definitely need separate files to make that work.

---

So, in answer to your question,

Yes, for the majority of websites, separating them (like mvc does by default) will likely quicken your load time. (very few exceptions appear in this rule, however a site with 1 or 2 style declarations may be slightly faster when placed within the html, but if you ever use MVC you won't look back at not separating them!)

Answer 2

The organisation it's very important for a projet, you don't put apple into a pear bag it's a reflex, but, in fact you can do it ...

For the code it's the same, you put CSS files into CSS folder, but you can don't do it.

Imagine than you have 30 CSS files, 40 PHP files, 50 pictures et 10 js files ... You need to organised this !

Answer 3

Why have all CSS files in one folder?

Why have many CSS files to begin with? If you interested in "decreasing the load time" then you should consider having only one CSS file.

Long story short, you can organize your CSS and JavaScript files any way you want. However, when serving the files you must combine and minify all CSS files into one (likewise for JavaScript).

---

I personally keep related CSS, images and JavaScript together. I find it much easier to work with files that way. An example would be:

- resources
  - plugin1
    - plugin1.js
    - plugin1.css
    - images
  - plugin2
    - plugin2.js
    - plugin2.css
    - images

I have written a script that combines CSS files from all folders into one file, minifies them and copy the result to a directory below the wwwroot.

Answer 4

Storing all the css files into one folder will not decrease load time. Best way to decrease the load time is to combine all CSS files together and to minify it. Bad thing here is when time comes to change your styles. You would have to keep original files, or to decompress/pretty print it, than change, than minify again. Some CMS have an option to minify and cache all of your styles (and javascript files), which is much better. On the other, your server side, make sure all of your styles are gzipped before they are delivered to client browser. More about how to enable compression on Apache