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.

HTML

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

JavaScript

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

CSS

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

Pros

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

Cons

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

CSS-in-JS

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>
 )
}
 

Pros

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.

Cons

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>
 )
}
 

Pros

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.

Cons

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.

Conclusion

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.