CSS 2020

[foxdavidj]

Part I Chapter 1: CSS

Content team

Authors	Reviewers	Analysts	Draft	Queries	Results
@LeaVerou @svgeesus @rachelandrew	@fantasai @mirisuzanne @j9t @catalinred @hankchizljaw	@dooman87 @rviscomi @LeaVerou	Doc	*.sql	Sheet

Content team lead: @LeaVerou

Welcome chapter contributors! You'll be using this issue throughout the chapter lifecycle to coordinate on the content planning, analysis, and writing stages.

The content team is made up of the following contributors:

• Authors
• Reviewers
• Analysts

New contributors: If you're interested in joining the content team for this chapter, just leave a comment below and the content team lead will loop you in.

Note: To ensure that you get notifications when tagged, you must be "watching" this repository.

Milestones

0. Form the content team

• Jul 6th: Project owners have selected an author to be the content team lead
• Jul 13th: The content team has at least one author, reviewer, and analyst (minimally viable team formed)

1. Plan content

• Jul 20th: The content team has completed the chapter outline in the draft doc
• Jul 27th: Analysts have triaged the feasibility of all proposed metrics

2. Gather data

• Jul 27th: Analysts have added all necessary custom metrics and drafted a PR to track query progress

• Aug 1 - 31: August crawl

• Sep 7th: Analysts have queried all metrics and saved the output to the results sheet

3. Validate results

• Sep 14th: The content team has reviewed the results sheet

4. Draft content

• Nov 12th: Authors have completed the first draft in the doc
• Nov 26th: The content team has prototyped all data visualizations

5. Publication

• Nov 26th: The content team has reviewed the final draft, converted to markdown, and filed a PR to add it to the 2020 content directory

• Dec 9th: Target launch date

[rachelandrew]

I'd be happy to help here. Layout is my CSS specialism but I can write about most things. I'm also an experienced editor.

[j9t]

I’m happy to contribute, too. With my current workload the least I can commit to is reviewing—I look forward to coordinating with whoever would be driving this section.

[catalinred]

I'd love to help in any way.

[estelle]

I have a particular knack and interest in selectors and specificity, but can write about other topics as well.

[foxdavidj]

@LeaVerou thank you for agreeing to be the lead author for the CSS chapter! As the lead, you'll be responsible for driving the content planning and writing phases in collaboration with your content team, which will consist of yourself as lead, any coauthors you choose as needed, peer reviewers, and data analysts.

The immediate next steps for this chapter are:

1. Establish the rest of your content team. Several other people were interested or nominated (see below), so that's a great place to start. The larger the scope of the chapter, the more people you'll want to have on board.
2. Start sketching out ideas in your draft doc.
3. Catch up on last year's chapter and the project methodology to get a sense for what's possible.

There's a ton of info in the top comment, so check that out and feel free to ping myself or @rviscomi with any questions!

@rachelandrew @j9t @catalinred @estelle @hankchizljaw we'd still love to have you contribute as a peer reviewer or coauthor as needed. Let us know if you're still interested!

[Andy-set-studio]

Yeh just let me know when and if you need me 🙂

[rviscomi]

Tentatively adding @rachelandrew and @estelle as coauthors and everyone who commented as a reviewer. @LeaVerou feel free to reassign at your discretion.

[LeaVerou]

Howdy everyone! 👋

Warm thanks @rviscomi and @OBTo for selecting me to lead this effort. I'm psyched!

I think @rachelandrew would be an excellent co-author, especially for anything layout.
@estelle, would you like to take on a selectors & specificity section?
@svgeesus will be a co-author for Web Fonts & Colors

I have a lot of ideas for reviewers and co-authors, to which I will reach out privately, then @-mention here (I would rather not ask them in public, as it makes it harder to say no). I do not have any ideas for analysts however. Should we be looking for people swapping areas of responsibility or look for new people to join? Perhaps anyone from the current reviewers would like to become an analyst?

I'm going to re-read last year's chapter and reflect on what has happened in CSS within the year. A few quick initial thoughts:

• I see last year we only calculated how many websites use custom properties, I would like to go a lot deeper this year (what do they use them for? How do they use them? where do they use them?).
• Variable fonts! Lots of interesting stuff to calculate there and I'm sure @svgeesus would love to.
• Houdini! Are Houdini APIs used yet? How much? How?
• The point above brings us to the question: Is CSS-relevant JS within scope?
• I would love to calculate more on selectors. What's the average specificity per selector? Which pseudo-classes are the most popular and by how much?

If anyone has any ideas/suggestions, they are always welcome!

[j9t]

This is a world-class author team. I’m excited about the CSS chapter!

@OBTo, @LeaVerou, only to confirm, I’d absolutely be around for reviewing. And if the chapter is to dive deeper into the craft of writing CSS, I’d be happy and available to contribute more (it’s one of my focus areas).

[catalinred]

Hi everyone,

Happy that @LeaVerou accepted to be the lead author for the CSS chapter. The authors team is amazing.

Here are some of my random thoughts on what numbers I'd like to see in this new chapter:

• Would like to see numbers on various ways of hiding DOM elements, by trying to guess on: [aria-hidden], .hidden, .hide, .sr-only, .visually-hidden, .visuallyhidden, .invisible or [hidden].

• How many of the pages are using the latest border-box sizing model, compared to content-box? Is the border-box number high due to popular CSS libraries usage, such as Bootstrap or Zurb Foundation?

• Popular vendor prefix numbers. Are the -webkit-, -moz-, -o- or -ms- numbers still relevant, considering the improved browser support for most of the CSS properties that once required vendor prefixes?

• Popular shorthands, e.g. transition, background, font, animation. Are the numbers maybe low due to the fact that the order of the values is not that easy to remember without checking the documentation?

• When it comes to CSS units usage, I'd love to see some numbers on unitless 0 values, e.g. 0 vs 0px/em/rem/ numbers comparison.

• Are .clearfix, .clear or .cf still popular? How popular considering the current flexbox and grid usage?

• How many of the pages are using SVG favicons and are these SVG's using CSS @media (prefers-color-scheme: light/dark) to provide an alternate style depending on the OS color scheme?

• Flexbox and grid usage and frequency.

• Try to detect and show numbers for the native font stack variations, compared to the other popular font families like Open Sans and Roboto.

• Considering the unitless line-height is a best practice, would be interesting maybe to see which values authors prefer when setting the line-height: length, unitless or percentage.

• Last but not least, I'd like to see how CSS is applied to a page: style attribute, <style> element and/or the <link> element. Besides <link>, I'd expect numbers to be quite high on <style> elements mostly due to the critical CSS recommended practice.

Let me know what you think.

[LeaVerou]

I'd like to announce @fantasai as a reviewer.

@catalinred What fantastic ideas, thank you!

[tunetheweb]

What a fantastic line-up! Very excited to see what we come up with in this chapter.

[LeaVerou]

Announcing @mirisuzanne as reviewer!

[j9t]

Hi @LeaVerou, CSS chapter team—if I’m not missing anything then ID and class names hadn’t been covered in neither Markup nor CSS chapter last year. They may be more of a topic to cover in the Markup chapter but I wanted to raise this here in case you’ve flagged this on your side, too. Let’s coordinate on this if necessary—I’ll follow up as soon as I get a feeling for interest and feasibility on the Markup chapter side.

[rviscomi]

@estelle I've sent you an invite to join the 2020 Authors team on GitHub. Can you visit https://github.com/HTTPArchive/ to accept the invite? This will ensure you get notifications about important chapter milestones.

[svgeesus]

Variable fonts! Lots of interesting stuff to calculate there and I'm sure @svgeesus would love to.

I certainly would!

I'm unsure of the apportioning between this CSS chapter and the Fonts chapter though.

Popular vendor prefix numbers. Are the -webkit-, -moz-, -o- or -ms- numbers still relevant, considering the improved browser support for most of the CSS properties that once required vendor prefixes?

Nice one, although -webkit now falls into two categories which should be distinguished;

1. Things that are actually WebKit specific
2. Things that the other browsers have (wth varying degrees of reluctance) had to implement, primarily so that iOS-specific mobile content also works on browsers other than Safari. The -webkit vendor prefix merely being historical legacy, at this point.

The second one is interesting to analyze because it constitutes a part of the Open Web Platform that was added without the usual design debate or standards process.

[svgeesus]

@catalinred some great suggestions there!

[svgeesus]

I'm aware only Safari implements this now, but other browsers are showing interest so probing color(display-p3 r g b) would be timely this year. Interesting to see

• how much it is used (low, because Safari only)
• is it used with an sRGB fallback and if so, how
• what percentage of the colors declared in P3 are actually outside the sRGB gamut
• use of the color-gamut media query

[LeaVerou]

Hi reviewers @fantasai @mirisuzanne @j9t @catalinred @hankchizljaw !

Since we are only 16 days from launch, it may be a good idea to start iterating earlier, rather than later.
There are many sections whose draft is at a stage it could benefit from some review, namely those whose title does not include "[TBD]" or "[WIP]". Visualizations have not been added yet, though there are placeholders for them. A few numbers are also missing, those are noted in the prose with ??%, and in the title with [missing numbers].

Feel free to edit directly if you are reasonably certain about a correction (e.g. typos, grammar mistakes etc), or add comments for more substantive changes.

[j9t]

Hi @LeaVerou—this is probably very present for you, but which documents are you referring to? Is there an overview? (I can’t spot any pointers scanning this thread.)

[svgeesus]

Hi @j9t this document which is linked from the first post in this issue

[j9t]

Leaving some feedback here that I couldn’t quite leave in the doc. This was a first scan, I’m on standby to help where I can.

• General feedback: This is already great! You’ve collected a huge wealth of information and the doc will make more for a meaningful snapshot of where we are with CSS in 2020. I think everyone interested in CSS can and should look forward to this chapter.

• Structure: On reading I found the impact of the different sections to be a bit “volatile”—maybe it’s already on your radar, perhaps on the editors’, however revisiting the order of the sections could make it easier to work with.

• Style (up to the editors, but this one stood out): The chapter uses many exclamation marks (47 on searching) 😅

• Contents, side note: I hope I raised this in the very beginning—do you plan to look into CSS DRYness (ratio unique/total declarations)? Though convinced in the value of looking at this, I’m mostly curious. I understand the chapter to be quite comprehensive already.

• Reviewing: Many missing numbers as well as lack of graphics currently makes reviewing very difficult—to summon all reviewers it may be helpful to get this all into place, or to ask for very specific reviews to use us reviewers effectively.

[rachelandrew]

I just added an initial draft of layout.

Is someone doing a copy edit of this? I know we have tech editors/reviewers.

[tunetheweb]

Yes there will be a copy edit once Authors and Reviewers are finish and have converted to Markdown and committed it to Git - see #1432 .

The expectation, however, is that the Authors and Reviewers have it in a state they'd be happy to publish, to help ease that load on editing and then copy editing is to get a consistent style across the chapters and have an independent pairs of eyes on it from a readability perspective, outside of the main content team for that chapter. Still the editing process can take a fair bit of time as we ask Authors to review all the edits to make sure they are happy with the suggested changes and we haven't introduced any inaccuracies. More details of the process and what we typically look for in the Editor's Guide.

But that's ahead of us. Let's get the draft in a state you all are happy with, and then convert to Markdown, and then we can look at editing.

Btw if we have any professional editors then we'll gladly accept any more help in the editing team for other chapters 😉

[LeaVerou]

• General feedback: This is already great! You’ve collected a huge wealth of information and the doc will make more for a meaningful snapshot of where we are with CSS in 2020. I think everyone interested in CSS can and should look forward to this chapter.

Thank you!

• Structure: On reading I found the impact of the different sections to be a bit “volatile”—maybe it’s already on your radar, perhaps on the editors’, however revisiting the order of the sections could make it easier to work with.

Could you elaborate? Is there a different order you'd recommend?

• Style (up to the editors, but this one stood out): The chapter uses many exclamation marks (47 on searching) 😅

I do like my exclamation marks 😛 But feel free to remove any obviously superfluous ones (or use the "suggest edits" feature if you’re not comfortable directly removing)

• Contents, side note: I hope I raised this in the very beginning—do you plan to look into CSS DRYness (ratio unique/total declarations)? Though convinced in the value of looking at this, I’m mostly curious. I understand the chapter to be quite comprehensive already.

It's a little late to add additional metrics, the call for metrics was in July... However I'm intrigued by this and I think it could be an interesting metric. I could try to sneak it in at the last moment, but I'll need your help. Could you please open an issue here and elaborate a little on the algorithm you envision (is it just number of unique declarations? What kind of normalization would we do?), how you'd interpret the data, and what kind of visualizations would be helpful. I can't promise anything, but I'll try.

I assume you're criticizing this repetition when it comes to CSS as an output target, since when authoring DRY is not the begin all and end all, but repetition can aid understandability.

• Reviewing: Many missing numbers as well as lack of graphics currently makes reviewing very difficult—to summon all reviewers it may be helpful to get this all into place, or to ask for very specific reviews to use us reviewers effectively.

Oh ok. In most of my experience writing and reviewing, most figures tended to come after review, and existed solely as placeholders during the review stage. However, if reviewers feel it's best to wait until visualizations are in place and the document is in better shape, that's fine too. In general though, the more fleshed out a draft is, the harder it is to iterate and make drastic changes (not just in writing; e.g. in usability initial user studies and iterations are often done on paper prototypes).

[j9t]

I filed LeaVerou/css-almanac#54 for declaration repetition.

On the other items I’ll either follow up in the doc or wait for additional calls for review to check again.

[LeaVerou]

Hi everyone,

I figured I'd post a progress update. At this point, we have most of the visualizations and missing numbers in place, and the draft is in much better shape. These are the things that still need to be done, please let me know if I'm forgetting anything:

• Introduction & conclusion (@LeaVerou though input from everyone is more than welcome!)
• Responsive Web Design section (@rachelandrew)
• Finishing Internationalization (@svgeesus)
• Missing number: "Almost every SCSS sheet (??%) uses at least one explicitly nested selector" (@rviscomi or @LeaVerou)
• A few visualizations and comments to address here and there
• Figure captions for figures whose caption is not identical to the chart title
• Descriptions for figures
• If there’s time: Stats & paragraph for declaration repetition (@j9t, @LeaVerou)

8 days left until launch!

[rachelandrew]

I'll finish the RWD section tomorrow, sorry for the delay. I'd offered to do it then assumed someone else was, however I'll get it done.

[LeaVerou]

@j9t Good news: I did manage to query declaration repetition, you can find the results in this sheet: https://docs.google.com/spreadsheets/d/1sMWXWjMujqfAREYxNbG_t1fOJKYCA6ASLwtz4pBQVTw/edit#gid=2124098640
There are percentiles, for number of declarations, unique declarations, and ratios.

Do you think you'll be able to add a paragraph on it by tomorrow, either in the Meta section, or in the Usage section (I think it would fit in either)?

[j9t]

https://docs.google.com/spreadsheets/d/1sMWXWjMujqfAREYxNbG_t1fOJKYCA6ASLwtz4pBQVTw/edit#gid=2124098640

Awesome! Very cool to see this. Happy to write down something. I’d have a question related to the data though—can you give me comment access? (I need to check on “unique_ratio” and why it doesn’t seem to reflect unique/total—maybe I miss something silly, maybe there’s something we need to update.)

[rviscomi]

Granted!

[LeaVerou]

Hi everyone,

2 days until launch! 🚀

Dear reviewers (@fantasai @mirisuzanne @j9t @catalinred @hankchizljaw),
This is a last call for review: tomorrow we will need to move the draft to Markdown, so please please please make sure to take a look at some point today if you haven't already. Review can still continue on the MD article, but it will be a bit more hassle than just leaving comments or proposing changes on Google Docs. Even if you don't have time to review the entire thing, some review is better than none.

A few sections need work still:

• The introduction & conclusion are not finished yet, but I will finish them today.
• The i18n section is not finished yet, but @svgeesus will finish it today.

Apart from that, the rest should be ready for review (though tweaks will still happen), so you might want to review earlier rather than later, and if there's time, take a look at the sections above later in the day.

Unfortunately, we will need to launch before copyediting and will thus have an "Unedited" label for the first few days. I decided that the tradeoff of getting more time for content review was worth it.

As you may guess by the rush, we're a bit behind schedule, but a) this is by far the largest chapter (> 3x bigger than the average chapter I believe) and b) compared to many other chapters, we're doing well. One thing to keep in mind is that the launch date is a very hard deadline, moving it even a day later is not an option, we will need to launch on December 9th with whatever we have.

Thank you all for your efforts, both throughout the last few months, and now for the home stretch!

[LeaVerou]

Hi again folks!

1 day until launch! 🚀

The draft is now basically done (besides a couple of pending figures) so it's time to convert it to Markdown.
I would like to ask all of you to go in the doc and convert any links you see to Markdown links, any inline formatting to Markdown (adding asterisks as necessary), surround any inline code with backticks and so on.
Most of it is already in Markdown, but not all. If we all work on this as soon as possible, porting it into the draft on Github will be very quick!

Thank you everyone for all your hard work on this! It's shaping up to be a great chapter!