Over the years, CSS and its community have grown from just stylesheets to a whole ecosystem of technologies that spans frameworks like Bootstrap and Materialize to preprocessors like Sass and Less and even recent concepts like CSS-in-JS. Frontend web development in 2020 no longer involves simply writing CSS, but also knowing the technologies and which to use in any given scenario.
The inaugural “State of CSS 2019” survey records and beautifully illustrates the opinions of today’s CSS users around the globe. The data points cover CSS libraries and frameworks, features, unit and selectors, and a whole lot more.
The report offers a glimpse into the future of frontend development, focusing entirely on CSS. In my opinion, the “State of CSS” report is already the premier CSS-only developer survey, and I’m hopeful that it will be a staple of the frontend developer community for years to come.
In this piece, we’ll take a look at the most in-demand CSS technologies for 2020 and developers’ orientation around concepts in CSS like preprocessors, frameworks, and the new and shiny CSS-in-JS.
Over 10 years ago, there was a new development in CSS where core rules were overwritten and new features were created to form a new technology called preprocessors. Quite recently, a revolutionary new technology came on board called CSS-in-JS.
CSS-in-JS lets you you style your presentation with JavaScript instead of CSS. Then, when your application is run, the JavaScript is parsed and generates CSS, which is attached to your DOM directly. This helps with abstracting CSS to the level of components and making your styles maintainable. It is all the rage in the CSS community; here are some of the most-used technologies.
styled-components is a CSS-in-JS library that helps you use visual primitives and the best of the modern browser technologies to style your React components. It is a kind of optimized CSS enhancement for styling your application components that would remind you of CSS modules.
It is used by more than 200,000 projects, and it has a strong and rapidly growing community. According to the survey insights, up to 79 percent of all CSS users have heard about it (which is pretty amazing, considering it landed just three years ago), and a whopping 33 percent of them are repeat users. Another 26 percent would want to learn it.
Here is an article I wrote a while back about styled-components.
CSS Modules are CSS files inside which class names and transforms are scoped locally, and all links and imports are in the module request format, like this:
import styles from "./style.css";
// import { className } from "./style.css";
They compile to a low-level interchange format called Interoperable CSS but are written like normal CSS files:
.danger-heading {
color: red;
}
When importing the CSS Module from a JS module, it exports an object with all mappings from local names to global names. It has been used by 21 percent of the respondents and has been starred 13,000 times on GitHub. There is a big awareness gap here, which can be a great opportunity for the team to release more resources to help educate CSS users.
According to the official Next.js blog, Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won’t affect other components, allowing you to add, change, and delete styles without worrying about unintended side effects.
With an impressive 350,000 weekly downloads and currently used by 51,000 projects, according to GitHub data, there is great prospect of adoption in the near future. Currently about 54 percent of the surveyed CSS users have not heard about it, so I believe this number will change significantly by the end of 2020.
Other CSS-in-JS libraries include JSS, Emotion, Aphrodite, and Radium.
A much longer while ago in the history of CSS came Sass and Less. These preprocessors introduced new features that had never before been used in CSS, like variables and the amazing concept of nesting styles as in programming languages. These all happened way before CSS started to catch up to them.
Sass identifies as the most mature, stable, and powerful professional-grade CSS extension language in the world. It is compatible with all CSS versions, it’s been regularly maintained for about 13 years now, and it has so many cool features. A lot of frameworks are built on top of Sass, one of which is Compass.
Currently Sass is used by over 1.5 million projects, which constitutes about 80 percent of the survey respondents — dare I say, everybody loves Sass.
Leaner Style Sheets, popularly known as Less, is another great CSS extension that uses Less.js to convert Less styles to CSS styles. It introduces core JS concepts like mixins and variables to CSS, which makes it easy for JavaScript developers to grasp. When run, it preprocesses the styles to pure CSS.
Currently used by over 1 million projects, over 98 percent of CSS users have heard of it, with 25 percent of them being repeat customers and 11 percent willing to learn.
Another preprocessor library you might want to check out is Stylus, which also has a growing community.
No discussion of CSS technologies would be complete without a nod to user interface toolkits like Bootstrap. These make life easy for CSS users, especially beginners that want to build a client-facing user interface. In this section, we look at some of these frameworks that are in heavy demand.
Bootstrap is an open-source, mobile-first toolkit for developing with HTML, CSS, and JS. You can quickly prototype your ideas or build your entire app with Sass variables and mixins, the responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
It is currently used by more than 1.3 million users, and a whopping 45 percent are return users, according to the survey insights. Over the years, some people have moved to newer and more interesting frameworks, but Bootstrap still retains a significant user base.
Semantic UI is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. With concise HTML, Semantic UI treats words and classes as exchangeable concepts. It is used by over 11,000 projects and over 64 percent of CSS users have heard about it, with another 21 percent willing to learn.
Bulma is a free, open-source CSS framework based on Flexbox and used by more than 200,000 developers. It is 100 percent responsive, mobile-focused, modular, and open-source. Currently used by over 86,000 projects, 10 percent of survey respondents report having used Bulma more than once. With 460,000 monthly downloads, the Bulma community is growing, and there is an awareness opportunity for the community to grow even wider.
Pure.css is a set of small, responsive CSS modules you can use in every web project. Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. Pure is really tiny — the entire set of modules clocks in at 3.8kB minified and gzipped.
Currently used by over 3,000 projects, over 18 percent of the surveyed CSS users have either used it or want to learn it.
Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
Currently used by more than 25,000 projects, it is the most in-demand CSS framework according to the survey’s interest indication metrics, with 14 percent of surveyed CSS users wanting to learn to use it.
Other CSS frameworks include Materialize, Foundation, Ant design, UI Kit, Primer, and Tachyons.
In this piece, you have been shown various CSS technologies and how in-demand they are in the community, from CSS-in-JS to preprocessors and even frameworks. CSS-in-JS is one of the latest technologies to hit the CSS community, and I am excited for the future of this technology, especially for the growth of libraries and frameworks like styled-components and Tailwind CSS. What are your favorite CSS technologies? Let us know in the comments!
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]
Generate OpenAPI API clients in Angular to speed up frontend development, reduce errors, and ensure consistency with this hands-on guide.
Making carousels can be time-consuming, but it doesn’t have to be. Learn how to use React Snap Carousel to simplify the process.
Consider using a React form library to mitigate the challenges of building and managing forms and surveys.
Learn more →
