Integration of Bootstrap // custom Themes // JS Plugins

[dN-iL]

Hi guys!

We're using Twitter Bootstrap and a custom Theme for our Web App, but (or should I say "therefore") over time our CSS got really messy and so we are looking into Object Oriented CSS to solve our CSS issues.

At the moment, our HTML is full with Bootstrap classes and classes from our theme, which both are used by some Java Script functions. This makes it hard for us to simply replace these class names with rscss-style class names.

Can you provide any advice how to move forward from our situation? Also for the future, how do you integrate predefined plugins into your OOCSS and how do you handle updates of frameworks you use?

Thanks for any help and best regards,

Daniel

[rstacruz]

This isn't in the scope of rscss, but feel free to check these out:

https://github.com/rstacruz/bootstrap-practices https://github.com/rstacruz/rsjs

Lemme know if those help!

[rstacruz]

Also, rscss is different from OOCSS, you may have confused your terms there :)

[dN-iL]

Thank you for the articles, they helped a lot! Your suggestion to gradually replace the old components with prefixed new ones perfectly extended my line of thought.

One uncertainty that I still have: How to you go about predefined js plugins that you use in your app? Some of them require specific class names and a fixed indentation of these, which might not be compliant with the rscss/rsjs style. As I currently see it, you have two options: Make exceptions in your convention to use the predefined js plugins (-> no overhead, code smell) or adjust the plugin itself to be conform to the convention (-> overhead, updating difficult, no code smell). Which one would you prefer? Or do you have another way to tackle this problem?

[rstacruz]

This is probably more of an rsjs question :)

Most plugins out there expect you to bind them yourself. Bootstrap's default plugins work this way. With rsjs + onmount, those naturally fit into rsjs conventions:

onmount("[role~='dropdown']", function () {
  $(this).dropdown()
})

onmount("[role~='select2']", function () {
  $(this).select2()
})

But you're right, some plugins are a bit more stubborn and don't let you specify your own elements/selectors, and hardcode their prescribed classes. Unfortunately, you simply have to use them as the plugin authors intended (lest you fork it and make them more "generic"). I personally tend to avoid these plugins nowadays though: not letting users pass selectors/elements is a code smell in itself, IMHO.

I haven't seen many of those in the wild nowadays, though—can you give examples of naughty JS plugins you're having trouble with?