Zach Lysobey Zach Lysobey - 4 months ago 13
jQuery Question

Separate .css in JQuery plugin? Or embedded in JS?

I've somewhat recently started building my own jQuery plugins to modularize some ideas I find myself using frequently. I've noticed many jQuery plugins have a separate

js
and
css
files to include, but I've begun to question that logic.

My question is, should I just be embedding the
css
in my
JavaScript
?

The Pros I can think of:


  • Reduced http requests

  • Plugin specific CSS isn't loaded if js is disabled

  • Ease of use - can be as easy as one copy-paste and the deed is done.



Cons?:


  • No seperation of concerns

  • More difficult to organize code how you want to

  • Confusing or difficult to edit core css for the uninitiated

  • can cause difficulty when releasing plugin updates


Answer

I'd definitely separate any non-trivial amount of CSS from your JS.

Let's go through the pros you have there:

Reduced http requests

If someone uses your plugin they will concat and minfiy all CSS files to one. If not, they're doing it wrong. So still one request for one main CSS file.

Plugin specific CSS isn't loaded if js is disabled

Really? They're already saving the requests for the JS files. I wouldn't care.

Ease of use - can be as easy as one copy-paste and the deed is done.

Well, I guess you can't, physically, disagree with that. But does it really matter? What if your plugin needs images? You can't include them as well.*

*yes, I know about data URI...