Join the Webstudio community

Updated 2 years ago

olegisonen 2521 hi i am looking into

At a glance

The community member is curious why the project uses the :where pseudo-selector for component style scoping instead of IDs and classes, which could result in smaller CSS file size. Another community member explains that :where allows selectors to have the same specificity level, even when one would normally be more specific. The community members discuss that using generated IDs helps avoid conflicts with user-provided IDs. There is no explicitly marked answer in the comments.

@Oleg Isonen hi, i am looking into the project and i see component style scoping is based on :where pseudo selector, i am curious why not used IDs and classes which can be shorter and css would be smaller in size?
O
В
6 comments
:where allows having a selector that doesn't increase specificity
for example:

[data-ws-id="2uUBLu70OniQQeuPXa6g7"]
h1:where([data-ws-component=Heading])

these 2 selectors stay on the same level of specificity even though the second one would be more specific otherwise
thanks, actually, i mean selectors #2uUBLu70OniQQeuPXa6g7 h1.Heading
We don't use id to leave it for the user-space
Our id is generated, ensures conflict free resolution
ok, i see, thank you!
Add a reply
Sign up and join the conversation on Discord