State of CSS 2024 Outcomes

They’re out! Like a lot of you, I sit up for these popping out annually. I don’t put a lot inventory in surveys however they are often insightful and provides a snapshot of the CSS zeitgeist. There are a number of little nuggets on this yr’s outcomes that I discover fascinating. However earlier than I get there, you’ll need to additionally try what others have already written about it.

Josh Comeau digested his takeaways in a current e-newsletter.

Oh, I assume that’s it — at the least it’s probably the most formal write-up I’ve seen. There’s somewhat abstract by Ahmad Shadeed on the finish of the survey that usually rounds issues up. I’ll drop in additional hyperlinks as I discover ’em.

In no specific order…

Demographics

Josh has far more poignant ideas on this than I do. He rightfully calls out discrepancies in gender pay and regional pay, the place males are far more compensated than girls (a nonsensical and frustratingly endless development) and the US boasts extra $100,000 salaries than anyplace else. The international locations with the best salaries have been additionally probably the most represented in survey responses, so maybe the outcomes aren’t any shock. We’re primarily taking a look at a snapshot of what it’s wish to be a wealthy, white male developer within the West.

In addition to pay, my eye caught the Age Group demographics. As an getting old front-ender, I typically surprise what all of us do once we lastly get to retirement age. I formally dropped from probably the most represented age group (30-39, 42%) a number of years in the past into the third most represented tier (40-49, 21%). Lengthy gone are my days being with the cool youngsters (20-29, 27%).

And if the distribution is true to life, I’m using quick into my sundown years and can be solely barely extra represented than these moving into the career. I don’t know if anybody else feels equally anxious about getting old on this business — however in case you’re one of many 484 of us who establish with the 50+ age group, I’d love to speak with you.

Earlier than we plow forward, I feel it’s value calling out how comparatively “new” most individuals are to front-end improvement.

Wow! Forty-freaking-four % of respondents have lower than 10 years of expertise. Sure, 10 years is a excessive threshold, however we’re nonetheless speaking a few career that popped up in current reminiscence.

For perspective, somebody growing for 10 years got here to the sphere round 2014. That’s simply once we have been getting Flexbox, and several other years after the massive bang of CSS 3 and HTML 5. That’s just below half of builders who by no means needed to cope with the complications of desk layouts, clearfix hacks, picture sprites, spacer pictures, and rasterized rounded corners. Ethan Marcotte’s seminal article on “Responsive Internet Design” predates these of us by a whopping 4 years!

That’s simply wild. And thrilling. I’m a agency believer in the following era of front-enders however all the time hope that they study from our previous errors and develop into masters on the fundamentals.

Options

I’m not completely positive what to make of this part. When there are such a lot of CSS options, how do you establish that are most generally used? How do you pare it down to only 50 options? Like, are filter results actually probably the most broadly used CSS characteristic? So many questions, however the outcomes are all the time fascinating nonetheless.

What I discover most fascinating are the underused options. For instance, hanging-punctuation is available in useless final in utilization (1.57%) however is the characteristic that the majority builders (52%) have on their studying checklist. (If you happen to want some studying materials on it, Chris initially revealed the Almanac entry for hanging-punctuation again in 2013.)

I additionally see Anchor Positioning on the finish of the lengthy tail with reported utilization at 4.8%. That’ll go up for positive now that we now have at the least one supporting browser engine (Chromium) but additionally given the entire tutorials which have sprung up up to now few months. Sure, we’ve contributed to that noise… but it surely’s good noise! I feel Juan revealed what could be probably the most thorough and considerate information on the subject but.

I’m excited to see Cascade Layers falling smack dab in the course of the pack at a reasonably sturdy 18.7%. Cascade Layers are tremendous approachable and elegantly designed that I’ve bother believing anyone as of late once they say that the CSS Cascade is troublesome to handle. And although @scope is at the moment low on the checklist (4.8%, identical as Anchor Positioning), I’d wager the crumpled gum wrapper in my pocket that the general sentiment of working with the Cascade will enhance dramatically. We’ll nonetheless see “CSS is Superior” memes galore, however they’ll be extra like outdated acquainted dad jokes in good time.

(Apart: Did you see the proposed designs for a brand new CSS brand? You’ll be able to vote on them as of yesterday, however earlier variations performed off the “CSS is Superior” imply fairly superbly.)

Curiously sufficient, viewport items are available in at Quantity 11 with 44.2% utilization… which lands them at Quantity 2 for many expertise that builders have with CSS format. Does that counsel that format options are much less broadly used than CSS filters? Once more, so many questions.

Frameworks

What number of of you have been stunned that Tailwind blew previous Bootstrap as Prime Canine framework in CSS Land? No one, proper?

Extra fascinating to me is that “No CSS framework” clocks in at Quantity 13 out of 21 checklist frameworks. Positive, its 46 votes are dwarfed by the 138 for Materials UI at Quantity 10… however the truth that we’re seeing “no framework” as a rating possibility in any respect would have been unimaginable simply three years in the past.

The identical goes for CSS pre/post-processing. Sass (67%) and PostCSS (38%) are the facility gamers, however “None” is available in third at 19%, forward of Much less, Stylus, and Lightning CSS.

It’s an actual testomony to the nice work the CSSWG is doing to make CSS higher on daily basis. We don’t thank the CSSWG sufficient — thanks, crew! Y’all are heroes round these elements.

CSS Utilization

Josh already has a very good tackle the truth that solely 67% of parents say they check their work on cellphones. It ought to be at the least tied with the 99% who check on desktops, proper? Proper?! Who is aware of, perhaps some responses take into account issues like “Responsive Design Mode” desktop options to be the equal of testing on actual cell gadgets. I discover it arduous to imagine that solely 67% of us check cell.

Oh, and The Nice Divide continues to be alive and nicely if the outcomes are true and 53% write extra JavsScript than CSS of their day-to-day.

Lacking CSS Options

That is all the time a enjoyable subject to ponder. Among the most-wanted CSS options have been lurking round 10+ years. However let’s have a look at the highest three kind this yr’s survey:

Mixins

Conditional Logic

Masonry

We’re in luck crew! There’s motion on all three of these fronts:

A brand new CSS Capabilities and Mixins Module draft was revealed in late June after the CSSWG resolved to undertake the proposal again in February. (Learn our notes.)

The CSS Working Group (CSSWG) resolved so as to add an if() conditional to the CSS Values Module Stage 5 specification. (Learn our notes.)

There are competing proposals for learn how to forge forward with a CSS-y strategy to masonry layouts. One is predicated on the CSS Grid Structure Module Stage 3 draft specifcation and the opposite is a recent new module devoted to masonry. Apple has planted its flag. So has Chrome. Let the cage-match proceed!

Sources

That is the place I get to toot our personal horn a bit as a result of CSS-Tips continues to put first amongst y’all in relation to the blogs you observe for CSS happenings.

I’m additionally stoked to see Smashing Journal proper there as nicely. It was fifth in 2023 and I’d wish to suppose that rise is attributable to me becoming a member of the crew final yr. Correlation implies causation, amirite?

However have a look at Kevin Powell and Josh within the Prime 10. That’s simply superior. It speaks volumes about their educating skills and the arduous work they put into “serving to folks fall in love with CSS” as Kevin may say it. I used to be in a position to assist Kevin with a few his movies final yr (right here’s one) and may inform you the man cares a heckuva lot about making CSS approachable and enjoyable.

Truthfully, the rankings should not what we dwell for. Now that I’ve been given a second wind to work on CSS-Tips, all I need is to publish issues which can be priceless to your on a regular basis work as front-enders. That’s historically occurred as a stream of day by day articles however is shifting to extra tutorials and assets, whether or not it’s guides (we’ve revealed 4 new ones this yr), taking notes on fascinating developments, spotlighting good work with hyperlinks, or increasing the ol’ Almanac to account for issues like features, at-rules, and pseudos (we now have plenty of work to do).

My 2024 Choose

Nobody requested my opinion however I’ll say it anyway: Private running a blog. I’m seeing extra of us within the front-end group getting again behind the keyboards of their private web sites and I’ve by no means been subscribed to extra RSS feeds than I’m immediately. Some began running a blog as a “fear stone” in the course of the 2020 lockdown. Some deserted socials when Twitter X imploded. Some obtained means into the IndieWeb. Webrings and guestbooks are even gaining new life. Positive, it may be robust maintaining, however what a very good drawback to have! Let’s make RSS king as soon as and for all.

That’s a wrap!

Severely, an enormous due to Sacha Greif and the complete Devographics crew for the dedication to placing this survey collectively yearly. It’s all the time enjoyable. And the visualizations are all the time to die for.

State of CSS 2024 Outcomes initially revealed on CSS-Tips, which is a part of the DigitalOcean household. It’s best to get the e-newsletter.