Skip to content

State of CSS 2026

Pain Points

Layout Pain Points

Similar to last year, Grid is the most frequently mentioned item when it comes to layout pain points. This is a reflection both of its increased usage (having now become the default CSS layout method for many developers), but also of its undeniable learning curve.

And while widespread Subgrid browser support is certainly welcome, that feature does add one more layer of complexity to an already-intricate layout system.

What are your top CSS pain points related to layout?
Multiple
Top pain point topics overall.

View:

Items that are not one of “limitations”
0%
20%
40%
60%
80%
100%
01
3
02
Browser vendor issues
4
03
1
+4
04
Element sizing
4
+19
05
Cognitive overload
4
06
Positioning
1
07
Responsive design
+1
08
+17
09
Positioning issues
10
Alignment issues
2
11
Developer Experience
12
Overflow
13
14
Height issues
-10
15
Stacking contexts & z-index
1
16
Typography
1
17
Education
1
18
19
Environments & Consumers
1
20
Table Styling
21
22
-9
23
Animations
24
Syntax issues
25
-13
0%
20%
40%
60%
80%
100%
% of question respondents
632
13%
25
5

Shapes & Graphics Pain Points

CSS is getting better and better at letting us go beyond the rectangle and draw all kinds of fancy shapes without having to resort to Canvas or even SVG.

The issue now is browser support: until all browsers implement these features, it'll be hard to convince developers to start using them.

What are your top CSS pain points related to shapes & graphics?
Multiple
Top pain point topics overall.

View:

Items that are not one of “limitations”
0%
20%
40%
60%
80%
100%
01
Browser vendor issues
3
02
Complex element shapes
3
03
SVG
2
04
Cognitive overload
4
05
2
06
Developer Experience
07
Education
2
08
1
09
-4
10
11
Syntax issues
12
CSS inside SVG
1
13
Element sizing
14
Rendering
15
16
Animations
17
Tooling
1
18
19
20
Bugs and stability issues
21
Typography
22
Positioning
23
Icons issues
24
1
25
0%
20%
40%
60%
80%
100%
% of question respondents
355
7%
25
5

Colors Pain Points

In recent years, CSS has given us many ways to define colors, with perceptually uniform polar color spaces like oklch, and features like relative colors, light-dark() or contrast-color() bringing closer the holy grail of UIs that can be dynamically recolored.

Unfortunately, without gamut mapping, color modifications often produce colors out of gamut, which drops all guarantees. As a result, there are many complaints not just about the lack of gamut mapping itself, but also about its consequences, such as dynamic theming still being tough or oklch colors being unpredictable.

What are your top CSS pain points related to handling colors?
Multiple
Top pain point topics overall.

View:

Items that are not one of “limitations”
0%
20%
40%
60%
80%
100%
01
Accessibility
1
02
Theming
3
03
Cognitive overload
6
04
Browser vendor issues
3
05
2
06
Color manipulation issues
3
+4
07
+8
08
Tooling
3
09
Syntax issues
10
RGB colors (hex, rgb() and rgba(), HSL etc)
11
1
12
Education
1
13
-1
14
15
16
Maintenance
1
17
Ecosystem issues
18
Contrast algorithms
19
Design systems
1
20
Data structures
21
Debugging
1
22
System colors
23
24
25
Cascade Management
0%
20%
40%
60%
80%
100%
% of question respondents
573
12%
25
5

Interactions Pain Points

Just like with shapes and graphics, interactions and animations is another area where browser support is lagging a bit behind.

CSS Carousels also generated some feedback, especially centered around accessibility concerns.

What are your top CSS pain points related to interactions?
Multiple
Top pain point topics overall.

View:

Items that are not one of “limitations”
0%
20%
40%
60%
80%
100%
01
Animations
8
02
Browser vendor issues
4
03
Accessibility
04
+8
05
Cognitive overload
4
06
-3
07
Reliance on JavaScript
+9
08
Developer Experience
09
Scrollbars
2
10
Element sizing
1
11
Syntax issues
12
Input element issues
1
13
Education
1
14
Scope Creep
15
Performance
-1
16
Environments & Consumers
1
17
Tooling
1
18
-5
19
Bugs and stability issues
20
Poor developer experience
21
Touch & pointer gestures
22
Debugging
23
:active, :focus, and :hover
24
-4
25
Technical issues
1
0%
20%
40%
60%
80%
100%
% of question respondents
429
9%
25
5

Other Features Pain Points

Besides being the top three most-mentioned features in this category, what Cascade Layers, CSS Nesting, and if() have in common is that they all have the potential to drastically change how we write CSS code.

Despite that, respondents were overall fairly enthusiatic about adopting them, mainly being held back by the lack of proper browser and tooling support.

What are your top CSS pain points related to the features mentioned above?
Multiple
Top pain point topics overall.

View:

Items that are not one of “limitations”
0%
20%
40%
60%
80%
100%
01
Browser vendor issues
4
02
Cognitive overload
3
03
Education
1
04
Cascade Management
1
05
-3
06
Tooling
1
07
08
Conditional logic
1
09
1
10
Custom Functions
1
11
12
-7
13
-10
14
15
Separation of Concerns
16
Preprocessors
1
17
Bugs and stability issues
18
display: contents
-10
19
Developer Experience
20
children-count()
21
Accessibility
0%
20%
40%
60%
80%
100%
% of question respondents
231
5%
5

General CSS Pain Points

While Browser issues are once again very present in people's mind, it's worth noting how many respondents reported general cognitive overload issues, with many worrying about CSS becoming excessively complex. A very understandable worry given the language's high speed of change, and the rate at which new features have been added over the past few years.
Any other pain points related to writing CSS?
Multiple
Top pain point topics overall.

View:

Items that are not one of “limitations”
0%
20%
40%
60%
80%
100%
01
Cognitive overload
7
02
Browser vendor issues
4
03
Tooling
3
04
Maintenance
1
+18
05
Education
3
06
Syntax issues
07
Ecosystem issues
2
08
AI tools
09
Cascade Management
1
10
+3
11
Debugging
12
Animations
13
+1
14
Element sizing
2
15
Positioning
1
16
Developer Experience
17
Specificity
18
Inconsistencies across web platform features
19
Environments & Consumers
20
Theming
21
Performance
-12
22
CSS layout issues
1
23
Community issues
24
Color management
25
Custom Functions
1
0%
20%
40%
60%
80%
100%
% of question respondents
398
8%
25
5

Recommended Resources

Ultimate CSS Grid & Layout Techniques, v3
Jen Kramer
AnnieCannons

Ultimate CSS Grid & Layout Techniques, v3

CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. With its two-dimensional structure, precise positioning, and overlapping elements, you’ll learn to achieve complex layouts with minimal code.
CSS Animations and Transitions
David Khourshid
Microsoft

CSS Animations and Transitions

Learn CSS animation basics and transition to advanced concepts like orchestration and choreography.
Sponsored content from our partners. Learn more.