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
Top comments (4)
I think npm and GitHub are both ways to host CSS packages. Personally I would rather not have another package manager I have to manage. I remember the days of chaining Bower commands to npm install, and those were dark days indeed.
I am particularly excited to see what Houdini brings and if it will truly allow us to polyfill cutting edge CSS into today’s browsers.
Thanks for sharing your thoughts!
Great writeup, Adam! So exciting to get all of these powerhouse features! I agree, I think a dedicated CSS package manager will be necessary with all of the upcoming features. This is an awesome proposal if anyone is interested: github.com/tomhodgins/css-package-...
Great writeup! Can't wait for wider adoption of prefers- media queries and more browsers implementing subgrid!
I don't really see logical properties being such a game changer... cultural differences are usually so big that simply turning the layout around depending on writing-mode falls waaaay short and only makes internationalisation even more complicated.
I love the ideas mentioned in this article. As someone who is getting back into the dev space, these ideas just make sense and I can't wait to use them in my workflow.