2

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
Improve this question
6
  • How exactly did you plan to embed it? Commented Aug 14, 2012 at 14:01
  • Do you plan on releasing any of them to the public domain? Commented Aug 14, 2012 at 14:02
  • @Prinzhorn - was thinking of asking that as a seperate question. Currently my 2 plugins are small enough to not worry about it too much, just using .css({'etc':'etc'}) at present, but I'm sure there's a better way Commented Aug 14, 2012 at 14:05
  • @Jeemusu absolutely, my 1st plugin has a bunch of users already: zach.lysobey.com/projects/fbalbum. The second one is still a sloppy mess: zach.lysobey.com/projects/poloroid-stack-image-gallery Commented Aug 14, 2012 at 14:07
  • I guess you have two kinds of css, the stuff that is essential to the operation of the plugin, and then the stuff that is more your personal preference used to style it. If it was me, and I was planning on releasing it, I would separate any css used for design purposes. Although I find myself just using javascript to apply classes, and separating almost all of my styles, I guess I'm more of a purist, and not a big fan of seeing inline styles. Commented Aug 14, 2012 at 14:09

4 Answers 4

Reset to default
1

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...

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I'm still struggling with the fact that much of the css cannot be factored out, since often it relies on variables set onLoad or similar. Do you feel like it's worth having the plugin-specific css in two places?
@ZachL could you give an example of why it can't be factored out? You can for example use classes for separate cases.
in one case, I am using JQuery's .position() method to get the position of (possibly) static elements before switching them to absolute. Another example is setting the height of all images in a set to the height of the shortest. In that example I have js doing {'height':theMinHeight} and css doing {width:100px}
Ok, then let's put it this way: it highly depends on what kind of plugin you are writing. If it's using non trivial CSS which can be excluded, then it should be excluded.
Yea, I guess it kinda needs to be a case-by-case basis. I probably WILL include all css for my currently developing plugin (only about a dozen lines maybe), but I think in general I will still strive for a clean separation.
1

I believe it is always better to separate the base plugin CSS file from your Javascript.

Mainly because if someone wants to make additions & changes to your CSS, they can do so in their own separate file, changing/replacing your css rulings easily. (That way if you made updates to the base CSS in a plugin update, it wouldn't conflict with theirs).

Improve this answer

1 Comment

good point! Struggling for a good way to word that in a con bullet point though ;-)
0

I myself have created few small plugins (just for fun) and i like the idea of embedding my CSS in the js file itself as its very much specify to what i am trying to do in the plugin. + the fear of plugin might now working properly if css is not loaded properly. Having said that, i guess we can really get good answers from this question which might make me change my coding styling.

Improve this answer

Comments

0

If you want embedded CSS in JS, I found this lib helpful:

https://github.com/cssobj/cssobj

for use with jQuery:

https://github.com/cssobj/cssobj/wiki/Work-with-popular-JS-Lib

Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.