Why CSS is underrated

Interactive elements with CSS

CSS can handle state management to some extent. By using pseudo-classes like :hover and :active, you can create interactive elements without JavaScript. For example, you can change the appearance of buttons when a user hovers their mouse over them. I often challenge myself to make things that are typically handled with JavaScript purely with CSS, or as much as possible with CSS.

Did you know it is possible to create sliders and carousels with only CSS? not only that, they often behave and look better than their JavaScript counterparts. See this article: CSS-Only Carousel

Media queries are magical

Media queries in CSS play a pivotal role in creating responsive web designs. This lets you control the content based on the user's screen size or device. With CSS, you can apply different styles and layouts for desktops, tablets, and mobile devices, providing a consistent and user-friendly experience across various screen sizes. This is achieved much more efficiently with CSS than with JavaScript.

Using JavaScript to calculate layouts or checkout device size is almost never a good idea. The problem is that your browser will load your HTML & CSS first, then it takes time to parse and execute JavaScript, this leads to layout shifts and slow performance.

Gotta go fast

CSS is a lightweight language that can be parsed and applied by the browser quickly. This speed makes it an ideal choice for handling certain tasks that can slow down a web page when implemented in JavaScript. For example, animations and transitions can be executed with CSS, resulting in smoother user experiences with minimal impact on performance. In contrast, JavaScript animations can be resource-intensive, potentially causing lag or jank.

I practice what I preach

Try running an audit on any page on my website. PageSpeed Insights, of course there are other reasons why my website ranks highly, it is not just down to CSS. That said, I do contribute a significant portion of the speedy page load and lack of layout shifts to my understanding and respect for CSS.

In conclusion.

CSS is a versatile, efficient, and often underappreciated tool in web development. While JavaScript is great for handling complex interactivity and functionality, CSS should not be underestimated or overlooked. Its speed, responsiveness, and aesthetic capabilities make it an indispensable part of web development. By utilizing CSS to its full potential, you can create faster, more efficient, and visually appealing websites that provide exceptional user experiences. It's time to give CSS the love it deserves.