Current Trends In CSS

[@crowlsyong]

this video is jam packed with good stuff. can you do a crash course where you spend like 1-2 min describing how each of these functions works (maybe show an example)? I realize that's a huge ask from random commentor, I'm just excited about all these things.

[@UliTroyo]

“CSS-love it or hate it…” Decidedly love. Anyone who doesn’t isn’t a designer, and developers only get stuck doing design because designers aren’t sufficiently valued by companies.

[@randerins]

CSS is just not intuitive enough.

[@sleekism]

How many designers can write CSS?

[@k-yo]

CSS is the ultimate tool for a designer. Sure, it's not as fast as throwing something quick on Figma, but it's functional and SUPER powerful.

[@alexstrz6995]

I actually like the fact that you acknowledged that css isn't a dev thing, it's a designer thing and imo we should differentiate both, give more credit to designers and stop expecting dev to do it. Part of the reason why I'm not at ease with the notion of full-stack is because I've rarely seen people who can do a good and efficient designer work and a good and efficient dev work

[@3polygons]

​@@sleekism I used to be able (although at the start, not very clean or efficient CSS style sheets, bad for bit sites. That's the issue of having the mind of an artist/designer, rather than a dev background (I can code super basic Python, though, and kind of like to code, despite being terrible at it)... is the tool you get for your designs to look at least just fine from your original concept (on top of the base of solid HTML, of course). A lot of us started when design was solely for print (not even screen!), we saw internet start, and then first html, then javascript and CSS. Indeed, my first gigs were only HTML , tweaking its tables for everything in design (no divs at first...). That said, I know a bunch of designers completely non capable of writing any HTML or CSS. One issue I had in a team (at a company) is that when I was in holidays, devs would try to do CSS without having any love for it, so they did not even really like it, and did stuff with fast and poorly, or just used JS, PHP or certain tricks that certainly were to be made better in CSS, and when they edited CSS they wrecked things even bad for keeping a clean code base. And even just directly wrong code, or which would break in several browsers, etc. Lastly most of them (dunno why) lacked very essential sense of aesthetics (while this is in many persons in an intuitive way: the "why" you know certain armchair does not fit well in a certain living room, or why certain colors in your clothing do not match). When I was left to do more Ruby code or PHP/JS bits than I should, that was neither efficient; I'm not a programmer... I have only known one case of a great designer with fantastic artistic ability (even drawing and painting) whose job was actually programming in Java (he was a genius, indeed). He made the art, music and code of all his games (he started in the times of Commodore Amiga, and all those were kind of Leonardos in the demo scene). But then again, I have probably have bad luck: the world is too big to make assumptions. But in a way, is kind of logical... you get better at what you put more hours in.. And while nothing is impossible (kind of), it's pretty hard to improvise lots of know-hows in like some months, in both large fields.

[@Samurai-Kit]

I use Bootstrap 4 😊 and jQuery🎉❤ keeping it simple

[@k-yo]

Learned of Open Props through this survey results, just as I'm writing a design system from scratch. I'll definitely try it out, looks pretty exciting, especially because it came from the hands of Adam Argyle

[@darialyphia]

It’s really good. It’s become an auto install on all my projects (not a presentational css guy)

[@samuelgunter]

I think the state of CSS is California, it's really weird but oddly stuff is still innovating there

[@t3dotgg]

I hate you so much

[@thomassynths]

Up next: CSS will start heavily taxing its constituents

[@cherubin7th]

CSS is the hardest part for me to understand. It just never wants to do what try to tell it to do. (Firefox usage is so high because of the many Germans)

[@alzearafat]

Ahh Bootstrap... I had fond memories using it in 2014 :)

[@RichReflectionz]

ShadCn is one of my favourites these days due to the integration of tailwind

[@sleepchat]

Yes, thousand times yes. It has saved our company so much money in unwasted labour.

[@arcanernz]

Agreed it's pretty awesome

[@djblast101]

Shadcn is glorified copy pasta no work is done just use radix themes or people who actually did the work

[@arcanernz]

@@djblast101 copy and paste is hard.

[@aleksander5298]

@@djblast101 what are you talking about little ape? XD shadcn is built on top of pure radix headless version, it was built way before radix themes, and apparently you are a very poor developer who has never done a major project in his life, if you shadcn approach is bad :)

[@ducodarling]

Oh how I love the back end 😂

[@okosunfamily1081]

Can you train one personally on backend

[@okosunfamily1081]

How can you train me?

[@brawlgammer4424]

@@okosunfamily1081 You have to train yourself ultimately, this is the truth. I'll give you some topics you can look into, but please be wary that the requirements to be a BE Dev vary between companies. With that said, here is what I think you should know before going into WebDev: - Learn to program in C, you might not use this language professionally but i have yet to find a better language for teaching Computer Science Fundamentals; - Basics of Different Programming Paradigms (OOP, Imperative and Functional), you don't need to go balls deep on this, but keep in mind most companies require good OOP knowledge; - Data Structures and Algorithms (DSA); - Time and Space Complexity Analysis, this is gonna give you that programming "sensibility" you definitively need as a BE Dev; - Programming 101s, in whatever language you want to pursue professionally (variables, data types, loops, functions etc...); - Learn how TCP/IP works, this is fundamental specially for WebDev, also learning UDP is a major plus (and much easier than TCP); - HTML + CSS + Basic JS; - Basics of Servers (specially WebServers like Apache/Nginx) and HTTP Requests; - Databases, both Relational and Non-Relational; - REST pattern is a must nowadays, almost every company works with REST-APIs or develops them internally. Yeah, it's a lot, but the barrier of entry nowadays is insane, I'm sure you're familiar with how saturated with Junior Devs the market is right now, so you have to standout. Taking the harder route is the only chance right now, i'm afraid, in my list I didn't include Containers, Cloud Computing, CI/CD, Version Control (Git) but these are MUST HAVES, at least a very basic understanding. Not to discourage you, more to make you realize that it's not easy right now so the path to getting there is also much harsher.

[@MagicPants647]

I am an ass man myself

[@null_spacex]

Full stack is the only way

[@3polygons]

Thanks a lot. Your channel is particularly good for a rusty (quite) old designer who started when CSS didn't exist yet, but have changed jobs too often and is trying to be back at it, now... :D

[@J1Jordy]

Being from the Netherlands I'm surprised surprised of the high response rate from my country, considering we have a much smaller population compared to the other countries in the top 10.

[@nomadshiba]

love vanilla css - :has() is great - gap and aspect-ratio is not even something new anymore, everybody uses them. - used @layer, it useful. - love shadowdoms really useful to hide complexity in a native way. - new math functions are really useful while calculating secondary, and ancent colors and etc, with color theory functions. - dont like tailwind or bootstrap, or any other "css class" libraries, requires me to structure html based on how i wanna style them. styling shouldnt effect your html structure. you shouldn't need div(s) just to style stuff - im very happy with css, but i think we need native mixins and a way to generete unlimited number of ::before and ::after pseudo-elements, something like this ::before(my-key) cool video

[@mr.johnson8974]

You can use any native css feature with tailwind and your point about structure makes no sense. It’s literally just template classes, the same thing you would be doing with vanilla css (although everyone who uses vanilla write worse class names. Every time.) and follows the same cascading style as css.

[@shrin210]

Class names is major disadvantage of vanilla CSS and then maintaining it. Developers do a bad job at maintaining it.

[@vitorwindberg4212]

"requires me to structure html based on how i wanna style them" -> this literally makes 0 sense, respectfully

[@spartanatreyu]

@@vitorwindberg4212 You should aim to have something 90% presentable without any ids/classes. The remaining 10% should be: 1. CSS Reset 2. Branding 3. Layout 4. Navigation 5. Utilities 6. Other

[@AdamJenkinsEverything]

7:44 Stanley Kirk Burrell is a big fan of touch-action.

[@hyper_channel]

I've been using styled components for years and still think is the best approach. Why some people doesn't like it? The bundle overhead?

[@Mavesound]

Sadly :has is not good supported in firefox, had a lot of problems with it in our application

[@PieJee1]

can somebody explain the appeal of tailwind? The only one I can come up is that it is easy to copy, paste between projects. Because basically you are writing inline styles, but instead of style="position: absolute" you do class="position-absolute"

[@honzahodanek5492]

Díky!

[@teavirus777]

Very funny to see the aspect ratio usage increased as our company is on that boat, it has proven vital for better performance specific to CLS (content layout shift)

[@Sammysapphira]

4:04 this question section is terrible, surprised they called it 'Cognitive impairments'. Someone with clinical depression or anxiety wouldn't mark themselves as cognitively impaired, nor would somebody on the autistic spectrum.

[@SachaGreif]

Happy to hear suggestions, what would you call it instead?

[@BusinessWolf1]

Oh WOW there is still so much css I can learn that's so cool. I'll try to get some time for it but hard when working 12+ hours a day

[@KarlOlofsson]

That thumbnail is such a Can't-hide-the-pain-Theo look 😆

[@SethWilson]

Thanks so much for shouting out us visually impaired developers :)

[@GifCoDigital]

Heres me using gap for years not realizing it was such a contentious issue.

[@DavidMulderOne]

As someone who actively dislikes tailwind (not even arguing the idea of writing your styles inline/as close as possible to inline) I have such a hard time comprehending it's popularity in a State of CSS survey. My theory so far was that it was popular because it hides some of the complexity of CSS from those less knowlegable about CSS, but given it's popopularity here there must be more to it 😕. To me it just feels like writing CSS through an abstract more unreadable cypher. It's literally the only CSS framework I am aware of that decreases legibility for me... ☹ . (Explanations welcome)

[@darkbluewalther]

My guess is lots of people wants to reach results without tremendous efforts. Tailwind is really great at that. For 90% of your needs, it's so easy. Plus great documentations + adoption makes it even easier to use.

[@easylite376]

Germany is also the second biggest market for streaming and the third (behind spain) on youtube. So i'm not suprised, that germany is 5% and I would say this is maybe not influenced by someone sending a link to a big group of people.

[@benbagley8674]

Yeah sent me the wrong way that statement, it's like oh another country is up the there with the US, they must be manipulating the results. There's no logic there.

[@RpgplayersInc]

Bro, WHERE did you get that shirt? I love it!

[@NeverOutslayed]

Mans skipped straight over blend mode. It's straight magic

[@CodingPhase]

13:30 "Did they not put me in this one?" Bruhhhhhhh you the javascript react guy why you want to be in the css world let some of those guys get some shine too lol Let them eat bro hahahahaaha Theo is like "YO THERE'S Something wrong with this list"

[@SonAyoD]

What happened to panda?

[@veebeeTV]

You move so fast through this need to watch quarter speed 😂

[@frontend_ko]

No one use sass in nextjs?

[@ead5590]

Isn't it? I primarily use it for nesting and all but I like it. Never really have given tailwind a shot but hey, if the company needs me to use a particular css library, I can't help it. LoL!

[@patrickwasp]

Does vue have view?

[@modernkennnern]

You can animate auto, using View Transitions, but that's kind of scuffed.

[@limpiadora]

CSS is ready for backend now 👍

[@marc536]

Talking about Tailwind is not being very focused on CSS as a technology.

[@MagicPants647]

I am glad to see styled components slowly dying

[@BinaryReader]

The only thing I want in CSS..... // Inline Comments

[@andreicojea]

Months ago I’ve got really excited about gap, only to find out it doesn’t work in Safari…

[@BusinessWolf1]

...what? dude I work in a production app that is using gap. Fuck. I'll let the CTO know about this.

[@andreicojea]

@@BusinessWolf1 at the time I tested it, it did work with display grid, but not display flex

[@darialyphia]

It does work since safari…15 I believe ? Not sure

[@k-yo]

Check your userbase browser statistics. If you are not in a niche environment that has to rely on older browsers, use the newer stuff with no fear. Gap is generally safe to use today

[@NighthunterNyx]

No China and India?

[@midlFidl]

testing desktop with keyboard is about accessibility. nothing to do with vim.

[@additionaddict5524]

Random q. Anyone else plagued by flutter and Firebase ads atm?

[@slowjocrow6451]

Anyone can recommend excellent tutorials on modern css without frameworks? I like css but I'm pretty much still only doing css 2

[@JakobEriksen]

www.youtube.com/@KevinPowell

[@Krzysiekoy]

LETS GO OpenProps!!!

[@ABHISHEK-jc8kn]

I realized enjoying web much less now

[@Michael-Martell]

Nobody learns CSS from you Theo! lol.

[@k-yo]

Indeed. I come here for other great stuff, but not expecting CSS/UI Design.

[@Cruzylife]

I picked tailwind because of you

[@koigxiritb7ttgyuv]

this guy is so narcissistic he gonna cry live that people didnt put him in survey

[@AnotherJoao]

imagine liking styled components ☠

[@emenikedaniel]

I love that your video is heavily focused on JSX rather Than css. Functionality & features are more important than just styling. Rooting for you in next year's survey, if you choose to mke more css videos . Love your contents always.

[@TheBswan]

Flex + gap is a dream

[@OuranianCyclops]

> me just using vanilla raw css always

[@RyanTipps]

You skipped over the T-shirt demographics

[@i_Amazin_]

LightningCSS / Parcel > CSSNano all day!

[@realitydesigners]

I love gap

[@rrraewr]

miss me with all that justify and align crap, is it really that difficult to name things x y z, since there actually is a z-index. like actually name things in a non brain dead way

[@hamzadlm6625]

Tailwind is the best thing that happened to humanity

[@jessejayphotography]

Take a look at HTML 3. Tailwind is dumb.

[@gerrardthemeek]

No.

[@knoraziel]

Garbage

[@shrin210]

kind of until next best thing comes out

[@TwoLeggedTriceratops]

Yikes

[@jessejayphotography]

Anybody coding since HTML 3 will know that tailwind is dumb. Everything old and shitty is new again apparently.

[@NuncNuncNuncNunc]

Funny, never thought to come here for CSS help. Still don't, it's not your thing.

[@kodekorp2064]

Panda CSS

[@oscarljimenez5717]

Next year PandaCSS winning :v

[@zksumon847]

Mui is good

[@gro967]

Prettier 🤮 Think for yourself guys, don't get opinionated by Prettier...

[@Nodsaibot]

lmao gender, just 2 and a "no answer" options should be there

[@sagarsubedi]

I'd rather vote for Donald Trump than use styled components. Tailwind should be the default way of writing CSS.

[@RicoKareem]

…robbed. Next year.

[@peterruszel5389]

first

[@Udodelig1]

Why the “white dudes” racist comment though?

[@stunna4498]

Bootstrap > tailwind css every single day

[@dixztube]

🧢

[@MagicPants647]

you crazy

[@LeChuck.x17]

Love CSS, Hate Tailwind 🤷‍♂