Inner Peace With Zen Mode CSS
CSS stands for Cascading Style Sheets. It describes how HTML elements are to be displayed on screen, paper, or in other media and allows us to create great-looking web pages. There are three ways of inserting a style sheet: inline, internal (embedded), and external CSS. In this article, we aim to look at the "traditional" way of writing CSS, the CSS-in-JS method, and the "Zen Mode" and list pros and cons of each.
The "traditional" way
Let's say we have a button we would like to style.
It is a structured approach. The code is easy to read and maintain. We can also reuse the CSS effortlessly.
I learned the "CSS-in-JS" pattern when I got to know with React. In this case you have the styling and the component in the same file.
Here, CSS is closer to the component than in the first method. Additionally, it's also more dynamic when it comes to adding classes to elements. Besides, there's less chance to leave unused classes in the code.
"Zen Mode" CSS
I'm relatively new to Tailwind. I started using it for one of my hobby projects. It's a utility-first CSS framework which contains built-in classes.
Here the logic is separated from the styling. It means if we need to write CSS, we only have to focus on the JSX part of the component. That's great because we won't lose focus. We don't have to spend time figuring out class names as Tailwind has built-in classes. Overall, it gives a better developer experience.
As it has built-in classes, it takes time to learn. Tailwind is not a component library. In most cases, we have to style a button, input, or select from scratch.
The steps above were our journey to find the most productive way of writing CSS. Although Tailwind provides an excellent solution, it may not be optimal for everyone. Of course, each method has pros and cons, and developers are different. The most important is to find the best-fit solution for the project and yourself.