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.

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

[JordanHershberger]

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

[Mulator]

Yes! Grid for dummies, please and thank you!

[szpaklabs]

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` :)

[irlshrek]

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

[wlc-welovecars]

container queries might be a game changer ✌

[ashleyfreebush]

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

[amirhoseinbagheri]

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

[aLfRemArShMeLlOw]

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

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

[mandokir]

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

[jricardoprog]

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

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

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

[QueeeeenZ]

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