5 CSS Predictions For 2020

Gap

Prediction: margins in stylesheets will decline as gap in stylesheets climb

Relinquishing spacing ownership to the parent container put the spacing logic in 1 place instead of scattered amongst the children. Gap came with CSS Grid, opened up our eyes, and is now part of the Flexbox spec. I foresee in 2020 that gap will become the primary way we space on the web. Furthermore, flexbox grid systems will move to gap based syntaxes.

Logical Properties

Prediction: margin/padding/border decline as their logical property counterparts climb

All y'all will be entering new dimensions in 2020: block and inline dimensions. 😂

With support across the board for logical properties, there's no reason your team shoudn't be adjusting their muscle memory to the new keywords. There's too much the team gets for free by switching to logical property syntax. It took me way less time to adjust my habits then I thought, so just do it!

Here's a tiny intro on what's in store for y'all:

• height/width 👉 block-size/inline-size
• margin/padding 👉 margin-block/margin-inline & padding-block/padding-inline
• borders 👉 border-block/border-inline
• overflow 👉 overflow-block/overflow-inline
• text-align 👉 start/end
• float 👉 block-start/inline-start/etc

Subgrid

Prediction: subgrid replaces flexbox hacks and javascript interventions

Firefox just released subgrid this week! In 2020, the rest of the browsers will need to ramp up and ship it too. It's a rad addition to the web's grid ecosystem. This is another feature destined to heavily influence CSS grid frameworks in 2020.

Media Queries

Prediction: more prefers-* media queries, more usage from designers

2019 brought OS level preferences to web pages. They were super well received by users and developers alike, and in 2020, I don't foresee this momentum slowing down. There's already more being specced, and you can already preview certain features at the OS level. Windows is really leading the charge in some of these efforts.

Here's a preview of some on the horizon:

• prefers-contrast
• prefers-reduced-transparency
• forced-colors
• light level
• foldables

Houdini

Prediction: more published paint/layout/animation worklets

Who doesn't want to teach CSS new tricks!? We've seen neat paint worklets over the past couple years, and I don't foresee that momentum dwindling. Expect more, fun, meaningful paint worklets to be created in 2020. But also, animation worklets, and layout worklets. Houdini is the most experimental and high performant place to go play with visuals on the web, sounds fun right!?

It's also "off the main thread", another trend I predict will be important and on the rise in 2020. This prediction get's some double crossover points for being interesting on multiple levels.

Hail Mary / Risky Prediction

For a final hurrah, I want to throw out that I think someone will make a CSS Package Manager. It will distribute and make consumable: traditional CSS files, CSS-in-JS modules, Houdini worklets, etc etc. Just as NPM made Javascript code bits searchable, shareable, consumable, etc.. so will CSS get one.

Honorable Mentions

These are CSS things I see percolating and/or always hot:

• Custom properties
• Atomic CSS-in-JS
• Design tokens