Selectors

[estelle]

Replicated everything from last year:

• ID vs class selectors: prevalence and popularity of selector types per selector.
• Attribute selectors: % of selectors that include an attribute selector, and, when used, % of usage (presence of attribute [attr], exact([attr=val]), starts with ([attr^=val]), ends with([attr$=val]), substring([attr*=val]), language([attr|=val]). Used at all; not just in relation to ID or class
• Classes per element (just b/c it was done last year)

Add some features:

• Most common class and id names (shows a11y and framework popularity. This was done a few years back)
• Combinators: how common are space, >, +, and ~, as well as :not (maybe we should leave space out)
• Specificity: what percent of selectors are 0-0-0 thru 5-5-5. What is the highest specificity found?
• Number of items in a selector: with pre-processors, how far are people nesting? What is the longest selector found?
• What is the median number of selectors in a stylesheet or site?
• Pseudo elements: Which are the most popular? Are we more interested in pseudo elements overall, inclusing ::before (incl :before), ::after, ::first-letter, ::first-line, ::selection (incl prefixed)
• Pseudo elements 2: Are people styling user-agent shadow DOM features/pseudo elements? How many ::-webkit-X, ::-ms-X, and ::-moz- like ::-webkit-inner-spin-button are people including, including non-prefixed, such as ::file-chooser-button.
• UI selectors: What are the most popular of the UI selectors, and what percentage of sites use them? :checked, :valid, etc.

[LeaVerou]

Related to #5 #6 #27

[LeaVerou]

So, one by one:

Most common class and id names (shows a11y and framework popularity. This was done a few years back)

This should be trivial to calculate with parsel.

Combinators: how common are space, >, +, and ~, as well as :not (maybe we should leave space out)

Same as above. :not()'s popularity is computed in #6.

Specificity: what percent of selectors are 0-0-0 thru 5-5-5. What is the highest specificity found?

Nice. Let's track this in #5.

Number of items in a selector: with pre-processors, how far are people nesting? What is the longest selector found?

Nice one. How would you define "longest"? Highest number of compound selectors in a complex selector? Highest number of simple selectors?

What is the median number of selectors in a stylesheet or site?

Do you count selector lists as one or multiple selectors? I.e. are you asking about the number of rules, or about the number of complex selectors? If the former, easy to calculate by traversing simple rules and incrementing by 1, if the latter also easy to calculate by traversing over rules and incrementing a count by rule.selectors.length.

Pseudo elements: Which are the most popular? Are we more interested in pseudo elements overall, inclusing ::before (incl :before), ::after, ::first-letter, ::first-line, ::selection (incl prefixed)

This is computed in #6.

Pseudo elements 2: Are people styling user-agent shadow DOM features/pseudo elements? How many ::-webkit-X, ::-ms-X, and ::-moz- like ::-webkit-inner-spin-button are people including, including non-prefixed, such as ::file-chooser-button.

This is (msostly) computed in #6 and #9 .

UI selectors: What are the most popular of the UI selectors, and what percentage of sites use them? :checked, :valid, etc.

This is computed in #6, but we should keep track of this as something to look for in the results.

[LeaVerou]

What is the median number of selectors in a stylesheet or site?

This was also measured in #5 so we should avoid re-measuring it here.

So basically, to sum up what we actually need to calculate here that's not measured by any other stats:

• All classes and ids. I think the Markup chapter may also be measuring this, though it may be interesting to see if we end up with the same results.
• "Longest" selector, though we need to define that first (@estelle?)

[LeaVerou]

I've pushed JS to extract all classes, ids, attribute names, pseudo-class & pseudo-element names (instead of the ad hoc JS that I had written for #6).

I'm going to drop the "longest selector" for now, unless @estelle can define how she envisioned that within the next few days.

[rviscomi]

Most common class and id names

Assuming "most common" should be interpreted as the name occurring on the most pages, not the name used the most number of times per page. LMK if anyone had a different idea in mind.

[rviscomi]

@LeaVerou is there JS for combinators? Not seeing support for it in https://github.com/LeaVerou/css-almanac/blob/master/js/31-selector-parts.js

[LeaVerou]

Assuming "most common" should be interpreted as the name occurring on the most pages, not the name used the most number of times per page. LMK if anyone had a different idea in mind.

I think both strategies are reasonable, either weighing things higher if they appear more times on average, or not doing so. We could even follow a hybrid strategy of having "buckets" of weights, but that's more complicated to code and to explain.

is there JS for combinators? Not seeing support for it in

I didn't account for it, as I didn't think it was that interesting but if we think it's needed, I can easily add it.