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
+21
05
Positioning
2
06
Cognitive overload
4
07
Responsive design
+1
08
09
Positioning issues
10
Developer Experience
11
Overflow
12
Masonry Layout
-7
13
width and height
14
15
Alignment issues
1
-5
16
Stacking contexts & z-index
17
18
Typography
1
19
Education
1
20
21
Environments & Consumers
1
22
Table Styling
23
24
-11
25
Animations
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
09
-4
10
11
Syntax issues
12
CSS inside SVG
1
13
Element sizing
14
Rendering
15
16
Animations
17
Advanced borders
18
Tooling
1
19
20
21
Bugs and stability issues
22
Typography
23
Positioning
24
Icons issues
25
1
0%
20%
40%
60%
80%
100%
% of question respondents
355
7%
25
5

Colors Pain Points

In recent years, CSS has given us many innovative ways to define colors. The challenge now seems to be finding ways to actually use this new rainbow of possibilities without turning our stylesheets into a mess of color theory math formulas.

This is where Theming comes in, especially as we move away from the binary light/dark duality, towards a conception of themes that also takes proper contrast and accessibility into account.

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
2
02
Theming
2
03
Cognitive overload
6
04
Browser vendor issues
3
05
2
06
+4
07
+9
08
Tooling
3
09
+9
10
Syntax issues
11
RGB colors (hex, rgb() and rgba(), HSL etc)
12
1
13
Education
1
14
-1
15
16
Color manipulation issues
1
-5
17
18
Color conversion
19
Maintenance
1
20
Ecosystem issues
21
Design systems
1
22
Data structures
23
Debugging
1
24
25
-1
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
Interaction-state pseudo-classes
22
Touch & pointer gestures
23
Debugging
24
:active, :focus, and :hover
25
-5
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
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
Cascade Management
22
Accessibility
0%
20%
40%
60%
80%
100%
% of question respondents
231
5%
5

Other 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
+4
10
Debugging
11
Animations
12
Cascade Management
13
+1
14
Element sizing
1
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
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.