Vanilla CSS vs Bootstrap vs Tailwind CSS - Which one should you choose?

welcome to this video in this video we'll have a look at which approach you should actually take use vanilla css so just css write all the styles on your own use a component framework like bootstrap and what does this actually mean component framework or should you use a utility framework like tailwind css we'll have a look at all of that at the simple example of a button sounds boring it isn't so we want to style that button and obviously styling a button is not the biggest challenge you face as a web developer but it's a good example for the question i'll try to help you answer in this video should you do it on your own should you use a framework for that a component framework or a utility framework now let's do it on our own here's the html code for this button and right now i only have a little bit of styling set up for the container to basically present this button in the middle of the screen here's our button and since it's the only button on the page i can select with the button selector but let's still use a class let's maybe name this class button though so if we want to start this on our own we simply add a class to that button with that well button class we just set up and now how do we want to style it well maybe we want to inherit the general font of our page and therefore also set a general font for this page with a font family of censerif at least to not use this ugly serif default i have on my system otherwise maybe you want to overwrite the border to be one pixel solid and then in this purple five two one seven five one maybe you want to set a background color of that same purple and therefore set the text color to white and with that if we reload it's already looking not too shabby maybe we then also want to add some padding to the button to well let's say three pixels top and bottom and six pixels left and right so this is how we use the padding shorthand like this let's maybe add 10 pixels left and right looks better and we probably also want to add a cursor pointer and also add a hover and an active style so button active button hover like this and in there i want to set the background color to [Music] basically the same purple though i will pick a slightly brighter one maybe this one here just with the color picker which is integrated into my ide so that now i got a little bit of a hover effect if i go over that yeah it doesn't look too bad and last but not least i want to override the focus style to set outline to none there with that i got a nice button which i can click and which i style totally on my own and if you want to learn more about css in general how to write styles and way more than these basics definitely check out my complete guide on css which i got link can be found in the video description however you probably didn't look into this video just to see how you can style a button after all these lines of code are maybe interesting but also something you do a lot now imagine that you of course have a bigger web page with way more than just a button on it and you need to style all elements that are on that page if you write these styles on your own if you're not using any css framework then obviously everything has to be styled and positioned and layouted by you now let's compare this approach here to using a component framework like bootstrap so let's visit getbootstrip.com i also got a series on bootstrap on this channel in case you want to dive deeper and on bootstrap let's check out the documentation and there let's go to components and let's visit the button section there and as we see here we add the button class and then we decide with button primary secondary and so on which style the button should have and we get the hover style and all that out of the box automatically so what we need to do for that to work is just click on getting started grab that cdn link which gives us the bootstrap css package from a cdn let's simply import it here can remove that import here by the way that's from well old snippet we're not using an external style file and in here in or with the help of this import here we can simply start using these bootstrap classes like button button primary or maybe let's not overwrite this one but simply add a second one so that we can see the difference and now we only add two classes and if i go back and reload well unsurprisingly we got that bootstrap button next to ours the cool thing is we of course didn't write any styling for that and we got the full behavior we want out of the box that already shows us a big advantage of component frameworks like bootstrap we just start adding css classes to our html code we don't need to write a single line of css code if we don't want to we can simply start working with the different components and layout options this framework gives us this already also shows us the disadvantage of course we're bound or we're limited to use what bootstrap in this case you can use any other framework of course what it gives us if we want this to look differently we can of course overwrite it with our own css code but if we start overwriting a lot we quickly end up in a situation where probably using that framework isn't the right choice in the first place because then we get the worst of both worlds we're pulling in this extra library which of course needs to be downloaded by the user and we're still writing our own code which also needs to be downloaded and we're not even saving time then still if we don't plan on overwriting a lot using bootstrap or a server component library definitely is a great thing we save time there is a third way though there are utility libraries like tailwind css we can visit the talent page and there we learned that taiwan is a utility css framework now what does this mean it means that unlike bootstrap tailwind doesn't give us automatically pre-styled components like buttons cards and so on it instead gives us utility classes which add a shadow which color something in a certain way which color the text in a certain way and we can build our own components with the help of these utility classes this means that we have to write less css code not zero we probably still need to do some things which the framework doesn't offer but we can simply add a bunch of utility classes combined with our own styles to get our final result so here if i add a third button and we then import tailwind css which we do by clicking on installation here on their page here we also got a link to a cdn so let's quickly add this next to our bootstrap link and with that added we can go down to our button here and now we can start adding some of the classes table and css offers us and you can of course find all these classes in their documentation there are things like background purple for example and hover colon bg dash purple dark to turn this to a darker button when we hover over it then things like text white to give it a white text color maybe a font which should be bold and then also some padding on the y-axis so top and bottom with p y 2 and all to the left and right with p x 4 and then rounded corners now these are all just classes the framework offers us you can look them up in their documentation to learn which classes are available and how they work but they generally always follow that pattern of giving you the utility to assign a color a background color some padding margins stuff like that if we save that and we reload the page we get this button here which also behaves and looks like a button which is not a pre-styled component but composed as we need it but with the help of tailwind css so that's like the middle way the in between way between write everything on your own and use a component framework where you get everything working out of the box but which one should you use then first of all here's a quick summary vanilla css means we write all the styles on our own and therefore we can style everything as we wanted of course we therefore have to know how to write css component frameworks like foundation is an alternative to bootstrap basically or bootstrap give you everything pre-styled and you mainly use the classes they give you the css classes and utility frameworks like tailwind css are in between and they help you build your layout and your styles with utility css classes which one should you use then well vanilla css obviously gives you full control that's awesome you got full control over the styles you're writing you don't necessarily have unnecessary code of course if you write bad css code then you might end up with spaghetti code or a lot of unnecessary css rules but in general you can control um which code you need and which one you use the downside especially and i'll come back to that with component frameworks like bootstrap is that you import a lot which you might never use back to vanilla css though there we can also name classes as exactly as we want so for tail and css you set a padding with uh to top and bottom with py2 and so on that might be unintuitive so it's something you have to get used to with custom css you decide how things should be named the downside of course however is that you have to build everything from scratch that's a lot of work obviously that you have the danger of writing bad code because maybe you're not a css pro and maybe you're not really knowing how css works and you just copy solutions from stack overflow which is fine to a certain extent but which can also lead to bad code if you don't know what you're doing so these are downsides of vanilla css for component frameworks like bootstraps you can develop very very fast of course everything works as soon as you add a css class to an element and that of course means you get a prototype or a complete product page up and running extremely fast you typically also have code behind the scenes that follows best practices and therefore is performant and not too long too big and you don't need to be a css expert you can just start using beautiful styles without even knowing css in the end that is why bootstrap was super popular like three four years ago and why it still is popular these days downside of course no or little control now with bootstrap as you also learn in my bootstrap series on this channel you can overwrite the defaults it says you can customize its theme but that's more advanced and still might not always be the best way for you to really get the result you want you might also have unnecessary overhead code if you import the entire bootstrap library and you just style buttons and images and you never touch things like you never use the cards you never throw these alerts it offers you well then you import all these styles still without using them so that might be a downside and one thing you can sometimes see all websites look the same you can customize bootstrap themes but they tend to have a shared look so a look which you just recognize if you worked with it a bit that might be totally okay for you it can also be something you don't want though now what about utility frameworks like tailwind css tailwind css and co they also allow you to develop fast in a fast way because you just start adding more classes than with bootstrap but still you start adding classes you don't need to write that much code they also typically justice bootstrap should follow best practices so you typically can rely on that and here too you don't need to be an expert you probably need to write some custom css code because it doesn't offer everything you want in exactly the way you want it but it's certainly less code than if you build everything from scratch the downside of course still is little control more control than with bootstrap and so on but still you're using a css framework so you don't have full control that's just the nature of it also you might still have unnecessary overhead code if you import the entire library and you don't use the margin top and bottom helper class well then you still have it imported so that's the downside here too and with all that the question of course is what's the verdict what should you do and it depends on your css knowledge the time you have for your project and which kind of project it is is it for your company where you have your own brand and your own style guide anyways and it's rather hard to squeeze bootstrap into that well probably you got no other chance than styling everything from scratch do you enjoy working with css are you an expert or do you want to become better at it well besides taking my course then writing styles on your own also is a great practice in the end if that is not the case however if you want to finish a product as quick as possible if you want to finish your web page as quick as possible and or if you don't know css that well using bootstrap might be awesome you get great looking results quickly if you're kind of in between or if you know css but are no expert and still you want to style some things on your own a utility framework like tailwind might be the best choice actually in a lot of situations that might be really helpful and it's definitely worth playing around with it so that's my overview that is my opinion on these things that is my answer to some of the questions i got regarding what should you do and i hope it's helpful hopefully see you in other videos too bye

Channel: Academind

Views: 153,539

Rating: 4.9175258 out of 5

Keywords: css, cascading style sheets, bootstrap, tailwind css, bootstrap 4, bootstrap css, foundation css, bootstrap vs foundation, bootstrap vs css, bootstrap vs tailwind, css vs bootstrap, bootstrap tutorial, css tutorial

Id: vmXIGdP8KN8

Length: 15min 1sec (901 seconds)

Published: Thu Apr 05 2018