CSS users have a lot to reconsider when it comes to the changes this year, according to the recently released State of CSS 2020 report. The report found that CSS has “seen a surge of new features” over the last couple of years.

“Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you’ve been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to,” the team behind the State of CSS 2020 wrote in its findings.

For instance, users can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. 

Instead of relying on global stylesheets, CSS-in-JS lets users collocate styles with components to build themeable design systems. 

“Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names,” the team wrote. “The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic.” 

The features with the closest ratio of users knowing about it and actually using it went to @font face and Line Breaking Properties on the typography front. Other highly used features include FlexBox, Transitions, Transforms, Animations, and calc(). 

Meanwhile the features with the lowest usage ration include color-gamut, CSS Houdini, Contain, and Subgrid. 

The survey found that the majority of respondents knew between 50-70% of the features mentioned in the survey. According to the team, “you’d expect adoption is lagging a bit behind as the community takes its time to absorb new properties.” 

CSS Grid Layout, which excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives saw a large jump in usage from 54.7% last year to 73.3% this year. 

Also, CSS Flexible Box Layout, which is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension inched up 3% from last year and landed at 97.5% of respondents using it.

The technologies that saw large usage and a high satisfaction percentage included PostCSS, Sass, Styled Components, and BEM. The infrequently used and poorly rated technologies included Radium, Foundation, Fela, and Styletron.

Chrome was the most widely used browser for testing, followed by Firefox and Safari.

“Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. Building a complex React app? Styled Components is a great option. Designing a static landing page? You can’t go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can’t beat it when it comes to sheer number of themes and plugins,” the CSS 2020 team wrote. “So while we keep an eye on the shiny new toys popping up on GitHub every week, let’s not forget the tools, techniques, and most of all people who have carried the CSS torch up to now.”