GithubHelp home page GithubHelp logo

Comments (8)

LeaVerou avatar LeaVerou commented on August 25, 2024

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.

j9t avatar j9t commented on August 25, 2024

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.

LeaVerou avatar LeaVerou commented on August 25, 2024

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.

LeaVerou avatar LeaVerou commented on August 25, 2024

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.

j9t avatar j9t commented on August 25, 2024

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.

LeaVerou avatar LeaVerou commented on August 25, 2024

@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.

LeaVerou avatar LeaVerou commented on August 25, 2024

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.

rviscomi avatar rviscomi commented on August 25, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.