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.

Nowadays, developers have multiple options to add styling to a project. They can write Vanilla CSS or use pre-processors like SASS or LESS and code at a higher level. Writing CSS in JavaScript is another method. Utility classes or UI toolkits can also be used if writing the least amount of CSS is the goal.

The "traditional" way

When I started web development the first JavaScript framework I got to know was Angular. It is based on this approach. You have a template file for the HTML, a component file for the JavaScript and a dedicated CSS file for the styling.

Let's say we have a button we would like to style.


<button class="my-button" onclick="handleOnClick()">Click me</button>


function handleOnClick() { console.log('You clicked the button.'); }


.my-button { color: white; border-width: 0; border-radius: 8px; padding: 8px 16px; background-color: #F7941F; }


It is a structured approach. The code is easy to read and maintain. We can also reuse the CSS effortlessly.


Dynamic styles cannot be implemented in CSS files, as JavaScript is in a separate place.


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.

const useStyles = createUseStyles({ myButton: { color: 'white', borderWidht: 0, borderRadius: '8px', padding: '8px 16px', backgroundColor: '#F7941F' } }); export function Button(props) { const classes = useStyles(); const onClick = () => { console.log('You clicked the button.'); }; return ( <div className="container"> <button className={classes.myButton} onClick={onClick}> My button </button> </div> ) }


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.


It's more like JavaScript. If you are not a big fan of this programming language, it will be hard working with it. Rewriting an existing CSS codebase to CSS-in-JS syntax is time-consuming. You must use an external library to add this functionality to your project.

"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.

export function Button(props) { const onClick = () => { console.log('You clicked the button.') } return ( <div className="container"> <button className="text-white border-0 rounded-lg py-2 px-4 bg-[#F7941F]" onClick={onClick}> My button </button> </div> ) }


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.

Blog Posts

View more

Graceful termination of Nginx in K8s

Graceful termination of Nginx in K8s

React Native vs. React Web: What's the Difference and When to Use Them

React Native vs. React Web: What's the Difference and When to Use Them

React vs. Angular: Which Front-End Framework Is Right for You?

React vs. Angular: Which Front-End Framework Is Right for You?