Transcript

00:08 so here's just a very rudimentary
00:10 example of using some utility classes
00:12 now um this is gonna show some pros and
00:15 cons right as you see here I have a page
00:19 that is purely just some blank um you
00:23 know sections that we can just scroll
00:24 through each one is 50% height and they
00:28 alternate between white and green okay
00:31 let's look at these so here we go if we
00:34 go look at this top container I have 5
00:37 v h VG : white two classes one makes it
00:43 50% height the other one makes it
00:45 background white okay we look at this
00:48 green container as the same thing it's
00:50 50 VH : EG success so uses the success
00:54 color from site styles now that's really
00:58 cool look how easy that was i just added
00:59 these classes right but we also have to
01:03 think right let's say in the future i
01:06 wanted to change the height of these
01:09 sections
01:11 right I could have created a section
01:15 height swatch a swatch I had a class of
01:18 let's say um section height or you know
01:21 section container and then gave that a
01:24 height of 50 VH and then at that point I
01:27 would put the same class on all of these
01:30 now at in the future if I ever wanted to
01:33 update that if I were to use a swatch
01:36 I'd only have to update it one time but
01:39 now because I use these utility classes
01:40 I have to go through each one and change
01:44 each one individually now if I already
01:48 implement this using swatches I could go
01:50 ahead and create a height swatch
01:57 and let's say we were to give it a you
02:00 know section container or something like
02:04 that right and I just said a simple
02:07 height and I did 50% of the browser
02:11 window there we go so now I have a
02:14 swatch called section container um I
02:16 could then go and add this class I won't
02:20 do that I won't waste your time doing
02:21 that I could add that section container
02:23 class to each one of these okay instead
02:26 of have instead of using the utility
02:28 class I could have done that now this is
02:33 the same mobility implementation we
02:36 achieve the same results potentially in
02:38 two different ways and which way is
02:40 better in this particular instance I
02:42 think the swatch is better right because
02:45 um here if I ever decided I wanted to
02:49 make all my sections 60 VH or 66 VH
02:54 that's really simple I just changed my
02:57 swatch and it magically updates
02:58 everywhere but because if I were to use
03:02 the utility class method to do that I'd
03:05 have to go to each individual one and
03:08 change the class
03:12 so while utility classes are very great
03:15 they're convenient as heck um think
03:18 about the think about your use case if
03:20 you're using the same utility class too
03:22 many times okay in certain situations
03:25 right um maybe you should rethink maybe
03:29 using a swatch could be better right
03:31 maybe are in the future are you going to
03:33 want to change that in the future you're
03:35 gonna want to change this background
03:36 instead of it being green to be
03:38 something else maybe we should have a
03:40 section alternate background or
03:42 something like that right so that we we
03:44 can manage that one color centrally now
03:48 granted this this uses the colors from
03:50 site style so you could change the
03:53 success color but what if you use that
03:56 success color somewhere else right and
03:57 you didn't want that right so um just
04:00 think about that um just as a plus and
04:04 minus while utility classes are great we
04:06 don't want to go full heartedly into
04:08 them too much because then we're gonna
04:11 get into the boat where we were before
04:13 where all of our settings are to local
04:16 so keep that in mind I hope you enjoy
04:19 you till ''tis they are wonderful um and
04:22 go ahead and make your websites great
04:31 "}]