'Avoid conflicts of multiple CSS frameworks and style classes

I am currently implementing a plugin that gets dynamically incrusted into a DIV (not an iframe) and am currently using Bulma as my CSS framework. The issue I am having is that since this plugin is going to be integrated into many sites, it will also inherit the styles applied to the parent website.

Due to many of the classes being a standard name in many frameworks, such as column, button, form, and others, this is creating a conflict.

I have been reviewing a couple of packages that either add a prefix to these classes as well as use a namespace.

Namespace:

enter image description here

The namespace route does not work since this does avoid our plugin from not interfering with any of the other sites' styles, the site's styles still affect ours.

Prefix Packages:

https://www.npmjs.com/package/gulp-class-prefix

The other route I was researching ways to add a prefix to all the classes from our plugin, such as -column, but I understand that this will output a CSS library with all the classes with the prefix but not my HTML files which have the class="column".

I am hoping to find a solution for this, as I would think this is, although not common, a recurring issue/question and I just haven't found the proper solution for this.

Any advice would be appreciated.

cssnamespacesbulma


Solution 1:[1]

You can use the @layer css rule:

The @layer at-rule allows authors to explicitly layer their styles in the cascade, before specificity and order of appearance are considered.

Example:

/* styles.css */
@layer bootstrapFramework, myPluginStyles;

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css")
layer(bootstrapFramework);

@import url("https://yourPluginStyles.css")
layer(myPluginStyles);

Doing this will override bootstrap classes with your plugin CSS classes. Due to the order of the layers.

Check out the browsers support for the rule.

You can read more about @layer CSS rule here: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

You can also checkout Web Dev Simplified Channel by Kyle on youtube. Here is the link to the video: https://youtu.be/Pr1PezCc4FU

Hope this answers your question!

Solution 2:[2]

Yeah. That's fine. Just add a prefix to the HTML classes too. It should work.

Or you can choose to ditch CSS frameworks for the plugin and write the CSS for the necessary components. You just do a little reset for your component's HTML elements and you can expect a fairly consistent design across multiple different implementations.

I feel this may be just helpful too. custom HTML elements too.

Best of luck.

Solution 3:[3]

just use div-to-select * { all:revert } then add the code for the div & bulma

Explanation

all: revert gets every thing to normal so it makes all other frameworks class's styles to default

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Elijah Kolawole
Solution 3 haider

Related Questions