Improve your CSS by Keepin' it DRY

what's up good peeps my name is Kevin and this channel is all about learning to build website and learning how to make them look good while we're at it this week we're gonna be looking at writing better code by keeping it dry or in other words don't repeat yourself and at the same time at the end of the video we're gonna look at a cool button effect that we can try out too so let's get started so what we're gonna do is I'm gonna take a look here at a file I'm gonna do sort of things the wrong way to start with and then after that we're gonna go through and look at a better way of doing things now the one thing that's really important to know is this isn't like essential knowledge but I think it's really good things to know especially early on if you actually want to do this as a living you're gonna need to know this anyway and even if you're just doing it as a hobby or you're building you a little website right now this is a really important thing to know it's gonna make your life so much easier it's going to make your lives just better so let's get to it so as you can already see on the screen I have a very simple basic website here and if we take a look at what I've done so far I just have three sections here sections start section middle section and each one has a container inside of it and a heading one heading to a paragraph and a little link down at the bottom we can see that there I haven't done too much in my CSS but let's go jump in and just see what I've already done I'm bringing in a Google font bringing in two comaat infant is this nice one up here and then lotto or late oh let's call it lotto right here so Vlad I said to my body I've turned the margined to zero on my body because that always gets in our way for my age ones I've put a comma on infant put the weight up to 700 change my font size to 75 pixels and just put my margin to zero to get rid of a bunch of extra space on my aged ones on the h2s I've just made the font size a little bit smaller got rid of some of the margin that was on the top and made sure the font weight was 400 so it's not bold and my paragraphs I've just increased the line height and the links I've just switched the color over to inherit for now because they looked really with that blue color the last thing I've done is just putting my container here with a width of 70% and margin:0 auto to center it on my page now what I want to do is I want to give each one of these sections its own color so let's start by doing this I want to set it up so it looks nice but let's just start off with the first one start and we need to come in here any company with a background color and I already have a few colors picked out RGB 41 60 to 70 so that's the color I want for that one over here in the middle buddhu did you find my color my middle I want to have a background color of 150 for 199 150 95 I did something wrong our GB there we go a nice lighter version of that other one and the last thing I want to do is my end just to make it more interesting let's give this one a background-image:url is go back my image folder and MTL dot g PG there we go a nice picture of my hometown this sadly I'm I'm a teacher and a lot of my students give me files that look a little bit like this let's just go and fix the colors a little bit here to the text is hard to read color I did have it when white and we're here let's do another color white so we can actually read our text a little bit so I get things like this for my students so first off just going a little bit into the whole making it look good thing make sure you put some padding when you're using background colors it looks terrible when our things are stuck like that so obviously what I could do now is I can come to my Start and do padding top whoops I'm having some trouble here top 100 pixels ah that's better and padding bottom 100 pixels ah there we go that top ones looking a lot better but now we got to go do that in the middle one now so okay let's go to the middle padding top 100 pixels padding but bottom 100 pixels ah there we go and oh I gotta go do that on my third one now - wait a second this video is all about not repeating ourselves we don't want to repeat ourselves this is getting repetitive and what if I decide I don't like those I think it would look better if it was smaller or bigger and then I have to go and change them all oh my goodness that's just way too much work I am lazy keeping it dry lets us be nice and lazy which I like a lot so I'm going to bring that back down to there and let's just make our life so much easier section all of these happen to be sections and so section padding and let's keep it even shorter 100 pixels top and bottom and zero pixels left in right there we go all of them get it in one shot oh you know what that would be better if it was 120 pixels all of them update at the same time keeping it dry I'm not repeating myself I'm only putting my padding on one line of CSS instead of spreading it out over each one of my classes that needs it and it makes my life so much easier for updates and so much easier for changing things so by doing something like this where I'm just settling all my sections giving them the same padding and I'm good to go and then I go you know what this middle one that one could actually use a different from the rest I want that middle one to be different padding one that's a 250 0 whoop I did that on my start I meant to do it a middle but that's okay it shows you the point anyway padding is different on this one those ones so I can always overwrite this if I need to but in this case I don't need to so again keep them all the same and I think that looks nice and nifty and pretty good now if any of you have used something like bootstrap or foundation or anything though frameworks that are out there you've probably used a lot of dry stuff especially with stuff like buttons and a few other things as well and I love how they treat buttons so I'm gonna do my own buttons I treat my own buttons like this normally anyway as long as I have different types of buttons so you see here I've made a link normal button a link of ghost button and a link of normal that last one should be normal if that last one should be an awesome button because I have my button awesome class on there and again I see lots of people who do this so they have their first button so it's a stew of my button normal and I am going to start display let's give it a background color I don't have one pre pick that's actually a pretty good color so let's try that out save and there's my background okay I need to do my text-decoration:none I need to give it some padding say one M two M's is usually a nice little balance and the spacing is a bit off because I need to change the display to inline-block alright and that looks a bit better okay that's actually pretty good now my button normal let's come and do a button normal hover I don't need to change anything here actually except my color let's just make it a little bit darker and there we go I have a nice little hover effect on my button okay but now I need my Ghost button over here so let's start there I want my BTN Ghost I need this to be display:inline-block I need the text oh wait a second I'm repeating myself again I don't want to repeat myself so let's just delete this and we'll come back to that in a second it's something like display:inline-block all my buttons need that text-decoration:none I want that on all of them get out of there padding out of there and what I'm going to do is I'm going to make another class here and this if you've used bootstrap or something is something you might have seen before is the button class so my button will have a display:inline-block it will have padding of one M two M's and it will have a text Declaration of none and now obviously it's not working properly I actually am not using this class I have to come back and I'm gonna have a button and it's a button normal and I'm stealing bootstraps naming convention a little bit they don't have a button normal but they have they always do button button something that styles it and I just like that for keeping the consistency I know this this class works with my button because it starts with the little shorthand for my button so I'll save my HTML file there and I'll come back oh just saving it all of a sudden these properties are applied so we can see that it's working really nicely and now let's just go and add that BTN here BTN and let's come down over to here and do another BTN and let's come over to here and you can see that padding is being applied here and my inline block and the text decoration is gone on all of them so my button is this a global setting just like I was using my sections before I was taking my padding and applying it all of my buttons need display:inline-block all of my buttons I want this padding on it and all of them are gonna get my text decoration done and then I'm using separate classes to style what they actually look like and make them a little bit different from one another so now I can come down and do my BTN ghost and this one's a border let's say two pixels solid white the color is white there we go and then I can copy hover my border is actually gonna stay the same but my background will change to white and my color will change over to black and I get a nice little hover effect on that one and very little CSS I'm not repeating myself again I'm doing everything I can not to repeat myself and it makes my life so much easier so that's gonna go into my button awesome now just again my button awesome actually I'm gonna make it a lot like my button normal I only need this one button awesome let's just save that so we can see my button over there and then I can come in what I want to do for this one and it's not really gonna work with this background so let's just ditch the background um should probably shouldn't have used that background let's just give it a nice let my color Pickers having some trouble let's just give it a nice light gray and if I'm doing that I need to turn off there we go and there's my button awesome there's my button awesome oh I have my color set to inherit but normal the color should always be white on these and color white I think that looks a little bit better than that black that was coming through and now let's do a BTN awesome hover alrighty so for my button awesome hover what do I want to do I want to give this one I wanna make this one a little bit different I'm gonna do a box shadow of let's say two pics so no I want to do is zero say Chi pixels down three pixel blur and I want a negative three pixel spread and let's give it a RGB a we want black so it's blacks nice and easy and maybe point six let's see what that looks like jiù jiù jiù oh I don't want that am i hover I want that let's just copy that because I'm going to need a box shadow anyway save oops save means that too much hmm we barely see it 0.75 what if I just put this to 0 for now actually let's make that 4 and make that negative 2 I want to see that little shadow and I want to be subtle so we see there's a shadow there it's disappearing when I'm hovering it's a really subtle shadow but that's sort of the point and then what I want to do is just delete this for now I want to transform this and I want to do a translate Y so I only wanted to move up so transform lets me move things well transform I get a lot of options translate lets me move and translate Y means I'm only moving it on the y-axis so let's move it 10 pixels up and you can see it's jumping 10 pixels so that's you know kind of fun hover effect I guess but not really what I'm going for what I'm really going for is I want it to look like it's moving but the shadow stays in the same place so we have to take our box shadow again fog shadow I still want that to be zero pixels but now I'm moving it up 10 so I'm gonna take this my original shadow is down 4 pixels I'm gonna put this at 14 I'm gonna keep my blur the same and let's just keep that the same for now and my rgba is the same and let's just see what that looks like now when I do it so right away you can see it looks like it's jumping up and the shadows staying there it looks kind of weird though so this is where it's really cool I put the negative 2 on this just because if it's at the zero for my spread you can see the shadows sticking out the sides a little little bit it's super subtle but by putting it at negative 2 ish it's not sticking on the side so it's only on the bottom so it looks like it's a shadow sort of being cast on the ground and now what I want to do is I want to take that shadow and I want to you know if something lifts in the air the shadow sort of changes so I'm going to do like a negative 10 maybe and now you can see it looks actually this is gonna have to be bigger straight 18 just because this negative spread is sort of playing with how that's working so now let's make this blur a little bit bigger to 8 so there you go it looks sort of like the box is lifting up in the air the only thing is it's on and off on and off on and off on and off so it doesn't look very realistic that something would just hop up into the air that fast so what we now need is a nice transition I'm gonna transition all these in out and do it over 250 milliseconds so transitions if you don't know them is just to take a whoops and that transition shouldn't be here that transition should be here it's taking this state and we're transitioning all the properties over 250 milliseconds and we're easing the animation in and out and now I get this nice little hover effect so it's looking and this shadow should probably become maybe we do point six there so it gets a little lighter so it looks like the box is moving up in the air the shadow is sort of moving down and away from it which is sort of what would happen in real life so it gives us the buttons lifting up in the air like that you know fun little effect that you can play around with and there's a lot of cool stuff you can do with that so I really encourage you to play around with it and see if you can come up with something that's a little bit more fun or maybe more realistic I'm doing this pretty fast but I'm pretty happy with the result that we just threw together now the last thing is this transition could probably go and I could put that on all my buttons and save and then I get that nice transition here I get the transition there and I get the transition here so again don't repeat yourself we want to keep the transitions Oh my buttons another thing you could do which is kind of fun if you're using your transitions for everything a lot of the time we want our transitions to be on everything is you can put a nice little star up here which selects everything and do a transition and hit save and that should work for absolutely everything except for some pseudo elements so if you're using stuff like before-and-after like I did in my last video on navigation so you could always check that out you'll have to set this transition up to be on the before and the after because if not this star doesn't actually grab them because there's pseudo elements you have to save those err style those along with it so this makes sure that everything on my site has a transition as long as there's a hover effect or whatever type of effect that I might be after so that's it again we're taking a look at putting in some dry code trying not to repeat ourselves and try to make it look good with some transitions as well as I tried to show you a few different button ideas here and fun things you can do with buttons that keep it out you know try and stay away from too much of the norm without making things too complicated so just really nice skill if ever you see yourself repeating the same code over and over again you're putting the same padding on everything come up with a class just for padding that you can use all the time anytime I need something to have a margin bottom of 50 okay well I'm putting margin bottom of 50 on six different things I'm gonna make my own class for that and I'm just going to use it everywhere all of my sections what doesn't matter they're class they're all getting the same padding well I'm gonna go and just say all my sections have that if I'm creating my own buttons I'm gonna make my own default button that just sets the foundation for my button and then I'm gonna style my buttons separately with their own classes on top of that class there I really hope you like this video and I really hope you learned something from it too if you did like it please hit the like button if you have any comments questions suggestions anything like that leave them in the comments below I'm gonna make sure to be active down there in my comments and if you did like it also hit the subscribe button to keep getting more content like this thank you so much for watching how this resolves a great day

Channel: Kevin Powell

Views: 53,662

Rating: 4.9702234 out of 5

Keywords: HTML, CSS, Tutorial, DRY, Don't Repeat Yourself, code better, button hover effect, dry css, css3, html5, improve css, Kevin Powell, how to, coding, programming, writing code, better css, css tutorial, html tutorial, css how to, html how to, css button, css buttons, cool css button, button hover, button hover css

Id: 0px6YH-cauQ

Length: 19min 45sec (1185 seconds)

Published: Wed Oct 19 2016