As a developer, there are many choices to make when building your next application. The rise of serverless technologies allows developers to build and run applications without thinking about servers and this also allows front-end developers to create full-stack applications and build SaaS web apps.
In Stack Choices, I take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. In the last episodes, I took a look at JavaScript vs TypeScript, React vs Vue vs Angular vs Svelte, and Create React App vs Next.js.
This time, let’s take a look at some options for styling the application. I’ve worked with different approaches like CSS modules, Styled-Components, frameworks like Bootstrap, or just vanilla CSS. In this post, we are going to focus on three of my favorites: SASS, CSS-in-JS, and Tailwind.
SASS
Going with classical CSS, using a preprocessor like SASS has been my way of styling applications for years. CSS is easy to learn but very hard to maintain. That’s why, as your project grows larger, you need a proper structure. BEM (Block Element Modifiers), is a naming styling that tries to solve the naming problem and structure that CSS often run into. BEM also provides a better structure for your CSS code and scalable CSS.
CSS preprocessors in combination with BEM definitely improve the development experience a lot, but that doesn’t mean it’s perfect. When your codebase grows, you might start to wonder in which files you should put certain styles and how it should be scoped. You also wonder if old styles are still being used. And you also have to think about performance: you don’t want to load in every single line of CSS on the first page when most of it is used on other pages.
There are many solutions to these problems, but one approach that I personally like is writing your CSS in JavaScript.
CSS-in-JS
There are multiple CSS-in-JS libraries out there, like Styled-Components, Emotion, and Styled-JSX, and it has some benefits over using classic CSS. I personally really like the fact that it makes it simple to add specific CSS to a component. All styles are only applied to the component, so this also means you do not have to learn methodologies like BEM, use long class names, or need to think about where you put your styles.
The other main advantage is that styles are rendered only if the component is on screen. You don’t have to worry about performance or unused styles. Also, because of the component-based architecture, we can have changes controlled by props. If you are a JavaScript developer I think you don’t need a lot of time to feel very familiar with writing your styles in JavaScript as well.
At first look, CSS-in-JS might look difficult, because the learning curve is a little bit bigger than using SASS. But if you are working on a component-heavy JavaScript project, I think CSS-in-JS is definitely worth trying out.
TailwindCSS
Tailwind is a CSS framework, but not like Bootstrap or Ant Design. It’s a utility-first framework, which means it doesn’t focus on predesigned components like buttons, cards, and alerts. It provides low-level utility classes that let you build completely custom designs without leaving your HTML.
If you go for a framework, you usually need to stick to the components of that framework, which can lead to overriding unwanted styles or battling specificity wars. Tailwind is different, it’s basically a different way of styling your application.
There are great benefits of using Tailwind, like development speed. Tailwind provides almost all the tools you need to build out a site in just HTML, so you rarely need to write any custom CSS.
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="rounded-lg md:w-56" src="[https://cdn-images-1.medium.com/fit/c/32/32/1\*\_SiS1xvFOqiK6TnkiGcZ2A.jpeg](https://cdn-images-1.medium.com/fit/c/32/32/1*_SiS1xvFOqiK6TnkiGcZ2A.jpeg)" alt="Jake"/>
</div>
<div class="mt-4 md:mt-0 md:ml-6">
<div class="text-sm tracking-wide uppercase text-cloud-burst-600 font- bold">Marketing</div>
<a href="#" class="block mt-1 text-lg font-semibold leading-tight text-gray-900 hover:underline">Finding customers for your new business</a>
<p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
</div>
</div>
</div>
Tailwind was built from the ground-up to be super customizable. It comes with a default configuration, but you can simply override the default configuration with a tailwind.config.js file in your project.
Also, any changes you make will be made in your templates, therefore only affecting the page you’re working on.
Besides that, all its utilities are also generated with responsive versions which are very helpful if you want to make your application look nice on mobile, tablet, and desktop.
One thing I didn’t like about using Tailwind is the long class names you can end up with. The more styling you need on a single element, the longer that class name is going to be. This harms the readability of your HTML files a bit, but after a while, I got used to it and it doesn’t bother me that much anymore.
The other problem with Tailwind is the large file size, but you can use PurgeCSS to fix this. PurgeCSS reduces the file size by scanning your HTML and removing any classes that aren’t used. Luckily, setting up PurgeCSS to work with Tailwind is easy, so this could make Tailwind an absolute winner.
Conclusion
There are many ways to manage the styling of your application. In the beginning, this is easy, but when your projects start to grow you will encounter difficulties. Using a traditional approach to CSS is not a wrong decision, but nowadays there are other options you could consider. Personally, I like CSS-in-JS a lot and as a JavaScript developer, it makes sense to me to go with this approach.
On the other hand, I’ve been working a lot with TailwindCSS lately and I don’t think I’ve ever been that excited about a CSS framework. I made some projects, like RemoteRocket.io, with TailwindCSS and I’ve noticed a huge boost in productivity while working on it. Although it requires some time to learn all the utility classes, you barely need to write any CSS anymore once you master those. And not needing to switch files while styling your HTML elements feels like a blessing.
With all that in mind, I’ve made my stack choice: TailwindCSS. If you think differently, please try to change my mind! Reach out top me on Twitter: @jakeprins_nl.
If you’re interested in saving time on your next project and skipping implementing authentication, payments, tests, etc. then subscribe here to follow my progress in building the SAAS starter-kit for React developers. You can also follow me on Twitter, or at www.jakeprins.com.
Top comments (8)
This can be easily speed up/eliminated by using tailwind autocomplete plugin for VSCode :) It also speeds up development even if you know the classes.
I have been writing SASS for a decade or so but just recently I decided to use on a small website project pure CSS. I loaded Bootstrap5 as a base foundation and then just used CSS overwrites and global variables. After doing project like that I had a bit of an epiphany that with SASS I have been over engineering my CSS. I think there is same issue is too often on Tailwind and God forbid... writing CSS in JS. Even though I was thinking I am going to move from SASS to PostCSS. I am not saying these approaches are bad. But CSS itself has evolved a lot in recent years. Therefore, maybe using just plain CSS is often the right approach?
Why not write atomic CSS yourself, using the idea from Tailwind?
Why would anybody reinvent the wheel when its already invented, made, documented and maintained?
Because I want to avoid PurgeCSS.
Ouh. Cool business goal.
PurgeCSS clashes a lot with Stylesheet files I didn't make. It's yet another build tool with troubles. Without Purge, or go vanilla Link tag CDN, Tailwind is large and not practical.
It depends on the pioject size, but I don't always plan to start from scratch.
Iv'e never liked the idea of naming a div to a flex property just to have 3 lines of CSS (or 4), it seems to me a bit of an overkill thing. You could just specify a flex behaviour in 3 lines of css, and if need on both mobile and desktop theres no need to repeat it again, just have to tweak margin and padding on desktop (probably)
TailWind CSS is something I'd consider using in the future, but I don't know much about it, how does custom classes work in the enviroment?