The answer, my friend, is blowin' in the Tailwind
Have you, like me, tried several different CSS methodologies and frameworks without finding what you’re looking for? Tailwind is what I’ve been looking for.
Too long to read:
- Writing CSS is simple, writing good CSS is difficult
- Don’t use CSS frameworks unless you understand CSS properly
- Using Tailwind saves time and solves a lot of problems I’ve had in recent years
- I will continue to use Tailwind indefinitely
Writing CSS is simple, writing good CSS is difficult. Through the years I’ve tried several different approaches of writing, maintaining and scaling CSS with varying success. Here’s a trip down my memory lane.
The wild west era - 2010-2016
My approach to CSS? No approach really. I styled whatever was available (id:s/classes) to style in my main.css file. Naming conventions? As long as I had some sort of idea what I was styling, that was good enough. Needless to say, my CSS was a mess.
Later in this era, around 2012-2014, I started using CSS frameworks, namely Bootstrap and Foundation. Foundation was my primary framework. Using it made it easier for me to accomplish things I wasn’t capable of on my own at this point.
Positives and negatives of using frameworks
This has already been said by thousands of people before me, so let’s keep it short.
- Helps you to get going fast
- Well tested, cross browser compatible
- Solid grid systems
- Thorough documentation to lean on
- Accessibility taken into account
- You don’t really learn CSS
- Debugging and overwriting framework styles
- Frameworks semantics vs preferred semantics (naming etc)
- Lot’s of unused CSS
In short, I’m glad I’ve used these types of frameworks, I have benefited from doing so, but I didn’t gain the knowledge I needed to prepare me for what was coming.
The reality era - 2016-2019
In 2016 I graduated from school, applied for jobs and eventually got one a few months later.
Early on, I realised I didn’t know CSS as well as I thought I did. I arrived at a company where custom CSS was more or less standard, while frameworks had solved most of my CSS so far. I learned a lot about methodologies, naming conventions and CSS in general during those first months.
Through the years we’ve mainly used CSS frameworks to take advantage of the grid system, leaving out all other parts of the framework. We’ve used the BEM naming convention and our CSS structure was inspired of Hugo Giraudel’s Sass Guidelines.
One annoying thing with combining frameworks with BEM has been the mix of naming conventions in our HTML. Another thing is the daunting and time consuming task to come up with decent class names for all components and HTML elements.
My first experience with utility classes
While working on a large scale component based project, we discovered the need to tweak spacings between components depending on where it was used. Shortly after, I read about utility classes for the first time. After that, we generated hundreds of responsive utility classes for margin and padding. While we managed to get spacings correct, a lot of the classes were left unused, but still present in our production stylesheets.
Building my own framework
At some point, maybe at the end of 2018 or start of 2019, I decided I wanted to move away from CSS frameworks entirely. I read about ITCSS, Harry Roberts’s (aka CSS Wizardry) methodology for writing sane, manageable and scalable CSS. I started to study Bootstrap and Foundation in detail to try to understand how they were built. I looked at other CSS setups and picked up bits and pieces I liked. Around this time, my colleague mentioned a new thing called Tailwind CSS, a utility-first framework. I had a look but quickly decided I was not interested. I had just fallen deeply in love with BEM and was hooked on ITCSS. So instead I built a custom framework with a solid grid system, handy utility classes and beautifully named and structured SCSS and HTML, figuring this was what we were going to use the following years. It was never used, the reason being that we didn’t have any new projects by then. I’m glad for that now.
The new era - 2020
The large scale web project me and my colleagues had been working on for almost three years began to come to an end. We then realised that another way of writing CSS would have been more convenient. We had lots of unused CSS, mixed naming conventions and huge amounts of custom CSS to maintain - Tailwind CSS was mentioned once again.
As I began to develop this portfolio during spring/early summer 2020, I decided to give Tailwind an honest try. Tailwind felt odd and “wrong” in the beginning. My HTML felt bloated compared to the BEM classes I had used before. After a while though, I realised how smooth my workflow was. I only moved between my HTML and my Tailwind config file, occasionally writing a few lines of CSS that Tailwind didn’t already have classes for.
Of course, it takes a while to get used to all the classes in the HTML if you’re used to BEM. It takes a while to memorise what class does what, but Tailwind’s documentation makes it easy to find what you’re looking for. Those few occasions when you have to go to there takes less time than creating a new CSS/Sass file, importing it correctly and then write your own custom styles, a massive win according to me. We don’t even have to come up with convenient names for our classes, we just combine them until our elements look like we want them to.
Another advantage is the integration with Purge CSS, which removes all unused CSS, since one huge performance challenge with CSS is taken care of right away.
Also, since almost no additional CSS is needed, a structure or methodology for structuring our CSS files becomes redundant.
I will continue to use Tailwind indefinitely
To sum up, I don’t think your CSS journey should begin with Tailwind, rather end with it. Once you know CSS in and out, Tailwind is the perfect toolkit for writing, maintaining and manage CSS according to me. Out of the different approaches and methodologies I’ve tried throughout the years, Tailwind feels most convenient so far. Tailwind solves a lot of the problems we’ve had for many years, and most importantly it saves us a lot of time.
Some say Tailwind sites, like Bootstrap sites, are immediately recognisable. That may be true in some sense, but only if you just use it as it is. My experience is that Tailwind is incredibly easy to extend and customise to be able to build just about anything. I don’t think this site looks like “a Tailwind site” at first sight?