CSS in style.css or plugin section - what's best?

(Rob) #1

When placing CSS code there is the general style.css file where much of the CSS goes and then many plugin include a section to place CSS code. A plugin from the admin page will for example have tab or other section to place CSS.

My question is this. If you place the CSS that corresponds to a plugin inside the style.css file it has to be read by the browser when opening every page, right?

Well if I place it in the section where the plugin provides a space does that mean the plugin will only pull out that CSS code on the pages where it’s active. Thus reducing time it takes to load it because it’s limited to those pages it’s active vs. every page.

Please confirm if this theory is true, would like to know if this is how it works.

(Ben) #2

This is different for every plugin. You’ll have to read the plugin code to understand what it’s doing.

(Leland Fiegel) #3

Yeah, most plugins just load everything on every page even though their scripts/styles are only needed on a few. So in this case (which plugin are you talking about, by the way?), it probably doesn’t matter where you put the CSS.

A plugin like Plugin Organizer can help control where plugin assets are referenced. Otherwise, it’s up to the plugin itself.

The plugin itself could use conditional tags to load scripts and styles only on certain pages or post types, or if using a shortcode, something like this could be done.

(Rob) #4

I see. It just depends on the plugin and how the author made it work.

Thanks for the plugin recommendation, I might use it.

(Gnanasekaran) #5

@r083rt, Above mentioned plugin work for you?

(Jesse) #6

Best to keep all CSS in one file i.e. style.css … unlike JS parsing, CSS loads extremely quickly even when a huge file, as long as its on a single file (and even if its a “blocking” resource).

For lightning-fast performance, print your single style.css inline in your website header :slight_smile:

(Rob) #7

@Gnanasekaran No I havn’t tried it yet. I think a good strategy is to get the site build out and then at the end determine which plugins to control with such a Plugin Organizer. I’m not at that step yet.

@jessuppi thanks for the tip. So if I understand right you are saying a single CSS file loads faster than several CSS files. I was actually thinking of splitting mine up just to organize better but maybe I shouldn’t.

(Rob) #8

lol You make it sound so easy. I’m not at the level that I can read plugin code yet.


each CSS file is an HTTP request. fewere files, fewer requests, faster loading times. placing plugin specific CSS in a general / theme CSS file is not a good idea, unless very the same plugin is necessary for that specific theme and will be used only by it