Comments (8)
How would you measure that? What is a unique declaration? What normalization would you do? E.g. what about different property capitalization, 0
vs 0px
, different ways to specify the same color etc?
from css-almanac.
Basic method: Take a style sheet, count the number of declarations, and count how many different declarations there are (just comparing the strings constructed from going first to last character); then divide the number of different (unique) declarations by the overall number of declarations.
Advanced method: Count per media query, and normalize declarations (so that border: none
, border: 0
, border:0
, border: 0px
&c. all count as the same declaration—this can be tough, but might be simplified greatly by using some auto-fixing linter like stylelint).
What I have liked to do so far is take a shortcut using CSS Stats: Although it would be useful to check on the definitions they use (personally, I’ve in a way shifted the problems you raise to them), they provide this data in their “Total vs Unique Declarations” section—see for lea.verou.me.
from css-almanac.
I'd rather not introduce new dependencies at this stage, but some basic normalization like lowercasing properties is possible.
What kind of results do you envision? If the JS returns a percentage of unique declarations, and then that is aggregated over the corpus to give us percentiles of that number, is that good?
from css-almanac.
I just pushed the JS for this
You can test it out here: http://projects.verou.me/rework-utils/?url=https%3A%2F%2Flea.verou.me%2F (go to Query and select "Declaration repetition #54" )
It seems to produce nearly identical results to cssstats.
from css-almanac.
That (the whole tool) is pretty awesome! (Will you keep it up? I like the idea of featuring it on UITest.com.)
For the Almanac, what kind of analysis would still be possible? I guess the less granular, the easier, meaning that it would be simpler to apply this to the whole data set than to break it down to style sheets or even media queries?
As you already have so much material for the chapter, maybe keeping it simple is a good approach so that this could be touched on in a brief paragraph? (I’m not sure of how much help I can be with the technical part of the analysis, but I’m down to helping with interpretation if need be.)
from css-almanac.
@rviscomi might be best to reply here as he's written most of the SQL. But I think the most reasonable (and easy) thing to do would be to get percentiles (0, 10, 25, 50, 75, 90, 100) of the ratio, or perhaps of the number of declarations too (unique and total).
from css-almanac.
That (the whole tool) is pretty awesome! (Will you keep it up? I like the idea of featuring it on UITest.com.)
Thanks! I do want to do something with it, I'm just not sure what yet :)
from css-almanac.
I know it's tempting, but given the timeline, I think we should lock the analysis down and be in maintenance mode for the existing queries.
from css-almanac.
Related Issues (20)
- Which media query features are used most? HOT 3
- Selectors HOT 7
- 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
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.