5 Modern Features That Make CSS Easy

An overview of some CSS modern features.
💬 Topics:
- Why CSS vs SASS?
- CSS Nesting;
- CSS Variables;
- has() and is() pseudo-classes;
- Container Queries vs Media Queries;
- CSS Grid.
🥇 Become a Member - / @awesome-coding
✉️ Join the Newsletter - newsletter.awesome.club/
📖 Blog Article - www.awesome.club/blog/2024/5-...

[@JordanHershberger]

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

[@awesome-coding]

Noted! Coming soon!

[@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

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

[@4Mulator]

Yes! Grid for dummies, please and thank you!

[@jonathanliu-chan238]

Yes keen for the grid deep dive

[@awesome-coding]

Noted!

[@ashleyfreebush]

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

[@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!!

[@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 …

[@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!

[@alinghinea98]

container queries might be a game changer ✌

[@harold.machado]

thanks... Awesome Grid please

[@awesome-coding]

Will do!

[@solorsix]

Nice work!

[@awesome-coding]

Thank you! Cheers!

[@amirhoseinbagheri1999]

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

[@awesome-coding]

Noted! Will do!

[@fortunembulazi]

More details on Grid.

[@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

[@BensonSappor]

Grid for dummies, I'm in

[@mandokir]

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

[@awesome-coding]

Glad you learned something new!

[@Davi-it3in]

Grid for dummies please!!

[@awesome-coding]

Will do!

[@vatsalyavigyaverma5494]

15 years wow

[@awesome-coding]

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

[@jricardoprog]

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

[@awesome-coding]

😅

[@PiyushJain-ct2qq]

Grid for Dummies please

[@awesome-coding]

Will do!

[@Arciiix]

Grid for dummies!

[@awesome-coding]

Noted!

[@forno_nicolas]

Safari 17 is far from 'any browsers'

[@ravigupta1813]

Grid for dummies plzzzzzz 😭😭😭😭

[@awesome-coding]

Noted!

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

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

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