Here is a summary of the key points from the Hacker News post on the state of CSS in 2022:
Positive Sentiment
-
Many people are excited about new features like container queries, cascade layers, :has() selector, and color spaces beyond sRGB. These will enable new kinds of responsive designs and solve pain points in managing large codebases.
-
There is appreciation for how much CSS has evolved, becoming more powerful and easier to use compared to the early days. Browsers are also getting better at shipping new features consistently.
-
Some see great potential in upcoming features like subgrid and masonry layout to simplify common layout tasks that currently require hacks.
Negative Sentiment
-
There are complaints about CSS getting too large, complex and bloated. Some feel many new features are useless or overcomplicated for most use cases.
-
Concerns about how certain features could be misused, like accent-color overriding styling for accessibility, or inert disabling interaction.
-
Frustration that basic things are still lacking, like constraints-based layout. Also complaints about grid being too cryptic compared to tables.
-
Dissatisfaction with the pace of adoption, as exciting features remain unsupported on mobile browsers. Interop issues between browsers persist.
Recommended Actions
-
Prioritize development of highly-demanded features like subgrid, mixins, and aspect ratio. Ensure good browser compatibility.
-
Write more explanatory docs and tutorials to aid adoption of newer features.
-
Simplify and refine overly complex areas of the spec like grid layout.
-
Engage with accessibility experts to prevent misuse of features.
-
Add developer tools to support debugging new features.
-
Set up services to transpile future CSS for older browser support.
-
Conduct more outreach to gather feedback from CSS developers on pain points.
Interesting links:
-
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (A Complete Guide to Flexbox)
-
https://css-tricks.com/almanac/properties/a/aspect-ratio/ (CSS aspect-ratio Property)
-
https://www.w3.org/TR/css-nesting-1/ (CSS Nesting Module)
-
https://web.dev/learn/css/grid/ (Learn CSS Grid)
-
https://www.w3.org/TR/css-cascade-5/ (CSS Cascading and Inheritance Level 5)
I lead the Chrome Developer Relations team at Google.
We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.
Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.