W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2020

[csswg-drafts] Stats on SCSS usage of control flow, conditional logic, nesting, custom functions (#5798)

From: Lea Verou via GitHub <sysbot+gh@w3.org>
Date: Wed, 16 Dec 2020 15:51:32 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-769023771-1608133891-sysbot+gh@w3.org>
LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== Stats on SCSS usage of control flow, conditional logic, nesting, custom functions ==
This is part of a series of issues (previous: [Color manipulation](https://github.com/w3c/csswg-drafts/issues/5782)) about our findings wrt SCSS usage in the wild, as a data-driven way to inform future directions of CSS evolution. While studying CSS usage tells us a lot about what authors are currently doing, preprocessor usage tells us a lot about what authors *want* to be doing. We studied nearly 300K SCSS stylesheets, extracted from [HTTPArchive](https://httparchive.org/)'s corpus of 6 million websites. 


- [Inline `if()`](https://sass-lang.com/documentation/modules#if) is the [second most used function](https://docs.google.com/spreadsheets/d/1sMWXWjMujqfAREYxNbG_t1fOJKYCA6ASLwtz4pBQVTw/edit#gid=170555219) (after `darken()`), and accounts for 14.5% of all function calls. It was used 2 million times in our corpus, or an average of 7 times per sheet. We did not measure what percentage of pages it appears on (but we can, if that's of interest) [source](https://docs.google.com/spreadsheets/d/1sMWXWjMujqfAREYxNbG_t1fOJKYCA6ASLwtz4pBQVTw/edit#gid=170555219)
- SCSS supports block conditionals and loops. Of those, **[`@if`](https://sass-lang.com/documentation/at-rules/control/if) is by far most popular**, appearing in 63% of SCSS sheets. Out of all control flow blocks, `@if` accounted for 62% of them. [source](https://docs.google.com/spreadsheets/d/1sMWXWjMujqfAREYxNbG_t1fOJKYCA6ASLwtz4pBQVTw/edit#gid=498478750)
- Out of the three [**looping constructs**](https://sass-lang.com/documentation/at-rules/control), the simpler [`@each`](https://sass-lang.com/documentation/at-rules/control/each) was by far the most popular, accounting for 31% of all control flow blocks (83% of all looping constructs) and appearing on 54% of sheets. [source](https://docs.google.com/spreadsheets/d/1sMWXWjMujqfAREYxNbG_t1fOJKYCA6ASLwtz4pBQVTw/edit#gid=498478750)
- We did not measure how many SCSS sheets use **mixins** overall (we could, upon request), but the number is well above half, since the most popular mixin, `clarfix`, appears on 52% of sheets. [source](https://docs.google.com/spreadsheets/d/1sMWXWjMujqfAREYxNbG_t1fOJKYCA6ASLwtz4pBQVTw/edit#gid=1697962303)
- Over half of SCSS sheets use custom functions, since the median sheet defines two of them [source](https://docs.google.com/spreadsheets/d/1sMWXWjMujqfAREYxNbG_t1fOJKYCA6ASLwtz4pBQVTw/edit#gid=528204990)
- **Nesting** is hugely common. We only looked at explicit nesting, i.e. with the [`&` selector](https://sass-lang.com/documentation/style-rules/parent-selector), which is used on 85% of all SCSS sheets. About half of its usage is to set pseudo-class or pseudo-element variants, e.g. `&:hover`. One quarter of `&` usage is for classes (e.g. `&.foo`). Not only is it common across sheets, but it's used very frequently within the same sheet: Out of the 300K SCSS sheets we studied, we found 57 million uses of `&`, which means it was used about 200 times per sheet on average.  [source](https://docs.google.com/spreadsheets/d/1sMWXWjMujqfAREYxNbG_t1fOJKYCA6ASLwtz4pBQVTw/edit#gid=1872903377)

In terms of relation to existing work, these stats:

- Support the work on inline and block conditionals done in #4731 #5009 #5624, since both forms of conditionals were very highly used. 
- Support the work on [CSS Nesting](https://drafts.csswg.org/css-nesting/), which will hopefully encourage implementations.
- Support Houdini's work on [custom functions](https://github.com/w3c/css-houdini-drafts/issues/857)
- Indicate that mixins are highly needed. #5624 would make a limited form of mixins possible, albeit as a side effect of sorts, and not a primary focus.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5798 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 16 December 2020 15:51:36 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:24 UTC