CSS rules have to be isolated to avoid collisions

[volgin]

I deployed an app which had ".circle" selector in CSS with background set to red. Suddenly, a burger icon became red.

I am used to GWT CSS styles which are all prefixed with "gwt-" which avoids collisions with any third-party or custom CSS. I think it is a good practice to isolate your CSS rules within a specific namespace. There are so many rules in your CSS files that checking each one of them for possible collisions is problematic.

[kevzlou7979]

As a developer you can easily make exception on class pseudo code using not: you can make use of it. Also on gwt-material there are preserve classes declared so you must specify as developer to prevent from conflicts.

[volgin]

I can only do it with my own CSS, but not with third-party CSS files that might be included in the project.

[BenDol]

I don't disagree that this is ideal, following CSS practices it's actually done by governing each style with a parent class .material for example. So it sets apart the material components at a CSS level. What this means is that we would have to rewrite all of the materializecss CSS to match this way of doing things. Not impossible, but would require some work on an external library that we make use of at our core.

Personally I think you can keep your CSS isolated as a developer easily by defining your own prefix or parent class. This would also work .myapp .circle { } which is where your custom CSS rules are defined. However, from our end this is an enhancement.

[kevzlou7979]

The problem here is when Materialize releases new upates we need everytime to rewrite it so I disagree the idea