5 CSS Predictions For 2020


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

Relinquishing spacing possession to the mum or dad container put the spacing logic in 1 place as an alternative of scattered amongst the kids. Hole got here with CSS Grid, opened up our eyes, and is now a part of the Flexbox spec. I foresee in 2020 that hole will develop into the first method we house on the internet. Moreover, flexbox grid methods will transfer to hole primarily based syntaxes.

Logical Properties

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

All y’all will likely be coming into new dimensions in 2020: block and inline dimensions. 😂

With support across the board for logical properties, there isn’t any purpose your staff shoudn’t be adjusting their muscle reminiscence to the brand new key phrases. There’s an excessive amount of the staff will get totally free by switching to logical property syntax. It took me method much less time to regulate my habits then I assumed, so simply do it!

Here is a tiny intro on what’s in retailer for y’all:

  • peak/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 👉 begin/finish
  • float 👉 block-start/inline-start/and so on


Prediction: subgrid replaces flexbox hacks and javascript interventions

Firefox simply launched subgrid this week! In 2020, the remainder of the browsers might want to ramp up and ship it too. It is a rad addition to the online’s grid ecosystem. That is one other characteristic destined to closely affect CSS grid frameworks in 2020.

Media Queries

Prediction: extra prefers-* media queries, extra utilization from designers

2019 introduced OS stage preferences to net pages. They have been tremendous effectively acquired by customers and builders alike, and in 2020, I do not foresee this momentum slowing down. There’s already more being specced, and you may already preview sure options on the OS stage. Home windows is de facto main the cost in a few of these efforts.

Here is a preview of some on the horizon:

  • prefers-contrast
  • prefers-reduced-transparency
  • forced-colors
  • mild stage
  • foldables


Prediction: extra revealed paint/format/animation worklets

Who would not wish to train CSS new methods!? We have seen neat paint worklets over the previous couple years, and I do not foresee that momentum dwindling. Anticipate extra, enjoyable, significant paint worklets to be created in 2020. But additionally, animation worklets, and format worklets. Houdini is essentially the most experimental and excessive performant place to go play with visuals on the internet, sounds enjoyable proper!?

It is also “off the primary thread”, one other development I predict will likely be necessary and on the rise in 2020. This prediction get’s some double crossover factors for being attention-grabbing on a number of ranges.

Hail Mary / Dangerous Prediction

For a last hurrah, I wish to throw out that I feel somebody will make a CSS Package deal Supervisor. It is going to distribute and make consumable: conventional CSS recordsdata, CSS-in-JS modules, Houdini worklets, and so on and so on. Simply as NPM made Javascript code bits searchable, shareable, consumable, and so on.. so will CSS get one.

Honorable Mentions

These are CSS issues I see percolating and/or at all times scorching:

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

Sore eyes?

dev.to now has darkish mode.

Go to the “misc” part of your settings and choose night time theme ❤️

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *