Splitting WordPress theme CSS into multiple files, good or bad?

1 Views

I’m developing a WordPress theme framework. I want organize CSS for each section into separate files for the following reasons.

  1. Developers can easily deregister styles by parent theme and load their own styles.
  2. Easy to maintain.
  3. I can load only the required styles based on the options selected by the user.

Disadvantages
Extra http requests => more load on the server.

Read More

This disadvantage can be taken care by combining all the CSS files before they are served to the user using plugins like wp-minify.

But, will this combining process out weigh the above advantages.

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. From 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.
    • 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

    (i dont know if it means .css and .js or only .js)

  2. Following @edelwater’s excellent answer, another side-effect of the ‘combine all’ mantra is the induction of unused selectors.

    Whilst perhaps unnoticeable on modern desktops, there’s still an extra hit on rendering time. For example, Chrome audit advises their removal as part of improving performance.

    Of course, loading every declaration on-demand is ridiculous (not to mention counter-intuitive). It’s down to common sense, plucking out considerable chunks that aren’t used for the majority of the site, and loading them in with wp_enqueue_style() when they’re needed.

    Update: Yes, of course there’ll be overhead if you’re combining your stylesheets on-demand (read: for every request). However, I believe plugins like WP Minify cache the output on first request, so there shouldn’t be a problem.