Various JavaScript libraries in a single-page application (SPA)

Question

I am creating a one-page application (SPA) based on the jqWidgets library (it, in turn, is built on top of the jQuery UI ).

Now I would like to use the widget component available on another platform ( Ext JS or jQuery UI features).

I am concerned about possible CSS compatibility issues; I read a lot on this topic and found about the so-called CSS Scope attribute. Unfortunately, I do not see a recent text on this subject, so I am not sure of its condition.

Are there any other ways to deal with this problem in SPA? Or workarounds?

Answer 1

If I understand correctly and you are concerned (which is also significant) conflicts with CSS, then including your own style sheets after the library is the best starting point; as @rthor noted.

However, this may not solve every problem, because it also depends on the specifics of the CSS selectors. There is a good article about CSS Specificity that should also help you deal effectively with CSS conflicts that arise.

Now the area? This is a different topic, and another, a bit more confusing - solely because of (unexpected surprise) browser implementation. You can just polyfill for older browsers, but this is not very convenient. This is purely an HTML5 function that seems if you are not talking about: the psuedo-selector .. sphere, which is a working draft for CSS Selectors 4

I am sure that some front-end wizards will be able to give you low specificity regarding scope, since I expect my solution to be poor. You can always use container elements (go out, I know, not perfect) and ensure that all styles are specifically designed for children of the container element.

Essentially ..

<div id="widgetA" class="scope"> <!-- So this is our 'scope' --> <div id="bla bla">.....</div> </div> 

Ensuring that all your CSS selectors start with a container element:

 div#widgetA{ /* We essentially get a scoped namespace */ } 

However, this is due to nasty things, such as non-semantic markup and too specific selectors, which are poorly suited for performance. However, it has outdated support and is developing rapidly, albeit a bit hacked. If you use something like Sass / Less, you could even quickly wrap the entire CSS library file in a div.widget{ } rule and compile it; (although with the above disadvantages).

Alternatively, from the javascript view - if you target certain elements (and only those elements), I don’t see too many problems arising in libraries applying their own style - since libraries should not really interfere with other elements.

Good luck.

Answer 2

Just remember to add your own styles after the library ones, and then you should be safe. If you encounter some strange bugs, just remove these specific CSS rules and apply them to the various classes.

I believe that most errors will be directly related to box-sizing , positioning, margin / padding and size.

Hooray!

Answer 3

Recently I had to use a widget of two different frameworks on the same page (ExtJS and jxlib, an outdated widget library based on mootools.

I had two problems:

• The first was related to the size of the window. ExtJs uses box-sizing: border-box and jxLib box-sizing: content-box . Adding this to css was all I needed:

   .jxDialog * { box-sizing: content-box !important; -moz-box-sizing: content-box !important; -ms-box-sizing: content-box !important; -webkit-box-sizing: content-box !important; } 

• On the Javascript side, I had only one problem, and got a solution in this question . With jQuery, I cannot say whether you will run into problems or not.