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.
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
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.
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:
- light level
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.
These are CSS things I see percolating and/or always hot:
- Custom properties
- Atomic CSS-in-JS
- Design tokens