5 Modern Features That Make CSS Easy

[@aLfRemArShMeLlOw]

I can't wait to be able to use container queries in 10 years, when finally all legacy Safari devices will be dead.

[@didiercatz]

Container queries are actually supported since Safari 16 (iOS 16) and according to Can I Use, about 92% of all web users support it. Even so it's up to the user to keep their device up to date, and you could always polyfill.

[@theklr]

Then you’re not doing progressive enhancement correctly …

[@ashleyfreebush]

I had no idea about container queries... ;'( Keep posting!!!

[@FurrerW]

Grid for dummies? Sign me up!

[@CoolestPossibleName]

Sign me up too!

[@js3671]

Me too

[@awesome-coding]

Noted!

[@aravindmuthu5748]

I @ this

[@irlshrek]

I'm a dummy

[@JordanHershberger]

Grid for dummies please! Especially if there could be a section really covering subgrid!

[@awesome-coding]

Noted! Coming soon!

[@Gornius]

1:05 - for me personally nesting is less readable. Just imagine that form section is longer than 30 lines. Suddenly all you see is label section, and you might think this applies to all the labels, and for context you need to read across tens of lines of code.

[@awesome-coding]

You are definitely right. There is always a balance between gaining benefits and overusing a feature.

[@PiyushJain-ct2qq]

Grid for Dummies please

[@awesome-coding]

Will do!

[@ArifBillahOnGoogle]

The only thing that is needed to center a div is display:flex on parent and margin:auto on child, and it will center the child both horizontally AND vertically. Supported across the board as far as I can remember. I don't know why this is even a meme any more.

[@patocarrasco6266]

but then you have more space between elements than between the elements with the border of its respective parent element or the viewport itself. With side elemets being sad about it, in this case, you use `display: flex` and `justify-content: space-evenly`. For sure, that won't help in every case, so you need other 10 ways of doing it and that's why the meme is more alive than ever

[@awesome-coding]

@ArifBillahOnGoogle @patocarrasco6266 😂 case and point

[@szpaklabs8893]

Cool! Thank you for this information. I also used SCSS often, because of nesting, and now it is possible without any extra dependency and this is great. But the most blowing mind feature for me is the `:is` :)

[@awesome-coding]

Glad it was helpful!

[@BensonSappor]

Grid for dummies, I'm in

[@fortunembulazi]

More details on Grid.

[@alinghinea98]

container queries might be a game changer ✌

[@nomadshiba]

people take time to learn programming languages, and paradigms they take no time to learn CSS and how to use it more efficiently, they don't even know which units to pick from. and they wrongly use `px` everywhere.

[@awesome-coding]

That's because CSS is perceived as a "simple" language. So nobody bothers to spend some time learning it.

[@amirhoseinbagheri1999]

we are very interested in your deep dive into the grid for dummies

[@awesome-coding]

Noted! Will do!

[@mandokir]

Did not know about :is() or native nesting.

[@awesome-coding]

Glad you learned something new!

[@JeyPeyy]

I really dislike when people nest their css too much. Many things become too hard coupled to the html so that you can't move them around without getting rid of all its styling. it also makes the specificity higher than it needs to, making it hard to overrule the settings without using !important. So I wouldn't exactly say that this makes it more modular and maintainable, quite the contrary actually. If used correctly (ie when there are relationships between the elements), it's very nice though.

[@ravigupta1813]

Grid for dummies plzzzzzz 😭😭😭😭

[@awesome-coding]

Noted!

[@Davi-it3in]

Grid for dummies please!!

[@awesome-coding]

Will do!

[@Arciiix]

Grid for dummies!

[@awesome-coding]

Noted!

[@vatsalyavigyaverma5494]

15 years wow

[@awesome-coding]

🤦‍♂️ Now it's time to finally learn some actual programming

[@4Mulator]

Yes! Grid for dummies, please and thank you!

[@harold.machado]

thanks... Awesome Grid please

[@awesome-coding]

Will do!

[@irlshrek]

omg. im so glad you made this video. i said "oooooooh" out loud like 3 times and im not even done with the video lol. its so easy to be out of the loop

[@awesome-coding]

Glad you liked it!!

[@jricardoprog]

I've had a lot of fights with IE6, lol

[@awesome-coding]

😅

[@solorsix]

Nice work!

[@awesome-coding]

Thank you! Cheers!

[@jonathanliu-chan238]

Yes keen for the grid deep dive

[@awesome-coding]

Noted!

[@QueeeeenZ]

Tailwind - the best CSS feature. It should ship with the browser.

[@aravindmuthu5748]

really 🙄

[@nice-vf4rj]

Then browsers would be unreadable

[@pro14ab]

they wrote the same about bootstrap

[@allan_archie]

It does. It's called inline styles.