CODEWITHSUNDEEP
css
Tom Tucker
Tom Tucker

Reputation: 11896

Modularizing CSS files

Many people say to keep the number of external CSS and JavaScript files to minimum to reduce round trip time. For example, Google recommends maximum two CSS and JavaScript files per web site, respectively.

The problem is, I've broken up CSS code into several files depending on its nature as part of "modularization". For example, I've put CSS code that is only used in a certain part of the application in a separate file. As a result, some files have less than a hundred lines of code.

I'm a Java develper, and this is actually a recommended practice in Java, but CSS is a totally different creature and I don't know much about CSS. Here are my questions.

Upvotes: 2

Views: 1848

Answers (5)

Daveo
Daveo

Reputation: 19872

I agree with what other have said here, yes when you develop you have muliple CSS files, but for production you should merge an minify them.

However I do not agree you should merge them all into 1 single file. As the will mean people who just want to visit your home page must wait for CSS on pages x,y,z also to download.

What I usually do is have 2 or 3 CSS files.

  • 1 small CSS file just for the home page only so it load super quick so casual visitors do not have to wait to see what my site is about
  • Another CSS file for every other page availble to guest users
  • Another CSS file for a members only sectons of the website that require a login.

You can also use scripts like HEAD.JS which will manage your CSS and javascript asynchronously

From there site http://headjs.com/

There is a common misbelief that a single combined script performs best. Wrong:

  • latest browsers and Head JS can load scripts in parallel. loading 3 parts in parallel instead of as a single chunk is usually faster.
  • if an individual file is changed the whole combination changes and you loose the benefits of caching. it's better to combine only the stable files that doesn't change often.
  • many popular libraries are hosted on CDN. you should take the advantage of it instead of hosting yourself
  • iPhone 3.x cannot cache files larger than 15kb and in iPhone 4 the limit is 25kb. And this is the size before gzipping. if you care about iPhones you should respect these limits.

Upvotes: 2

BJ Safdie
BJ Safdie

Reputation: 3419

You might benefit from a solution like Bundler, or Chirpy

http://www.codethinked.com/bundler-now-supports-css-and-less

http://chirpy.codeplex.com/

We use chirpy because we found a bug in Bundler that can inject query string params into you css files.

As a bonus to file consolidation, you also get .less syntax handling.

Upvotes: 3

kojiro
kojiro

Reputation: 77079

Combining resources can be beneficial in that it can reduce the number of HTTP requests; Reducing the number of HTTP requests certainly lowers overhead and can improve performance. It can also have benefits for caching, in that there can be fewer objects in the cache.

That said, this kind of optimization is only useful with metrics. There are profilers out there (Firebug has one) that can show you how many requests you're making and how long they take. You may (or may not) find there are more time-effective ways to increase performance and reduce load on your server.

Upvotes: 1

Kristian J.
Kristian J.

Reputation: 10422

As you point out, having multiple CSS files often leads to better maintainability and modularity.

The number of CSS files needed depends on the size of your project and the level of modularity in the project.

Serving up on CSS file instead of many often makes a noticeable difference in the page loading time, so the ideal solution is to have some kind of tool that combines, and maybe even compresses, the CSS files. This can easily be done in runtime by a tool such as Minify.

Upvotes: 1

SLaks
SLaks

Reputation: 887305

The best solution is to write a script that combines (and minifies) multiple CSS or JS files.

Upvotes: 3

Related Questions