Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Remedy without specificity #88

Open
Th3S4mur41 opened this issue Mar 25, 2022 · 8 comments
Open

CSS Remedy without specificity #88

Th3S4mur41 opened this issue Mar 25, 2022 · 8 comments

Comments

@Th3S4mur41
Copy link

It would be great if every definition in the remedy.css could be enclosed in a :where() to remove the specificity.
Although the fallback for IE would probably mean duplicating the code with an hack 馃槱

The reason for this issue is the following:
In styles written for e.g. design systems in a way that they can easily be overwritten (e.g. for instance like in open-props from @argyleink) css remedy takes precedence.

Another solution for the problem could also come from Cascade layers, but we're not there yet with the browser support

@Sora2455
Copy link

Given that global usage of Internet Explorer is sitting at around 1%, do we really need to worry about it? Old versions of Firefox, Chrome and Safari also don't support where(), and they make up a noticable amout of traffic (at least on the site I work on). We don't support them - and Microsoft will be doing it's hardest to "auto-upgrade" Internet Explorer into Edge on June 15.

@Th3S4mur41
Copy link
Author

The IE support was actually mostly because CSS Remedy currently does support it as stated in the README

@BassOfBass
Copy link

Even without IE in mind this pseudo-class is too fresh support-wise to base/migrate entire libraries around.

@WesCook
Copy link

WesCook commented Jul 8, 2022

Another consideration is cascade layers. Even less well-supported than :where(), but a much better solution to the problem.

@Th3S4mur41
Copy link
Author

Th3S4mur41 commented Jul 8, 2022

Even without IE in mind this pseudo-class is too fresh support-wise to base/migrate entire libraries around.

@BassOfBass is it though? 馃
image

At this point, this couldn't even be improved with @supports
image

If remove dead browsers and consider the browserslist default of >.5%, it doesn't look all that bad
image

@BassOfBass
Copy link

@Th3S4mur41
What exactly do you expect to do with supports()? Write the base stylesheet which can randomly have 0 or 1+ specificity across the board? I am sure it's going to be very fun to work with such a library.
Another issue is migrating the existing CSS libraries (and the projects using those). The change like this has a huge implications on how library creators and consumers write styles. I myself stumbled into a situation where I had to prefix a to my BEM class selectors because I had a bunch of attribute selectors on <a> elements which resulted in higher specificity over BEM classes. But styling links upon their href value is just too much of a QoL so I went for a hack rather than conforming to BEM ruleset. And that was a pretty simple flat stylesheet with complete control over all styles. I imagine it's a lot worse in more complex setups.

@Th3S4mur41
Copy link
Author

I'm not saying that @supports would have been a solution. I was merely mentioning that its browser support compared to :where discards it as an option anyway.

As @WesCook mentioned, cascade layers might even be a more flexible solution to reach the same goal. But browser support for that is worse so far.

The :where change would indeed be a breaking one which would call for a major version update.
That would help mitigate potential migration issues.

But this library being supposed to be the base class, reducing the specificity should not have any impact in most cases.
The only styles css remedy needs to overwrite are user-agent styles. And it doesn't need specificity to do so.
On the other hand, projects using this library needs same or higher specificity to overwrite the defaults set here. Removing specificity, makes that task easier, not mor difficult.

So, I'd say that the only downside to this so far would be browser support.
Or do you see a use case where the specificity change would be a problem?

@BassOfBass
Copy link

The major version upgrade would indeed be the only feasible solution. Except the next major version would be "1.0.0" in context of this repo, which would give it a "released" impression, not just a major version up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants