[Minor] Impossible to customize CSS properties without increasing CSS selector specificity or using !important

[franciscolourenco]

Link to reproduction

https://github.com/payloadcms/payload/compare/franciscolourenco:reproduce-css-specificity

Describe the Bug

When using custom CSS to style Payload, currently Payload styles take precedence over custom styles. This means that in order to override Payload styles, it is necessary to use a CSS selector of higher specificity, or use the !important keyword. None of the options is ideal.

To Reproduce

Try to modify a CSS property of an already styled Payload element, using the same CSS selector as the Payload styles (see reproduction link).

Payload Version

2.23.1

Adapters and Plugins

No response

[paulpopus]

I converted this to a discussion so that we keep this in mind for when we revisit the admin panel overall as one of the things I want to do is make it much easier to restyle the admin panel and our elements than it is right now.

In the short term I recommend increasing specificity without using !important by nesting the selector under a top level one like .dashboard

[franciscolourenco]

I wonder if this is something that could be easily improved by changing the order of the imports. I'm not sure, but I think the problem doesn't occur for all components.

[franciscolourenco]

@paulpopus it seems like in v3 this is still a problem. But now at least it seems that Payload styles consistently take precedence over custom styles. Having to unnecessarily increase selector specificity by increasing selector complexity, or to use important! everywhere is an issue. V3 sounds like a good occasion to fix this?

[paulpopus]

We're going to address this in here #8545

Using CSS layers to ensure that Payload's default styles are encapsulated specificity wise.

All payload css is now encapsulated inside CSS layers under @layer payload-default

Any custom css will now have the highest possible specificity.
We have also provided a new layer @layer payload if you want to use layers and ensure that your styles are applied after payload.

To override existing styles in a way that the existing rules of specificity would be respected you can use the default layer like so

@layer payload-default {
  // my styles within the payload specificity
}