search

keeganstreet / specificity

A JavaScript module for calculating the specificity of CSS selectors
MIT License
624 stars 39 forks source link

Show error message on syntax error #52

Open FeldrinH opened 1 year ago

FeldrinH commented 1 year ago

Currently inputting a syntactically invalid CSS selector shows a specificity of 0 with no error (except in the devtools console), which might create confusion, if you don't realize it is invalid. It would be clearer to show an error message instead of all zeros.

Edit: In most cases you can infer that there is a syntax error just by noting that the specificity should be more than 0, but that is not the case with for example the selector :where(div), which is valid but has a specificity of 0.

keeganstreet commented 1 year ago

Hi @FeldrinH, thanks for the issue. I agree the website does not convey invalid selectors very well. But the problem with showing an error message is the specificity (and validity) of input is calculated on every keypress. It could be annoying if an error message pops up before a user has even finished entering their input.

keeganstreet commented 1 year ago

Maybe a little error icon can appear, and the error message only displays when the error icon is clicked