search

gsoft-inc / wl-hopper

Hopper Design System
https://hopper.workleap.design/
Apache License 2.0
3 stars 2 forks source link

Document importing Hopper's CSS on a layer #158

Open alexasselin008 opened 7 months ago

alexasselin008 commented 7 months ago

A number of developers have encountered difficulties when trying to overwrite Hopper's CSS styling with their own. The standard practice of simply importing Hopper's CSS into the main stylesheet often leads to issues where Hopper's styles take precedence over custom styles due to CSS specificity and source order.

The solution to this problem is to use layers. This allows developers to import Hopper's css into a specific layer, making it easier to manage styling precedence.

@import url("@hopper-ui/icons/index.css") layer(design-system)

we should document this standard pratices in our documentation

fraincs commented 7 months ago

I would not say that it's standard practice, layers are pretty much new in the CSS environment. Documenting could be done, if it does not encourage the practice until we have more experience with this. It was not a huge success so far.

alexasselin008 commented 7 months ago

The way it was done in igloo was unorthodox, but importing css files on different layers is exactly the intended purpose of this feature.