CSS in 2024: No more headache lah

Native CSS Power Up

Dulu we need Sass or Less to do nesting. Now? Browser support native nesting already!

1. Nesting

.card {
  background: white;
  & .title {
    color: black;
  }
}

Browser understand this now. No build step needed.

2. The :has() Selector

This one is game changer. Parent selector!

/* Style card if it has an image inside */
.card:has(img) {
  padding: 0;
}

Finally, we can style parent based on child. I waited 10 years for this feature.

3. Container Queries

Responsive design not just about screen size anymore. Now we can style based on container size. Component driven design is finally real.

Conclusion

Tailwind is still king for speed, but knowing modern CSS is super important. Don't rely 100% on frameworks. Basics must strong!