Utilizing Material-UI and JSS for CSS management, I've encountered an issue where styles appear differently in development versus production.
The discrepancy stems from the order of rules within the file.
For instance, when defining an element like <div class = "foo bar"/>, the stylesheet arrangement is as follows during development:
.foo {
color: red;
}
.bar {
color: blue;
}
However, in a production environment, it would appear like this:
.bar {
color: blue;
}
.foo {
color: red;
}
This differing sequence results in distinct appearances.
I am contemplating whether I can use something similar to color: unset for the .bar rule, indicating to CSS to 'Disregard me and allow other rules to determine this'.
.bar {
color: blue;
}
.foo {
color: red;
}
p.foo {
/* What can be done here? I aim for the color to be blue without explicitly specifying it */
}<p class = "foo bar">
hello world!
</p>