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

00:00:02 welcome to this video
00:00:03 in this video we'll have a look at which
00:00:06 approach you should actually take
00:00:08 use vanilla css so just css
00:00:11 write all the styles on your own use a
00:00:14 component framework like bootstrap
00:00:16 and what does this actually mean
00:00:18 component framework or should you use a
00:00:20 utility framework like tailwind
00:00:22 css we'll have a look at all of that at
00:00:25 the simple example
00:00:26 of a button sounds boring it isn't
00:00:32 so we want to style that button and
00:00:35 obviously styling a button is not the
00:00:37 biggest challenge you face as a web
00:00:38 developer
00:00:39 but it's a good example for the question
00:00:41 i'll try to help you answer in this
00:00:43 video
00:00:44 should you do it on your own should you
00:00:46 use a framework for that a component
00:00:47 framework or a utility framework now
00:00:49 let's do it
00:00:50 on our own here's the html code for
00:00:54 this button and right now i only have a
00:00:56 little bit of styling set up for the
00:00:57 container to basically present this
00:01:00 button in the middle of the screen
00:01:01 here's our button and since it's the
00:01:03 only button on the page
00:01:04 i can select with the button selector
00:01:07 but let's still use a class
00:01:08 let's maybe name this class button
00:01:10 though so if we want to start this on
00:01:12 our own we simply add a class to that
00:01:14 button
00:01:15 with that well button class we just set
00:01:17 up
00:01:18 and now how do we want to style it well
00:01:20 maybe we want to inherit
00:01:22 the general font of our page and
00:01:24 therefore also set
00:01:26 a general font for this page with a font
00:01:28 family of censerif at least
00:01:30 to not use this ugly serif default i
00:01:33 have on my system otherwise
00:01:35 maybe you want to overwrite the border
00:01:38 to be one pixel solid
00:01:40 and then in this purple five two one
00:01:43 seven
00:01:43 five one maybe you want to set a
00:01:46 background color
00:01:48 of that same purple and therefore
00:01:51 set the text color to white and with
00:01:54 that if we reload
00:01:55 it's already looking not too shabby
00:01:58 maybe we then also want to add some
00:02:00 padding to the button
00:02:02 to well let's say three pixels
00:02:06 top and bottom and six pixels left and
00:02:09 right so this is how we use the padding
00:02:11 shorthand
00:02:13 like this let's maybe add
00:02:16 10 pixels left and right looks better
00:02:20 and we probably also want to add a
00:02:22 cursor
00:02:23 pointer and also add a hover and
00:02:26 an active style so button active button
00:02:30 hover like this and in there i want to
00:02:34 set the background color to
00:02:36 [Music]
00:02:38 basically the same purple though i will
00:02:40 pick a slightly
00:02:42 brighter one maybe this one here just
00:02:45 with the color picker which is
00:02:46 integrated into my ide
00:02:49 so that now i got a little bit of a
00:02:51 hover effect if i go over that
00:02:53 yeah it doesn't look too bad and last
00:02:56 but not least
00:02:57 i want to override the focus style to
00:03:00 set
00:03:01 outline to none there with that i got a
00:03:05 nice button which i can click and which
00:03:07 i style totally on my own
00:03:09 and if you want to learn more about css
00:03:11 in general how to write styles and way
00:03:13 more than these basics
00:03:15 definitely check out my complete guide
00:03:17 on css which i got
00:03:18 link can be found in the video
00:03:20 description however you probably didn't
00:03:23 look into this video just to see how you
00:03:24 can style a button
00:03:26 after all these lines of code are
00:03:29 maybe interesting but also something you
00:03:32 do a lot
00:03:33 now imagine that you of course have a
00:03:36 bigger

00:03:36 web page with way more than just a
00:03:38 button on it
00:03:39 and you need to style all elements that
00:03:42 are on that page
00:03:43 if you write these styles on your own if
00:03:46 you're not using any css framework
00:03:48 then obviously everything has to be
00:03:50 styled and positioned
00:03:52 and layouted by you now let's compare
00:03:56 this
00:03:57 approach here to using a component
00:04:00 framework like bootstrap so let's visit
00:04:02 getbootstrip.com
00:04:03 i also got a series on bootstrap on this
00:04:05 channel in case you want to dive deeper
00:04:08 and on bootstrap let's check out the
00:04:09 documentation and there let's go to
00:04:12 components
00:04:13 and let's visit the button section there
00:04:16 and as we see here we add the button
00:04:18 class and then we decide with button
00:04:21 primary
00:04:21 secondary and so on which style the
00:04:23 button should have and we get the hover
00:04:26 style and all that
00:04:27 out of the box automatically so what we
00:04:30 need to do for that to work is just
00:04:32 click on getting started
00:04:33 grab that cdn link which gives us the
00:04:36 bootstrap css package from a cdn
00:04:39 let's simply import it here can remove
00:04:42 that import here by the way that's from
00:04:43 well
00:04:44 old snippet we're not using an external
00:04:46 style file
00:04:47 and in here in or with the help of this
00:04:50 import here
00:04:51 we can simply start using these
00:04:53 bootstrap classes like button
00:04:55 button primary or maybe let's not
00:04:58 overwrite this one but simply add
00:05:00 a second one so that we can see the
00:05:03 difference
00:05:03 and now we only add two classes and if i
00:05:06 go back
00:05:07 and reload well unsurprisingly we got
00:05:10 that bootstrap button next to ours
00:05:12 the cool thing is we of course didn't
00:05:14 write any styling for that
00:05:16 and we got the full behavior we want out
00:05:19 of the box
00:05:20 that already shows us a big advantage of
00:05:22 component frameworks like bootstrap
00:05:24 we just start adding css classes to our
00:05:27 html code
00:05:28 we don't need to write a single line of
00:05:30 css code if we don't want to
00:05:32 we can simply start working with the
00:05:34 different components and layout options
00:05:37 this framework gives us this already
00:05:40 also
00:05:40 shows us the disadvantage of course
00:05:42 we're bound
00:05:43 or we're limited to use what bootstrap
00:05:46 in this case
00:05:47 you can use any other framework of
00:05:48 course what it gives us
00:05:50 if we want this to look differently we
00:05:53 can of course
00:05:53 overwrite it with our own css code but
00:05:57 if we start overwriting a lot
00:05:59 we quickly end up in a situation where
00:06:01 probably using
00:06:02 that framework isn't the right choice in
00:06:04 the first place because then we get the
00:06:06 worst of both worlds
00:06:08 we're pulling in this extra library
00:06:10 which of course needs to be downloaded
00:06:11 by the user
00:06:12 and we're still writing our own code
00:06:14 which also needs to be downloaded and
00:06:16 we're not even saving time then
00:06:18 still if we don't plan on overwriting a
00:06:20 lot using
00:06:21 bootstrap or a server component library
00:06:24 definitely is a great thing
00:06:25 we save time there is a third way though
00:06:29 there are utility libraries like
00:06:31 tailwind
00:06:32 css we can visit the talent page
00:06:36 and there we learned that taiwan is a
00:06:37 utility css framework
00:06:39 now what does this mean it means that
00:06:42 unlike bootstrap
00:06:43 tailwind doesn't give us automatically
00:06:46 pre-styled components like buttons
00:06:48 cards and so on it instead gives us
00:06:51 utility classes which
00:06:52 add a shadow which color something in a
00:06:55 certain way which color the text in a

00:06:57 certain way
00:06:58 and we can build our own components with
00:07:01 the help of these utility classes
00:07:04 this means that we have to write less
00:07:07 css code
00:07:08 not zero we probably still need to do
00:07:10 some things which the framework doesn't
00:07:12 offer
00:07:12 but we can simply add a bunch of utility
00:07:15 classes combined with our own styles
00:07:17 to get our final result so here if i add
00:07:20 a third button
00:07:22 and we then import tailwind css
00:07:25 which we do by clicking on installation
00:07:27 here on their page here we also got a
00:07:30 link to a cdn so let's quickly add this
00:07:33 next to our bootstrap link
00:07:35 and with that added we can go down to
00:07:37 our button here
00:07:38 and now we can start adding some of the
00:07:40 classes table and css
00:07:41 offers us and you can of course find all
00:07:43 these classes
00:07:44 in their documentation there are things
00:07:47 like
00:07:48 background purple for example
00:07:51 and hover colon bg dash
00:07:55 purple dark to turn this to a darker
00:07:59 button when we hover over it
00:08:00 then things like text white to give it a
00:08:03 white text color
00:08:05 maybe a font which should be bold
00:08:08 and then also some padding on the y-axis
00:08:10 so top and bottom with p
00:08:12 y 2 and all to the left and right with p
00:08:16 x 4 and then rounded corners
00:08:19 now these are all just classes the
00:08:21 framework offers us
00:08:22 you can look them up in their
00:08:23 documentation to learn which classes are
00:08:25 available and how they work
00:08:27 but they generally always follow that
00:08:29 pattern of giving you the utility to
00:08:31 assign a color a background color
00:08:33 some padding margins stuff like that if
00:08:35 we save that
00:08:36 and we reload the page we get this
00:08:39 button here
00:08:40 which also behaves and looks like a
00:08:41 button which
00:08:43 is not a pre-styled component but
00:08:45 composed
00:08:46 as we need it but with the help of
00:08:49 tailwind css so that's like the middle
00:08:52 way the in between way between write
00:08:54 everything on your own
00:08:55 and use a component framework where you
00:08:58 get everything working
00:08:59 out of the box but which one should you
00:09:01 use then
00:09:03 first of all here's a quick summary
00:09:05 vanilla css means we write all the
00:09:07 styles on our own and therefore we can
00:09:09 style everything as we wanted of course
00:09:11 we therefore have to know how to write
00:09:13 css
00:09:14 component frameworks like foundation is
00:09:16 an alternative to bootstrap basically or
00:09:18 bootstrap give you everything pre-styled
00:09:21 and you mainly use the classes they give
00:09:23 you the css classes
00:09:25 and utility frameworks like tailwind css
00:09:27 are in between
00:09:28 and they help you build your layout and
00:09:30 your styles
00:09:31 with utility css classes which one
00:09:34 should you use then
00:09:36 well vanilla css obviously gives you
00:09:38 full control that's awesome you got full
00:09:40 control over the styles you're writing
00:09:42 you don't necessarily have unnecessary
00:09:45 code
00:09:46 of course if you write bad css code then
00:09:48 you might end up with
00:09:50 spaghetti code or a lot of unnecessary
00:09:52 css rules
00:09:53 but in general you can control um which
00:09:56 code you need and which one you use
00:09:58 the downside especially and i'll come
00:10:00 back to that with component frameworks
00:10:02 like bootstrap is that you import
00:10:04 a lot which you might never use back to
00:10:07 vanilla css though
00:10:08 there we can also name classes as
00:10:10 exactly as we want
00:10:11 so for tail and css you set a padding
00:10:14 with
00:10:14 uh to top and bottom with py2 and so on
00:10:18 that might be unintuitive so it's
00:10:20 something you have to get used to

00:10:21 with custom css you decide how things
00:10:23 should be named
00:10:24 the downside of course however is that
00:10:27 you have to build everything from
00:10:28 scratch that's a lot of work obviously
00:10:31 that you have the danger of writing bad
00:10:34 code because maybe you're not a css pro
00:10:37 and maybe you're not really knowing how
00:10:40 css works and you just copy solutions
00:10:42 from stack overflow
00:10:44 which is fine to a certain extent but
00:10:46 which can also lead to bad code if you
00:10:48 don't know what you're doing
00:10:50 so these are downsides of vanilla css
00:10:53 for component frameworks like bootstraps
00:10:55 you can develop
00:10:56 very very fast of course everything
00:10:59 works as soon as you
00:11:00 add a css class to an element and that
00:11:03 of course means
00:11:04 you get a prototype or a complete
00:11:06 product page
00:11:07 up and running extremely fast you
00:11:10 typically also have code behind the
00:11:12 scenes
00:11:12 that follows best practices and
00:11:14 therefore is performant
00:11:16 and not too long too big
00:11:20 and you don't need to be a css expert
00:11:22 you can just start using beautiful
00:11:24 styles without even knowing css in the
00:11:26 end
00:11:26 that is why bootstrap was super popular
00:11:29 like three four years ago
00:11:31 and why it still is popular these days
00:11:34 downside of course no or little control
00:11:36 now with bootstrap
00:11:38 as you also learn in my bootstrap series
00:11:40 on this channel you can
00:11:41 overwrite the defaults it says you can
00:11:43 customize its theme
00:11:45 but that's more advanced and still
00:11:48 might not always be the best way for you
00:11:50 to really get the result you want
00:11:53 you might also have unnecessary overhead
00:11:55 code if you
00:11:56 import the entire bootstrap library and
00:11:59 you just style buttons and images
00:12:01 and you never touch things like you
00:12:04 never use the cards you never throw
00:12:06 these alerts it offers you
00:12:08 well then you import all these styles
00:12:10 still without using them so that might
00:12:12 be a downside
00:12:13 and one thing you can sometimes see
00:12:16 all websites look the same you can
00:12:19 customize bootstrap themes
00:12:21 but they tend to have a shared look so a
00:12:24 look which you just
00:12:25 recognize if you worked with it a bit
00:12:28 that might be totally okay for you
00:12:29 it can also be something you don't want
00:12:31 though now what about utility frameworks
00:12:34 like tailwind css
00:12:36 tailwind css and co they also allow you
00:12:39 to develop
00:12:40 fast in a fast way because you just
00:12:42 start
00:12:43 adding more classes than with bootstrap
00:12:45 but still you start adding classes you
00:12:47 don't need to write that much code
00:12:50 they also typically justice bootstrap
00:12:52 should follow best practices so you
00:12:54 typically can rely on that and here too
00:12:57 you don't need to be an expert
00:12:59 you probably need to write some custom
00:13:01 css code because it doesn't offer
00:13:02 everything you want in exactly the way
00:13:04 you want it
00:13:05 but it's certainly less code than if you
00:13:07 build everything from scratch
00:13:09 the downside of course still is little
00:13:11 control more control than with
00:13:14 bootstrap and so on but still you're
00:13:15 using a css framework so you don't have
00:13:18 full control that's just the nature of
00:13:20 it
00:13:21 also you might still have unnecessary
00:13:23 overhead code if you import the entire
00:13:25 library and you don't use
00:13:27 the margin top and bottom helper class
00:13:30 well then you still have it imported
00:13:32 so that's the downside here too and with
00:13:36 all that the question of course is
00:13:37 what's the verdict
00:13:38 what should you do and it depends on
00:13:40 your css knowledge
00:13:42 the time you have for your project and
00:13:44 which kind of project it is
00:13:46 is it for your company where you have

00:13:48 your own brand and your own style guide
00:13:51 anyways and it's rather hard
00:13:52 to squeeze bootstrap into that well
00:13:55 probably you got no other chance than
00:13:58 styling everything from scratch do you
00:14:00 enjoy working with css are you an expert
00:14:02 or do you want to become
00:14:03 better at it well besides taking my
00:14:06 course
00:14:07 then writing styles on your own also is
00:14:09 a great
00:14:10 practice in the end if that is not the
00:14:13 case however if you want to finish a
00:14:15 product as
00:14:16 quick as possible if you want to finish
00:14:18 your web page as quick as possible
00:14:20 and or if you don't know css that well
00:14:23 using bootstrap might be awesome you get
00:14:25 great looking results quickly
00:14:28 if you're kind of in between or if you
00:14:30 know css but are no expert and still you
00:14:33 want to style some things on your own
00:14:34 a utility framework like tailwind might
00:14:37 be the best choice
00:14:38 actually in a lot of situations that
00:14:40 might be really helpful
00:14:41 and it's definitely worth playing around
00:14:43 with it
00:14:44 so that's my overview that is my
00:14:48 opinion on these things that is my
00:14:50 answer to some of the questions i got
00:14:52 regarding
00:14:53 what should you do and i hope it's
00:14:55 helpful hopefully see you in other
00:14:56 videos too
00:14:57 bye

You may also like