DEV Community

loading...
Cover image for 5 CSS Predictions For 2020

5 CSS Predictions For 2020

argyleink profile image Adam Argyle ・3 min read

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

Discussion (4)

pic
Editor guide
Collapse
falldowngoboone profile image
Ryan Boone

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!

Collapse
souporserious profile image
Travis Arnold

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-...

Collapse
facundocorradini profile image
Facundo Corradini

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.

Collapse
conermurphy profile image
Coner Murphy

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.