Comments (7)
from css-almanac.
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.
from css-almanac.
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?)
from css-almanac.
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.
from css-almanac.
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.
from css-almanac.
@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
from css-almanac.
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.
from css-almanac.
Related Issues (20)
- Which media query features are used most? HOT 3
- How frequently is each color format used? HOT 34
- Usage of grid-template-areas as grid layout mechanism HOT 6
- Usage of named lines syntax when creating grid tracks HOT 5
- Grid-like use of flexbox HOT 8
- Multicol usage with column-count and column-width HOT 2
- [meta] Value utilization HOT 12
- direction CSS property usage HOT 8
- Analyze Sass stylesheets HOT 8
- What CSS hacks are still used to target browsers/versions/platforms? HOT 5
- How popular is each CSS preprocessing language? HOT 4
- [meta] Chapter outline HOT 4
- Logical vs physical properties HOT 2
- CSS-in-JS HOT 18
- Most common properties used inside media queries HOT 3
- [meta] Custom metrics HOT 8
- !important stats
- Global keyword usage
- Declaration repetition (DRYness) HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from css-almanac.