DRY CSS10:51 with Guil Hernandez
DRY stands for "Don’t Repeat Yourself." The main idea with DRY in CSS is to avoid repeating the same bits of code in our style sheet. In this video, we'll take a look at a few example of writing DRY'er CSS.
By now, we know that an element can have multiple classes assigned to it. 0:00 Now, a huge benefit to that, 0:04 is that, it can help us avoid repeating style declarations, in our style sheet. 0:05 There's a common best practice in CSS, or in web development in general, called DRY. 0:10 DRY stands for Don't Repeat Yourself, and 0:14 the main idea, is to avoid repeating the same bits of code. 0:17 So, let's explore this a bit further. 0:20 If we have CSS that's repeated many times, throughout a style sheet, 0:23 it can make maintenance difficult, because if we need to make any changes. 0:27 We're required to make those changes in various rules, instead of in one rule. 0:31 So, all that extra CSS, can also increase the size of the style sheet. 0:35 And it can make the browser do a little more work than it needs to do. 0:39 So, it's always a good idea to write our CSS, so that each property and 0:43 value pair, is only defined once. 0:47 And we can do that, 0:50 by abstracting repeated CSS properties, into separate rules. 0:51 So, let's take a look at some examples. 0:55 The DRY methodology works best with classes, not IDs, since as we know, 0:57 IDs are not reusable. 1:02 So, for instance, let's say that we wanna use a particular border radius style, 1:04 on many elements throughout our project. 1:09 Well, instead of adding the same border radius declarations, to each selector, 1:12 that needs them, we can create a reusable class selector for 1:17 that particular border radius style. 1:21 So, let's go back to our selectors.css file. 1:23 And I'm gonna copy this first comment here, and paste it at the very bottom. 1:27 And lets change this, to say DRY classes. 1:32 Okay, so, first, let' create a new class, of br for 1:39 border radius, and we're going to give this a border radius property. 1:45 And set the value to 0.5em. 1:51 So, once we save our style sheet, 1:54 we'll go back to our index.html file, and in the mark up, 1:56 we'll need to add that br class, to the contact forms class attribute. 2:01 So, right here, on line 12, right after the form contact class, lets add 2:06 the br class, and when we save our index.html file and refresh to browser, 2:12 we get those nice rounded corners, on our first form element. 2:18 So, now we're able to use this br class, 2:22 on any element that needs this particular border radius. 2:24 And this is a useful method when working with elements that have common styles, 2:29 with certain variations, or modifiers. 2:33 So, images, for example. 2:36 So, let's create one that styles our images, 2:38 particularly the avatar image in our login form. 2:42 So, right below the br selector, 2:46 let's create a new class selector, called avatar. 2:48 And for this class, we're going to display it block. 2:54 And we're also going to add a margin property. 3:00 And let's set the value to 0 auto 2em. 3:03 So, now let's say, that we also want to have a rounded avatar. 3:08 Well, right below the avatar rule, let's create a new rule. 3:13 This time the class will be rounded, and 3:17 we're gonna add a border radius property, and set the value to 50%. 3:20 All right, so now let's save our style sheet, and go back to the index.html file. 3:26 And let's add the avatar and rounded class, to the image elements. 3:32 So, let's scroll down here to line 28, 3:37 and right before the source attribute, let's go ahead and add a class attribute. 3:42 And first, we're going to give it the value avatar. 3:47 Followed by that rounded class. 3:51 So, now when we save our index file, and refresh the browser, 3:56 there we see our nicely centered and rounded avatar image. 4:00 Cool. 4:04 But now what's great is that we're also able to use this rounded class, 4:05 on any element that needs to be round, not just images. 4:10 So, next, let's create a few more of these classes. 4:14 This time, we'll create classes for our form button styles. 4:17 So, we'll go back to our selectors.css file, and the first thing we're gonna do 4:22 is, we're going to replace the button attribute selector group we wrote earlier. 4:27 So, these three classes here. 4:33 With a class button, so I'm gonna go ahead and select and 4:35 delete those three selectors, and write the class btn, for button. 4:38 And then right below the cursor declaration, 4:44 I'm going to add a few base button styles. 4:48 So, let's say font size, and the value will be 0.875em, 4:51 and I'm going to give it a font weight property, and set the font weight value 4:58 to 400, and right below that let's change the buttons color to white, 5:05 by giving it a hex value of pound fff. 5:10 Let's also add some left and right padding. 5:15 So, let's say, padding left, 20 pixels, followed by padding right, 20 pixels. 5:17 And finally, let's give it a text transform property, 5:25 that transforms the text and the button, to uppercase letters. 5:30 And right below this button rule, let's go ahead and 5:35 add a hover state while we're at it. 5:38 So, we'll once again write that button class, and 5:41 then add the hover pseudo-class right after it. 5:43 And then we're going to change the opacity of the button, 5:46 with an opacity property, and the value will be 0.75. 5:49 And since these are no longer attribute selectors, I'm just gonna go ahead and 5:55 cut them out of this section, and 6:00 paste them right here with the rest of the DRY classes. 6:02 [BLANK_AUDIO] 6:05 So, now we'll save our CSS file, and go back to our index.html file. 6:11 And let's give our button input elements, that button class. 6:16 So, right here in the first form, we'll scroll down to the first input type 6:20 submit, and let's add a class attribute, and give it the class button. 6:25 I'll just go ahead and copy this, and paste it in the opening input tag 6:31 below it,and then I'll scroll down to the second form, and find the login button. 6:36 So, right here. 6:41 And then I'm gonna paste in that class of button. 6:42 All right. So, when we save our index file and 6:45 refresh, we can see that our buttons are starting to take shape. 6:47 And now we can actually create reusable color theme classes, for our buttons. 6:51 Or any elements really. 6:56 So, let's go back to our selectors.css file. 6:58 And, lets create a class, called default, and 7:02 we're going to add a background color property. 7:07 And let's set the background color, 7:11 to the hex value pound 52BAB3, and right below that, 7:14 let's create the class error, and this is gonna be a shade of red. 7:20 So, let's also give it a background color property, and 7:27 we're gonna set this value to pound FF784F. 7:32 All right, so now let's save our selector style sheet, and 7:37 go back to our HTML file, and give our buttons, some of these modifier classes. 7:40 So, let's scroll up to the first form, and we'll find the first button, and 7:45 right after the button value, let's add the class default. 7:49 And then for our next button, let's go ahead and 7:56 give it the class, error, and let's scroll down to the last button. 7:58 And we're also going to give this one the class default. 8:03 All right, so let's take a look. 8:07 We'll save our index file. 8:08 And refresh, and now we have our nicely themed buttons. 8:11 So, the submit button has that aqua green color, the reset button is red, 8:15 and the last one also takes on that aqua green background color. 8:20 Cool. 8:24 So, now if we need to change the color of a button, 8:25 we simply need to define a different class name. 8:28 So, finally, let's make the two buttons here in the contact form, 8:32 display inline with each other. 8:38 But only when the browser or device is at a certain width. 8:40 And we can do that with a media query. 8:44 So, let's go back to our selectors.css file, and let's write a media query, 8:45 that will target elements when the browser is 769 pixels or wider. 8:52 So, we'll say @ media, followed by a set of parentheses. 8:57 ad we will use the min width media feature, and 9:01 we're gonna set that value to 769 pixels. 9:05 So, now, we'll want to define a reusable modifier class, that displays an element, 9:10 inline block when the viewport is at 769 pixels or wider. 9:16 So, lets call the class, I-N-L-N, for inline. 9:20 And in this rule, we're going to set that the width value to auto, and 9:27 right after that, 9:32 we'll add a display property, and we're gonna set the display to inline-block. 9:34 All right. So, let's save our CSS file, and we'll go 9:40 back to our HTML file, and we'll want our login, button down here at the bottom, 9:44 to remain block at all times, so we'll leave that one alone. 9:50 And let's scroll up and 9:53 apply that new inline class, to the submit and reset buttons only. 9:55 So, first, right in between the button and 10:00 default classes, or anywhere really, I'll go ahead and 10:02 add that new inline class, and I'll do the same for the reset button below. 10:05 So, let's save our index.html file, go back to the preview, and hit refresh. 10:12 And as we can see, in the narrow viewport size, the two buttons are displayed block, 10:18 by default. 10:23 The once the viewport is 769 pixels or 10:24 wider, that inline class sort of kicks in, and displays the buttons, inline. 10:27 So, now our CSS is a little more efficient, and maintainable. 10:33 Compare this to a style sheet that repeats all the reusable CSS, and you'll notice 10:38 that we've probably significantly reduced the lines of CSS in the style sheet. 10:43 [BLANK_AUDIO] 10:47
You need to sign up for Treehouse in order to download course files.Sign up