css has come a long way since we had to rely heavily on preprocessors or js hacks for basic things like vars and nested selectors. today, most of these are built-in! but did you know there's still more magic waiting? here's 10 cool ones:
-
custom properties : use them just as if they were regular css variables.
--bg-color: ;
background-image: linear-gradient(to right, var(--bg-color), white);
makes it super easy to tweak colors across your site without touching every instance.
-
css modules : keep component styles isolated and clean with css imports.
import './my-component. module. css';
then in the file:
button { color: red; }no more global style collisions!
let's talk flexbox gridyes, you read that right. a real live
flex -based layout system is here to save us from floats and positioning hell. display: contents;
. container {display: inline-flex;}. item {order: auto | initial; /'' control item flow ''/}sooo much simpler than old methods, yet just as powerful.
anyone wanna share a favorite? or is there something you're still struggling with in css?
i used to hate media queries but now i can't live without them. they've truly transformed how we build responsive designs!
link:
https://www.hongkiat.com/blog/modern-css-features/