css2021.yml

locale: en-US
translations:
  ###########################################################################
  # Introduction
  ###########################################################################

  - key: general.results.description
    t: The 2021 edition of the annual survey about the latest trends in the CSS ecosystem.

  - key: introduction.css2021
    t: |

      <span class="first-letter">D</span>o woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change?

      With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! 

      What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations!

      And now, let's see what CSS has been up to this year!

      *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!*

      <span class="conclusion__byline">– Sacha Greif</span>

  ###########################################################################
  # Tshirt
  ###########################################################################

  - key: sections.tshirt.title
    t: T-shirt

  - key: sections.tshirt.description
    t: |
      ## Support the Survey With the State of CSS T-Shirt

      Between the bad video quality, the bulky cassettes, and having to rewind, there's not much to miss about the VHS era. But one thing we *do* miss are the amazing 90s visuals that used to adorn blank VHS tapes. 

      But now, thanks to the talented Christopher Kirk-Nielsen you can enjoy all this retro radness while also celebrating your love for CSS at the same time!

  - key: tshirt.about
    t: About the T-shirt

  - key: tshirt.description
    t: |
      We use a high-quality, super-soft tri-blend shirt with a slim fit printed by our partners at Cotton Bureau.

  - key: tshirt.getit
    t: Get It

  - key: tshirt.price
    t: USD $29 + shipping

  - key: tshirt.designer.heading
    t: About the Designer

  - key: tshirt.designer.name
    t: Christopher Kirk-Nielsen

  - key: tshirt.designer.bio
    t: |
      Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!

  ###########################################################################
  # Sections Introductions
  ###########################################################################

  - key: sections.user_info.description
    t: |
      This year's survey reached **8,714** developers throughout the world, and in order
      to help highlight different voices and surface deeper insights, we made a special
      effort to provide new ways to break our data down.

  - key: sections.features.description
    t: |
      CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current
      crop of new features while looking forward to even more innovation in the next few years.

  - key: sections.technologies.description
    t: |
      With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that
      the category has managed to carve out its niche. Maybe the two sides of the front-end world are 
      not so far apart after all?

  - key: sections.tools_others.description
    t: |
      Picking a technology can often come down to a series of tough choices between 
      competing priorities, and this year we tried to capture this process using a new bracket-style question format.

  - key: sections.environments.description
    t: |
      Accessibility has long been an after-thought when it comes to web development, but many developers
      are now realizing that it should in fact be the foundation on which everything else rests.

  - key: sections.resources.description
    t: |
      Highlighting blogs, podcasts, and sites is fine, but this year we decided to go one step further
      and actually feature the people who make up the CSS community themselves!

  - key: sections.opinions.description
    t: |
      Whether it's pain points that hold you back today, or missing features that you hope to use
      tomorrow, this was your chance to vent and share your gripes with CSS!

  ###########################################################################
  # Charts
  ###########################################################################

  - key: options.features_categories.layout
    aliasFor: sections.layout.title
  - key: options.features_categories.shapes_graphics
    aliasFor: sections.shapes_graphics.title
  - key: options.features_categories.interactions
    aliasFor: sections.interactions.title
  - key: options.features_categories.typography
    aliasFor: sections.typography.title
  - key: options.features_categories.animations_transforms
    aliasFor: sections.animations_transforms.title
  - key: options.features_categories.accessibility
    aliasFor: sections.accessibility.title
  - key: options.features_categories.media_queries
    aliasFor: sections.media_queries.title
  - key: options.features_categories.other_features
    aliasFor: sections.other_features.title

  ###########################################################################
  # Notes
  ###########################################################################

  - key: blocks.gender.note
    t: |
      If you're interested in learning more, we [wrote a blog post](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) that addresses the survey's gender dynamics.

  - key: blocks.css_missing_features.note
    t: |
      You can explore the full dataset of answers to this question in [this side project](https://whatsmissingfromcss.com/).

  - key: blocks.source.note
    t: >

      This chart aggregates a mix of referrers, URL parameters, and freeform answers. 

      - State of JS: the [State of JS](https://stateofjs.com) mailing list.

      - State of CSS: the State of CSS mailing list; also matches `email`, `by email`, etc.

      - Work: matches `work`, `colleagues`, `coworkers`, etc.

  ###########################################################################
  # Awards
  ###########################################################################

  - key: award.feature_adoption_delta_award.comment
    t: With a **{value}** progression in 2021, CSS comparison functions are becoming a key part of every CSS developer's toolkit.

  # - key: award.tool_usage_delta_award.comment
  #   t: No other tool comes even close to Tailwind CSS's dramatic **{value}** progression over the last year.

  - key: award.tool_satisfaction_award.comment
    t: PostCSS takes the top spot once again with a **{value}** retention ratio.

  - key: award.tool_interest_award.comment
    t: With a **{value}** ratio, CSS Modules again generated the most interest among CSS developers this year.

  # - key: award.most_write_ins_award.comment
  #   t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall.

  ###########################################################################
  # Conclusion
  ###########################################################################

  - key: conclusion.css2021
    t: |
      <span class="first-line">The way you write CSS is about to change forever</span>

      For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. 

      But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. 

      [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. 

      When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule.

      And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working.

      All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come.

  - key: conclusion.css2021.bio
    t: Web developer and creator of Polypane

  ###########################################################################
  # Picks
  ###########################################################################

  - key: picks.my_pick
    t: "My 2021 Pick: "
  - key: picks.intro
    t: We asked members of the CSS community to share their “pick of the year”

  - key: picks.george_francis.name
    t: The CSS Paint API
  - key: picks.george_francis.bio
    t: Developer, writer, and generative artist.
  - key: picks.george_francis.description
    t: |
      The Paint API allows us to create images programmatically, 
      to use in our CSS. It unlocks a whole world of creativity, 
      and I am very excited about it!

  - key: picks.cassidy_williams.name
    t: Lynn Fisher
  - key: picks.cassidy_williams.bio
    t: Developer advocate, educator, and startup advisor.
  - key: picks.cassidy_williams.description
    t: |
      I'd love to pick Lynn Fisher. She's consistently surprised 
      and delighted the CSS community with her creative projects and experiments, 
      and I love how much folks can learn from her!

  - key: picks.josh_comeau.name
    t: Amelia Wattenberger
  - key: picks.josh_comeau.bio
    t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/).
  - key: picks.josh_comeau.description
    t: |
      Amelia is creating some of the most amazing 
      interactive blog posts about CSS and JS. 
      Check out this post about how percentages work in CSS!

  - key: picks.kevin_j_powell.name
    t: Stephanie Eckles
  - key: picks.kevin_j_powell.bio
    t: CSS Evangelist
  - key: picks.kevin_j_powell.description
    t: |
      I'm constantly blown away by Stephanie's continued initiatives 
      to help share her knowledge of modern CSS techniques, 
      as well as her contagious enthusiasm for CSS.

  - key: picks.manuel_matuzovic.name
    t: aspect-ratio
  - key: picks.manuel_matuzovic.bio
    t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev).
  - key: picks.manuel_matuzovic.description
    t: |
      All major browsers shipped support for aspect-ratio in 2021. 
      At first I underestimated it, but there are so many 
      situations where this property comes in handy.

  - key: picks.gift_egwuenu.name
    t: Kevin Powell
  - key: picks.gift_egwuenu.bio
    t: Frontend Developer and Content Creator
  - key: picks.gift_egwuenu.description
    t: |
      Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. 
      He does a really good job teaching CSS concepts in a way that's easy and fun 
      to understand.

  - key: picks.eric_w_bailey.name
    t: Miriam Suzanne
  - key: picks.eric_w_bailey.bio
    t: Inclusive Design and \#a11y advocate.
  - key: picks.eric_w_bailey.description
    t: |
      CSS is about to go from good to great. 
      Miriam's work on Container Queries and Cascade Layers is going 
      to revolutionize how CSS is written.

  - key: picks.samuel_kraft.name
    t: Vanilla Extract
  - key: picks.samuel_kraft.bio
    t: Frontend & design
  - key: picks.samuel_kraft.description
    t: |
      Lately I've loved working with Vanilla Extract, it's like CSS Modules but 
      fully typed with a magical developer experience.

  - key: picks.sacha_greif.name
    t: Open Props
  - key: picks.sacha_greif.bio
    t: State of JS and State of CSS creator
  - key: picks.sacha_greif.description
    t: |
      It's really cool to see the feedback loop between new CSS features and new 
      projects taking advantage of them! And I think Adam Argyle's Open Props 
      is a great use of Custom Properties (CSS variables).

  - key: picks.ahmad_shadeed.name
    t: Container Queries
  - key: picks.ahmad_shadeed.bio
    t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com)
  - key: picks.ahmad_shadeed.description
    t: |
      CSS container queries again! We got the chance to play with them in a browser. 
      Thanks to Miriam Suzanne for moving this forward! 
      I can't wait to use them without a flag.

  # - key: picks.georgedoescode.name
  #   t:
  # - key: picks.georgedoescode.bio
  #   t:
  # - key: picks.georgedoescode.description
  #   t: |

  - key: picks.adam_argyle.name
    t: CSS Noise
  - key: picks.adam_argyle.bio
    t: CSS at Google
  - key: picks.adam_argyle.description
    t: |
      CSS generated texture and randomness makes for unique and 
      interesting paint jobs in your design. 
      Noise tools have made the technique accessible.

  - key: picks.stephanie_walter.name
    t: Miriam Suzanne
  - key: picks.stephanie_walter.bio
    t: UX Researcher and CSS lover
  - key: picks.stephanie_walter.description
    t: |
      Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries.

  - key: picks.michelle_barker.name
    t: “Building a Color Scheme” by Adam Argyle
  - key: picks.michelle_barker.bio
    t: Senior Front End Developer
  - key: picks.michelle_barker.description
    t: |
      I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables.

  # - key: picks.christianoliff.bio
  #   t: Front-end developer for Trimble MAPS
  # - key: picks.christianoliff.description
  #   t: |
  #       One thing I've really started using and appreciating this year though is Purge CSS- an awesome tool for removing unused CSS. It can greatly reduce the size of your CSS, and its fast and easy to use.

  - key: picks.kilian_valkhof.name
    t: prefers-reduced-data
  - key: picks.kilian_valkhof.bio
    t: Web developer and creator of Polypane
  - key: picks.kilian_valkhof.description
    t: |
      We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do!

  # - key: picks.piccalilli_.bio
  #   t: Freelance designer & dev who runs piccalil.li
  # - key: picks.piccalilli_.description
  #   t: |
  #       This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.

  # - key: picks.piccalilli_.bio
  #   t: Freelance designer & dev who runs piccalil.li
  # - key: picks.piccalilli_.description
  #   t: |
  #       This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.

  # - key: picks.sarasoueidan.bio
  #   t: Independent UI/design engineer
  # - key: picks.sarasoueidan.description
  #   t: |
  #       My pick is a person, namely Rachel Andrew. She taught CSS Grid to a whole generation of developers.

  # - key: picks.5t3ph.bio
  #   t: Software Engineer @ Microsoft
  # - key: picks.5t3ph.description
  #   t: |
  #       In this conference talk, Manuel Matuzovic provides thoughtfully
  #       crafted examples that are engaging, approachable, and actionable.

  # - key: picks.hugogiraudel.bio
  #   t: Non-binary accessibility & diversity advocate
  # - key: picks.hugogiraudel.description
  #   t: |
  #       Fela is an amazing piece of software.
  #       It’s pretty powerful, relatively easy to use and very performant

  # - key: picks.foolip.bio
  #   t: Software Engineer @ Google
  # - key: picks.foolip.description
  #   t: |
  #       Sergio has recently fixed lots of Flexbox in WebKit and even some in Chromium,
  #       notably bringing flex gap to WebKit,
  #       which means that soon it will be available on all modern browsers.

  # - key: picks.jina.bio
  #   t: Design systems advocate and practitioner
  # - key: picks.jina.description
  #   t: |
  #       The media query to reduce motion, which helps avoid
  #       triggering dizziness and discomfort.

  ###########################################################################
  # Sponsors
  ###########################################################################

  - key: sponsors.frontendmasters.description
    t: Advance your skills with in-depth, modern front-end engineering courses.
  - key: sponsors.polypane.description
    t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease.
  - key: sponsors.google_chrome.description
    t: Thanks to the Google Chrome team for supporting our work.

  ###########################################################################
  # FAQ/About
  ###########################################################################

  - key: about.content
    t: >
      The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 responses. The survey is run by me, [Sacha Greif](https://sachagreif.com/), with help from a team of open-source contributors and consultants. 


      This year's logo and t-shirt were designed and animated by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).

      ### Survey Goals

      This survey, along with the [State of JavaScript](https://stateofjs.com/) survey, was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices. 


      As such, these surveys are focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why the features or technologies that are currently most widespread are not always included. 

      ### Survey Design

      The survey was designed in part based on last year's survey, with an open feedback period where the survey outline was discussed [on GitHub](https://github.com/StateOfJS/StateOfCSS-2020/issues/8). 

      All survey questions were optional. 

      ### Survey Audience

      The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily a mix of respondents from past surveys (alerted through a dedicated mailing list) and social media traffic. 

      ### Representativeness & Inclusivity

      While we believe it's important to give a voice to every community, the reality is that an open survey like this one will always struggle to properly represent everybody, especially when operating through systems that already carry their own inherent biases. 


      In order to counter-balance this, we are implementing three distinct strategies:


      - **Outreach**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current audience.

      - **Data Analysis**: through features like facets and variants, we're always trying to make it easier to surface the voices of any demographic segment, no matter how minoritized it might be in our data. 

      - **Barrier Lowering**: making the survey too long, inaccessible, slow to load, English-only, etc. can all contribute to imposing an "effort tax" that cuts off the parts of the community that can't afford to pay it. Fixing these issues can lower the barrier to entry and in the process make our audience more diverse. 

      ### Project Funding

      Funding from this project comes from a variety of sources:


      - **T-shirt sales**. 

      - **Sponsored links**: the links to recommended resources at the bottom of each page are provided by our partner [Frontend Masters](https://frontendmasters.com/).

      - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey.


      Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be greatly appreciated. I would especially like to work closely with more browser vendors, since they play such a central role in the web ecosystem.  

      ### Technical Overview

      You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb).

      - **Data collection**: custom [Vulcan.js](http://vulcanjs.org/) app.

      - **Data storage/processing**: MongoDB & MongoDB Aggregations.

      - **Data API**: Node.js GraphQL API. 

      - **Results Site**: [Gatsby](https://www.gatsbyjs.com/) React app.

      - **Data Visualizations**: [Nivo](https://nivo.rocks/) React dataviz library. 

      - **Type**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) and [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue).