How to overcome the overlapping of similar name CSS classes from two CSS frameworks?

Question

I was using Modal of semanctic-ui-react inside a create-react-app project. Inside index.js I had declared the import for the CSS files of the frameworks

import "semantic-ui-css/semantic.min.css"
import "bootstrap/dist/css/bootstrap.css"

I noticed the weird positioning of Modal. After debugging I found a .modal CSS class was getting applied which was coming from the Bootstrap's CSS. Since semantic-ui also has the similar name classes, this caused the overlapping.
On removing the import "bootstrap/dist/css/bootstrap.css", Modal get positioned correctly.

Solution(partial) in my mind:
import CSS file only in the class where it has been used, and not to the index.js
-this has two problems:
1. Suppose EditForm.js uses semantic-ui, I import the semantic.min.css directly in this file. But what if it's parent class in which EditForm.js is used, if parent.js is using bootstrap.css then again the same problem will occur.
2. I am not sure on this, but importing the complete CSS seperately for each files could make those files heavy, please correct me here.

I want to use both the frameworks in my project, what would be the ideal way?

If it will not create issue then you can try importing semantic after bootstrap I mean import "bootstrap/dist/css/bootstrap.css" then import "semantic-ui-css/semantic.min.css" to give priority to semantic. — Hanif, Oct 08 '18 at 05:45
Strange - it should work if same selector. Because css always give priority last properties if same selector. I think although same selector but css properties must different their. — Hanif, Oct 08 '18 at 05:57
do you need `.modal` styles from both frameworks? if not, why not just remove all of the occurrences from your bootstrap css? — But those new buttons though.., Oct 08 '18 at 06:05
here's an idea, https://stackoverflow.com/a/11910081/1767412 — But those new buttons though.., Oct 08 '18 at 06:09

score 1 · Answer 1 · edited Dec 11 '20 at 02:21

Do you have to use both of them? if so, another solution to consider is implementing SASS/SCSS in your project. SASS is usually bundled in alot of webpack-using installations out-of-the-box. I have only used it in vanilla, Vue and Angular projects but i'm 100% sure React would have no problems with it and CRA would be able to generate the necessary configuration for it.

If you installed SASS, you have alot of ways to handle this. Two I would think of though are:

You can decide on one library that is your "main" and import it as normal, while the other one you can "scope" within a css rule. This is possible because SASS automatically unwraps the import and inserts it under that css rule, effectively "Scoping" it. CSS does not do that by default.

.smui {
  @import "semantic.css";
}

Read more here: https://sass-lang.com/documentation/at-rules/import#nesting

I didn't check semantic UI's sass support, but Bootstrap is built modularly in SASS which allows you to selectively import the parts you need. So let's say you want to use a semantic button within Bootstrap's Grid layout. Instead of bringing over all of bootstrap, you can simply import the grid module.

@import "semantic-ui";

/* Required */
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

.bs {
   /* Part you actually need */
   @import "node_modules/bootstrap/scss/grid";
}

This would reduce the footprint to only what you need, reduce your CSS size, and reduce overlap of styling for elements/classes you do not want to be overwritten.

score 0 · Answer 2 · answered Oct 08 '18 at 22:01

I would not recommend assigning an id to your component and writing your overrides there. That will force you to use that id everywhere throughout your application, which you do not want to do.

You have two options:

1) The easiest option would be to build your own version of Bootstrap that ONLY contains the styles for components you are actually using in your app. This is also going reduce the number of styles your user has to download to render your app. Just exclude "Modal" from the build (and any other bootstrap components you do not use).

2) Do a class comparison between the two libraries you are using. This should actually be easy to do with developer tools in any browser. You will see each time the component you are targeting matches a class in one of your style sheets. Some rules will be crossed out in one, some will be crossed out in the other. If you want the styles for Semantic UI to take precedence, you will want to make a separate stylesheet that increases specificity for the style properties that are being lost from Semantic UI. My guess is there are probably only a few style properties that are getting overridden or that you do not want.

You can also put the above styles in the style prop on your modal if you do not want to create a separate file and they will be added inline to the component, effectively being more specific than the styles in either CSS file.

score 0 · Answer 3 · answered Dec 11 '20 at 01:02

0

This worked for me.

In a custom css file, insert the following rule

.modal {
    top: auto !important;
    left: auto !important;
    height: auto !important;
}

answered Dec 11 '20 at 01:02

XaviG

21
1
1

How to overcome the overlapping of similar name CSS classes from two CSS frameworks?

3 Answers3