Skip to main content
CSS Tip

Write better CSS with modern CSS

A lot of new CSS features can help you optimize your code and reduce redundancy.

Here is an example of a CSS code with a lot of redundancy

/*
The same selector 3 times!! 🤮
max-width? does it mean bigger or smaller?? 🫣
grid-template-columns everywhere !! 😬
*/

.container {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 10px;
}
@media (max-width: 800px) {
.container {
grid-template-columns: repeat(2,1fr);
}
}
@media (max-width: 400px) {
.container {
grid-template-columns: 1fr;
}
}

It can be optimized like below using the modern features

/*
one selector 🤩
one property 🤩
clear media queries 🤩
*/

.container {
display: grid;
grid-template-columns: repeat(var(--n,3),1fr);
gap: 10px;
@media (width < 800px) {
--n: 2;
}
@media (width < 400px) {
--n: 1;
}
}

More CSS Tips