Search for a command to run...
I'm a solutions engineer lead, GitHub Star, Director of WomenDevsSG, and co founder of ragTech. I work at the intersection of tech, systems, and leadership, and this blog is where I share my journey through all three. Expect honest reflections, real experiences, and thoughts that are still forming rather than polished career advice.
Great article Victoria Lo I have used all of them, i agree with your opinion too
Have you had a look at TailwindUI?
Nice! Glad it helps :)
I used bootstrap on my first web dev project. I found it really confusing to edit, (likely because I was so new). I have used vanilla (sass or styled-components) since. It feels a bit more straight forward to implement what I want, and has the largest community/examples.
If you are in a group that is really proficient with a framework, or needs to crank out a lot of different sites quickly frameworks make sense.
Thanks! Glad you like it! Yes exactly, sass can be used with everything so it's great and there's not really any analysis for it (at least in my opinion) :D
I prefer the vanilla CSS. I'll share and tell my bad experience with Bootstrap framework.
I used to make part of a team which used to contain only two persons — one CEO and one iOS app developer. Before I entered in their team or they knew me, the iOS developer used to take care about their new site, but he did not understand the web development and made numerous mistakes in their site.
I saw their new social project, was interested and sent feedback to them for improving their new site. But I did not imagine he has used Bootstrap. Then I joined their chat group and sent feedback to them. When I told I have been newly graduated in computer science and worked with IT areas, they have been interested, contacted me and invited me to make part of their team.
The iOS developer delivered me their new site in my hands. I found numerous mistakes and discovered he used Bootstrap. I corrected and fixed hundred of mistakes, reorganised the CSS, optimised the site, replacing some unnecessary things for pure CSS. But I discovered that he also created hard-coded third-party codes, what made the site unfriendly to the responsive design. He also forgot the importance of UI/UX design principles and of accessibility (blind people, dark mode for people with photophobia like me and deaf-born people like me).
Due to some hard-coding and the unfriendliness of the site to the responsive design, unfortunately Bootstrap and the hardcoding forced me to use terms of multiple fixed width layouts. I knew it is very bad idea, then I was screwed up.
Then I redesigned the site for the mobile phones with less than 240px and less than 412px, and discovered that that one media query was not loaded. I and my best friend from Canada investigated and spent hours, trying to figure the cause. We thought it were other fixed media queries, but did not imagine it was Bootstrap. That forced me to create the separated CSS files and add links to HTML file's head, and they were loaded. Until the second query was not loaded, I did not understand. I and the Canadian investigated again, and I discovered that it was Bootstrap, because Bootstrap used max-width: 991px, which includes all the phones and tablets, bypassed these media queries and prevented them from loading.
After all that, I have had a very long talk with my best friend from Canada. He analysed both the original and new (with frameworks) sites, and said he was going to facilitate the original site, but hours later, he told me he gave up, because he said Bootstrap has many breakpoints, what mean much complexity. He said big or small changes, even if with Bootstrap, also mean complexity, and high complexity results in a big number of bugs. Bootstrap hides complexity and the people are unaware of that. He understood perfectly my pain, my sufferance and my insanity when I deal with Bootstrap.
Finally, I do not want to deal with Bootstrap problems. I can not maintain the mixed CSS. CSS using mixed Bootstrap and third-party codes is unmaintainable and unsustainable.
Interesting! Thanks for sharing Gustavo!
I've used Bootstrap for a while and even though it's great in terms of cutting down the time on making a presentable responsive design, I usually end up using vanilla CSS since I have flexibility on what styles I want to appear. I haven't tried Tailwind, but I've been using Bulma since it's lightweight and their predefined styles are neat.
Wonderful resource Victoria lo.
For my verdict I like to be creative with my css ,I mostly use vanilla css ..
Nice write up Victoria Lo
Though I also think that vanilla CSS will still be mostly used part
Frameworks exist for quick and fast solutions though for CSS, these add up to the final bundle and many optimization compromises if you add whole framework to your project.
Customization of Lib/Framework is really necessary.
Personally I as I am doing Frontend in React, and we are using SCSS on top of Bootstrap, I still don't feel like using Bootstrap as I know that I can achieve the same with much smaller vanilla CSS
And my preferences have started to shift towards CSS-in-JS
I had many interesting conversations related to the use of Tailwind and I agree with them completely. It's a utility framework and should be used when one doesn't want to touch vanilla CSS
With Bootstrap, one will always have to add some customizations with CSS
Thanks for your input! I've never tried CSS-in-JS. Isn't that like Atomic CSS? It sounds interesting so I'll check that out. Thanks :)
Awesome article đź‘Ť
For now I only use vanilla CSS, well including SASS. But if I'm to go for a framework, I'll pick Bootstrap first cause I heard alot about it 🙂, then Tailwind.
Let's be honest. We all started from level 0. There's no shame in that. Here's the series for the newbies~ Hope you can learn and feel free to ask a lot of questions! Check my other series: Random project to build
Hello devs! In this article, I'll be discussing some common ways to authenticate your API as a way to protect your routes from users that shouldn't access them. Why should I protect my routes? Certain routes such as your user's profile page or the ad...
How to Install Skills + Installing gog skill + Setup workflows
Part 1 - Intro to OpenClaw + Setting up on Oracle Cloud Free Tier + Connect to Telegram
And what The Human Condition taught me about slowing down
Beyond the ethics and environmentalism, Karen Hao’s exposé reveals the chillingly brilliant, multi-move strategy of AI’s quintessential architect.
How the system really works, what most people miss, and how to make opportunities find you
Hello everyone! Today's article is something I've always wanted to discuss. I remembered when I first learned CSS and hearing about Bootstrap and other frameworks like Materialize. At that time, I was unsure if I should learn these frameworks but I ended up with Bootstrap for a team project and it stuck around. And now Tailwind CSS seems to be rising in popularity, which makes me ponder if I should learn once again.
In this article, we will be looking at Vanilla CSS, Bootstrap and Tailwind CSS; analyzing their pros and cons and determining which one is best to learn in 2020. So let's begin!
My experience with CSS is that it is easy to pick up but hard to master. I do like CSS because I like to create custom styles that feels like my own. Also, it minimizes code as you are only writing styles that your site needs. Loading large chunks of CSS can slow down page loading time so by writing vanilla CSS, you reduce unnecessary code and boost your page's speed.
However, writing CSS from scratch can be daunting and tedious for many developers. This is especially true when the product you're making does not need custom designs but just a basic, simple look. In this case, it may be better to just use a framework, like Bootstrap, so let's take a look what it has to offer.
When I first discovered Bootstrap, I really love how fast I can make website templates with it. A simple blue button can be written as:
<button type="button" class="btn btn-primary">Click Me</button>
It's easy to learn, fast to implement and have a well-designed library of elements to use. It is also consistent across any devices or browsers, which means the website will remain looking good in terms of cross-device or cross-browser.
The downside is that it is so popular that many websites use it; so unless you override some styles with custom ones, your website will look very similar to other websites. Like a copy-paste.
Another con is that using Bootstrap means that we are importing large chunks of CSS code, whether we use it or not. For example, if our website don't have card or dropdown elements on it, we will still import the styles of unused elements when using Bootstrap. That can impact page performance, even with the slim version, because we are importing a lot of unnecessary code. All the more if we are using Bootstrap with jQuery.
Note: jQuery is no longer needed for Bootstrap 5.
Unlike Bootstrap which is component-based, this framework is utility-based. This means that it is a low-level framework, it does not have a library of pre-designed elements like cards, buttons or dropdowns, etc. Instead, it has pre-written classes like margins, paddings, font-size and so on. The same blue button we made using Bootstrap can be written as:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click Me
</button>
Because of the way it works, websites made using Tailwind does not look as generic as those made with Bootstrap. It is more versatile, customizable and lightweight compared to Bootstrap. However, as you can see, in order to make the same blue button, you need to write a little more code for Tailwind compared to Bootstrap. And of course, for any framework, you don't have complete control in the styling unless you override them so this applies to Tailwind CSS too.
While using vanilla CSS gives you full control and customization in terms of style, it is definitely not the winner here in terms of using it because it is just too much coding, especially if you are trying to efficiently build a website prototype. That's why in workplaces, you'll almost never use vanilla CSS to develop websites. You'll probably use some framework.
But in terms of learning, CSS is a must because if you are using other frameworks like Bootstrap or Tailwind, you might want to override some of their components or classes with your own CSS. Having that foundation that help you learn these frameworks faster and give you a little more control in styling too.
Bootstrap is a good choice for making generic but high quality looking websites fast. You want a navbar? Pop in <nav class="navbar navbar-expand-lg navbar-light bg-light">... You want a nice looking carousel? No problem. It's all pre-styled and there. You minimize coding and get your website done very easily. Furthermore, the new Bootstrap 5 has made considerable new benefits to the framework such as removing jQuery as a dependency and including CSS custom properties. They are also implementing a Utility API which is their own utility-based framework like Tailwind.
Tailwind offers the best of both worlds from Bootstrap and vanilla CSS. A website can look like it is built with vanilla CSS with all its custom and unique elements on it. Yet at the same time, it still retains that responsiveness and classy look like Bootstrap has. Of course, because it requires a little more coding than Bootstrap, as components are not pre-styled. It is not as fast to get a website done as Bootstrap so it really depends on what your team or client wants: custom style vs. speed.
So for my verdict, it depends (I know, boring answer).
Tailwind has completely changed the game in rapid and customizable CSS development. But at the same time, Bootstrap 5 is making huge progress as well. I have used a lot of Bootstrap in the past, so I am more comfortable with component-based frameworks at the moment. I have tried Tailwind as well and it was simple to get started and learn, but still I had to refer to the docs every so often because it takes time to learn something new.
So, depending on my clients and how much time I have to finish a project, I say I'll use Bootstrap for rapid development and a clean look, but I'll use Tailwind for projects with a more customized and unique look. Last but not least, learn a little CSS (you don't have to be a master) to be able to understand some essential concepts to use these frameworks like margin, padding, flex and so on.
Of course, there are also plenty of other frameworks besides the 2 in this article. Which one would you choose (doesn't have to be in the ones mentioned here) and why? Please share in the comments below. Thanks for reading, cheers!
Credits: