Hello, fellow netizens! This is Hamza 👋. I'm an upcoming web developer with an affinity for React and Tailwind. I love learning by doing and also by sharing it with others like you! So let's get started!
———————————————————————————————————————
I'm sure you've come across various ways to style your website or app. As a beginner, I remember coming across so many different ways to style, either using vanilla CSS or frameworks with ready-made design templates and everything in between. Of course now, with the rise of Tailwind, it's made me wonder if I should revisit this discussion.
Vanilla CSS 🎂
Nearly everyone who is a web developer has worked with CSS. Cascade Style Sheets allows you to implement styles to your website by applying them to certain HTML elements.
For a beginner, CSS opens a large door in allowing one to style their website that it feels like their own work! Alongside the use of simple, readable syntax makes it easy to get a basic, mockup website up and running in no time!
However, quite often that expressing can get overwhelming and tedious! Especially if you're working on a fairly large project. As you know, CSS relies on tags, classes, and ids to allow styling of various parts of a website, down to a sentence! Eventually though, keeping a track of class or id names can get too much, and results in quite obnoxious names.
Enter : TailwindCSS 💨
One pain of using CSS was always keeping track of the many class names, especially if there are many child elements. It got to a point where I would keep going back and forth between tabs on VSCode to check and double-check the element I'm applying the styles to!
By this point, I had heard of Tailwind via the Twitter webdev community. Like any developer, I had developed a liking for my then-current tech stack and was thus hesitant to try out Tailwind.
Of course, seeing so many people tweet their projects, and claiming how much simplified and cleaner it is to style a website, I had to eventually give in.
What is a Tailwind?🤔
Tailwind's official quote is
Rapidly build modern websites without ever leaving your HTML
In essence, Tailwind is a utility-based framework. That means it does not have any pre-written styles, but rather pre-written classes such as margin, padding, flex, font-size, etc.
Initially, it can feel overwhelming and quite alien to write styles inside your HTML file (unless you've worked with inline styling). But once you get a hang of it, you'll find yourself loving how it:
- Comes setup with 100s of pre-written classes
- Makes adding styles using simple modifiers such an easy task
- Allows creating unique styles
- Enables creating templates, preventing duplication of stylings
- Makes projects light and ready for deployment
Touch base on Bootstrap 🥾
While my experience using Bootstrap is not much, I have learnt and worked with it on a couple of projects. And it's definitely one of the more popular frameworks out there.
Bootstrap allows rapid creation of websites using existing templates. It's very easy for beginners to use, given the abundance of premade styles available, and easy to implement as well!
The one major downside, which was my reason for sticking to Vanilla CSS, is that the templates have gotten so popular that it's fairly easy to tell whether a website has been styled using Bootstrap and results in websites looking almost similar to each other.
But with Bootstrap 5 coming out in the near future, maybe this perception might change. We'll have to see about that.
Verdict
CSS has been the 'defacto' way to style ever since one could create websites. And working with any framework, be it Tailwind, or Bootstrap is no small feat. Having a strong foundation working with CSS will give confidence when working with frameworks, allowing one to learn faster and give more methods to apply styles.
Tailwind has a growing follower base, and it's no surprise. It has completely changed the game for how one can create customizable stylings while sharing many similarities with vanilla CSS. But it can get overwhelming to work with, and you'll definitely find yourself going through the documentation way more than you'd expect, but don't let that put you off!
So I believe the verdict is: It depends
Ok, not the stunning conclusion you were looking for. But it truly does depend on the client's requirement, the time available, and the complexity of the project. An ideal answer would probably look like this: Create a quick mockup using CSS, then for quick and simple websites stick to pre-styled frameworks, or for unique and custom websites stick to pre-made classes framework, like Tailwind.
The web development space is heating up and not a day goes by without a new framework being launched. Maybe I'll revisit this topic when the styling framework space gets more heated up!
Wrapping up! 😊
Hope you enjoyed reading another edition of "My Take On". Definetly give your reaction and feedback, and of course, share this article with someone who needs to read this!
- For similar but short content, follow me over at Twitter 🐤 here.
- Check out what I'm currently working on over at Github 🐱 here
Till next time, take care and cheers!🥂