6

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.

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.

Improve this question
2
  • You could still do something like using different files for development and production: .dev.css and (compressed, combined) .css file extensions.
    – kaiser
    Jun 18, 2011 at 16:14
  • Ease of maintenance is not the only reason i want to have separate files. My framework by default allows users to choose between 9 layouts and 3 navigation styles. All these achieved through CSS keeping HTML constant. Earlier I used to generate a secondary stylsheet including the required files and store it in ulploads directory, but that has some security issues. getting around this security risk is possible, but its complicated and not user friendly. I'm hoping combining the individual files wont tax the server.
    – Satish Gandham
    Jun 18, 2011 at 16:29

3 Answers 3

Reset to default
2

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)

Improve this answer
1
  • Google page speed tool recommends to combine multiple js and CSS files? Loading on the user side isnt the problem. Multiple connections from the client will put load on the server (correct me if I'm wrong), most of the users of the theme will be on shared hosting with limited resources. Lets say, I already made the decision to combine the files. Does combining the files before serving the page have any downsides??
    – Satish Gandham
    Jun 18, 2011 at 17:23
0

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.

Improve this answer
4
  • Im not talking about page specific styles. For example Once the user picks the layout and navigation styles, CSS specific to the layout and navigation selected has to be loaded.
    – Satish Gandham
    Jun 18, 2011 at 17:29
  • Im not talking about page specific styles. For example Once the user picks the layout and navigation styles, CSS specific to the layout and navigation selected has to be loaded. Question is should i combine them and store it in uploads directory, or load those two file seperately and combine them while serving the page to the visitor. Defnitely the first method is better, but this implementation has problems. We either have to give the webuser write permissions to those files, which is a security risk.
    – Satish Gandham
    Jun 18, 2011 at 17:36
  • We can do it using the method wordpress follows to update plugins and themes, but for that we need ftp login on some installation, and most users are scared hearing ftp. Also, using ajax on options page might not be possible with this method.
    – Satish Gandham
    Jun 18, 2011 at 17:37
  • I understand your point, but felt it was worth mentioning given the title of your post. However, see my updated answer.
    – TheDeadMedic
    Jun 18, 2011 at 17:55
0

Thank you edelwater and TheDeadMedic for you answers.

I think I will use the WordPress file system to save the files to uploads directory.

http://ottopress.com/2011/tutorial-using-the-wp_filesystem/

I have to ask for ftp login on some wordpress installs, I think I can handle that without loosing the AJAX options page using page overlay like wordpress uploader.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.