[Take you to see the technical trends of the CSS ecosystem] state-of-css 2021 detailed interpretation

1. Write in front

• The data source of this article is state-of-css , which is a very influential and large-scale data survey in the front-end ecosystem.
• Since the topic of css is very large and involves many technologies, many technologies that can be deeply explored can only be briefly mentioned, but those that can appear in state-of-css are all technologies that have certain flash points and certain popularity. If you are interested, you can learn more about it.
• Although the state-of-js survey has been postponed to January (because the investigators are all on vacation), I still hope that everyone will support and fill out the questionnaire.

2. Statistics of investigators

This year's state-of-css survey returned a total of 6112 survey reports. Thanks to an awesome team (of which I am also a member, responsible for the translation of the Chinese warehouse, everyone is welcome to join), we can translate the survey results into multiple languages.

2-1. Geographical Statistics of Investigators

It is worth noting that the questionnaires returned in China accounted for only 0.9% of all questionnaires. Although this figure is surprisingly consistent with last year’s survey, it does not mean that China’s front-end developers account for only 0.9% of the world’s total. In fact, According to the downloads of antd and cnpm, the visual estimate accounts for about 10%.
It is precisely because of this that when we see this survey data, we may have the feeling of "Hey, this framework is very popular in the report, but no one around me uses it".
But it doesn't matter too much. After all, only by evaluating a technology from multiple angles can a more comprehensive conclusion be drawn.

2-2. Age Statistics of Investigators

This year's state-of-css survey also separately counted the age of developers. It can be seen that most of the front-end developers are between 24 and 34 years old, and 21.9% of the front-end developers are between 35 and 44 years old. . Although most of the developers who participated in this survey are foreign developers, and they will probably be younger if they are placed in China, I still think that looking at such a data can still alleviate some of our so-called "age anxiety". After all, there are still hundreds of 55+ grandpas writing CSS.

3. CSS Features

This graph, broken down by technology category, shows the adoption rate of various features.
The size of the outer circle represents the number of users who know about the feature, while the size of the inner circle represents the number of users who actually use the feature.

• In terms of layout (Layout), such as position, flexbox (elastic layout), grid (grid layout) have been widely adopted by everyone, but like @container (container query), subgrid (subgrid layout) are relatively unpopular , of no use to anyone.
• In terms of Shapes & Graphics, common image shape adjustment features such as object-fit and clip-path have been widely used, but color configuration functions such as color() are rarely used. up.
• In terms of Interactions, features like pointer-events have been widely used, but features like overflow-anchor (scroll anchoring) are relatively rare.
• In terms of typography and accessibility, features such as font-display that control font display methods and HTML accessibility features such as ARIA are used more often, and others are less popular. characteristic.
• Among other features, features like calc and css variables are also widely used by everyone.

3-1. Layout

The proportion of grid is gradually increasing at a rate of 10% per year. It can be seen that most developers are using it.

sticky has also been widely used by everyone, and it has an increase of 8% compared to last year. It is an artifact of sticky effects.

Not to mention flexbox, the penetration rate is almost 100%.

3-2. Graphics and images

There are more and more people using object-fit, with an annual increase of about 10%, which is very suitable for image adaptation.

The clip-path has also been increased by 7%, which is used for cropping the image area.

3-3. Interaction, Typesetting and Visibility

There are really no very common and explosive growth features among these three pieces of content. If you insist, there are only tabindex and ARIA (but they are actually HTML features...).

3-4. Other features

The usage rate of css variables has increased by 10% every year. With the increasing demand for front-end theme customization, I believe this feature will be more and more widely used by everyone.

The utilization rate of calc is almost 100%, and it is also a feature that everyone is using. After all, many responsive styles have to be calculated by it.

Comparison functions has a usage rate increase of 15% this year, which is the feature with the fastest usage rate increase this year. It also has a very eye-catching performance in responsive styles.

4. CSS technology

• Among the pre/post-processing frameworks, Sass is the most used and the most satisfied, while Less and Stylus are not so popular among developers.
• Among the CSS frameworks, Bootstrap is used by many people, but the satisfaction is not very good. Tailwind CSS is gradually becoming the mainstream and widely praised. Although the domestic framework antd is not used by so many people, the satisfaction is not bad.
• In the CSS-in-JS framework, the old frameworks CSS Modules, Styled components, and Emotion all performed well, but this year there is another dark horse vanilla-extract that deserves attention (however, it may be more appropriate to call it CSS-in-TS) .

4-1. Pre/post processing

Satisfaction: Usage

:

The pre-/post-processing framework has been very stable in recent years, there are no new changes, and no new "dark horses" appear, basically PostCSS, SaSS, Less, etc. If you insist on changes, you should That is, the satisfaction with Less is getting lower and lower, and more and more people are avoiding using Less.

4-2. CSS framework

Satisfaction:

Usability:

From the perspective of satisfaction, Tailwind CSS has been at the top of the list in recent years. Its atomized CSS feature is indeed very useful, but in China it is a bit of a "thunder and rain" meaning, maybe it is Because of the fast and rough front-end development style in China, developers write "throw away" CSS styles, so it is difficult to precipitate a set of atomic styles.
From the perspective of usage, the usage of Bootstrap is the best, 46% behind the second place. It can be said that everyone is using it, but its satisfaction is very low, and it is decreasing year by year. There is a kind of " The world has suffered from Bootstrap for a long time."
It's also worth mentioning that antd's satisfaction ranking and practicality ranking are steadily rising, which can be regarded as a domestic conscience framework (hope it will stop making Christmas eggs like moths).

4-3. CSS-in-JS framework

Satisfaction:

Usage:

From the satisfaction point of view, CSS-in-JS technology has killed a vanilla-extract dark horse, which should have a lot to do with the popularity of typescript in recent years. It can build type-safe styles and generate style files at compile time (this is much better than the runtime injection style framework of emotion). It is quite interesting to use as follows:

import {
    
     createTheme, style } from '@vanilla-extract/css';

const [themeClass, vars] = createTheme({
    
    
  color: {
    
    
    brand: 'blue'
  },
  font: {
    
    
    body: 'arial'
  }
});

const exampleStyle = style({
    
    
  backgroundColor: vars.color.brand,
  fontFamily: vars.font.body,
  color: 'white',
  padding
})

document.write(`
  <section class="${
      
      themeClass}">
    <h1 class="${
      
      exampleStyle}">Hello world!</h1>
  </section>
`);

However, because it is the latest framework, not many people use it yet, so you can wait and see first.
Old-fashioned frameworks such as CSS Modules, Styled components, and Emotion have seen a slight increase in usage, but a slight decline in satisfaction. However, I personally think that these tried-and-tested old-fashioned CSS-in-JS frameworks are still usable and good use.

5. Browser environment and equipment

The following picture shows which browsers developers will test in.

It can be seen that for mainstream browsers such as Chrome, Firefox, Safari, and Edge, developers basically have to test them, while for IE11, IE8, etc. There are few browsers (less than 10%) paying special attention to them.
In addition, our domestically produced UC browser is even on the list, and 0.5% of developers will specifically test on UC browser. . .

6. Developers’ views on CSS

6-1. CSS learning and development experience

Looking at these two pictures together, it is not difficult to see that developers think that CSS is getting more and more difficult, so that the experience of writing CSS has become slightly worse.

6-2. What do you mainly use CSS for?

It can be seen that most developers are still using CSS to build web applications, landing pages, design systems, blog sites, etc. to "beautify page styles", but such things as using CSS for animation effects and illustrations, and printing style layout Rarely seen anymore.

6-3. Pain points of CSS

Developers believe that the main pain points of CSS are:

• browser compatibility.
• Engineering, such as how to organize style files, eliminate useless styles, etc.
• The style of the form element.
• Responsive layout.
  These are actually common pain points, and I think solving these problems will be the main direction of CSS technology evolution in the future. Of course, there have been many excellent technical solutions to solve these problems, such as using bootstrap for responsive layout, using purify-css to remove useless styles in CSS, etc.

6-4. Features that CSS still lacks

The "lack" here does not refer to the features that are imagined out of thin air, but refers to the features that have been proposed but are not well supported by browsers. These features mainly include:

• Container query.
• parent selector.
• Better browser support.
• Native nested styles.
  Hope all major browsers can support these features as soon as possible.

7. The biggest highlight of CSS this year

7-1. The feature with the greatest improvement in usage rate

For example, the following style means that when 10vw is less than 20px, the minimum font size is 20px; when 10vw is greater than 40px, the maximum font size is 40px

body {
    
    
  font-size: clamp(20px,10vw,40px);
}

I have to say that css comparison functions are really delicious. It is really easy to use when making fonts and sidebar responsive styles. Most modern browsers also support this feature.

7-2. Technology with highest satisfaction

7-3. The most concerned technologies

8. Summary

The way CSS is written might change.
Over the years, innovation related to CSS styling has happened elsewhere than CSS itself, such as preprocessors, style libraries, etc. Although it is worth affirming that CSS itself has some welcome improvements, such as the flexbox, calc, and css variable features that have been almost 100% used just now, we still need to seek the preprocessing just mentioned in our daily development. with the help of CSS techniques such as browsers.

But changes are happening too, and the CSS language is undergoing changes and updates at an ever-increasing rate.

container query (container query) allows us to do responsive layout more finely, cascade layers (cascading layer) will make it easier for us to develop themed styles or manage complex styles, although they are currently supported by browsers The speed is very poor, but I believe these features will gradually become popular.

In addition, some recent new proposals such as @when/@else can bring us more and more flexible writing style possibilities.

Also, we're finally seeing some progress with css nesting (CSS Native Nesting). This will provide us with another way of working that is completely different from "using tools such as sass or less to implement CSS nesting".

All of this is suggesting that 2022 could be the year that changes the way CSS is written, and we'll have to wait and see.