1
00:00:00,410 --> 00:00:04,540
By now, we know that an element can have
multiple classes assigned to it.

2
00:00:04,540 --> 00:00:05,810
Now, a huge benefit to that,

3
00:00:05,810 --> 00:00:10,390
is that, it can help us avoid repeating
style declarations, in our style sheet.

4
00:00:10,390 --> 00:00:14,990
There's a common best practice in CSS, or
in web development in general, called DRY.

5
00:00:14,990 --> 00:00:17,430
DRY stands for Don't Repeat Yourself, and

6
00:00:17,430 --> 00:00:20,670
the main idea, is to avoid repeating the
same bits of code.

7
00:00:20,670 --> 00:00:23,340
So, let's explore this a bit further.

8
00:00:23,340 --> 00:00:27,280
If we have CSS that's repeated many times,
throughout a style sheet,

9
00:00:27,280 --> 00:00:31,310
it can make maintenance difficult, because
if we need to make any changes.

10
00:00:31,310 --> 00:00:35,620
We're required to make those changes in
various rules, instead of in one rule.

11
00:00:35,620 --> 00:00:39,890
So, all that extra CSS, can also increase
the size of the style sheet.

12
00:00:39,890 --> 00:00:43,340
And it can make the browser do a little
more work than it needs to do.

13
00:00:43,340 --> 00:00:47,390
So, it's always a good idea to write our
CSS, so that each property and

14
00:00:47,390 --> 00:00:50,320
value pair, is only defined once.

15
00:00:50,320 --> 00:00:51,020
And we can do that,

16
00:00:51,020 --> 00:00:55,020
by abstracting repeated CSS properties,
into separate rules.

17
00:00:55,020 --> 00:00:57,610
So, let's take a look at some examples.

18
00:00:57,610 --> 00:01:02,490
The DRY methodology works best with
classes, not IDs, since as we know,

19
00:01:02,490 --> 00:01:04,250
IDs are not reusable.

20
00:01:04,250 --> 00:01:09,880
So, for instance, let's say that we wanna
use a particular border radius style,

21
00:01:09,880 --> 00:01:12,460
on many elements throughout our project.

22
00:01:12,460 --> 00:01:17,540
Well, instead of adding the same border
radius declarations, to each selector,

23
00:01:17,540 --> 00:01:21,380
that needs them, we can create a reusable
class selector for

24
00:01:21,380 --> 00:01:23,580
that particular border radius style.

25
00:01:23,580 --> 00:01:27,390
So, let's go back to our selectors.css
file.

26
00:01:27,390 --> 00:01:32,390
And I'm gonna copy this first comment
here, and paste it at the very bottom.

27
00:01:32,390 --> 00:01:36,940
And let's change this, to say DRY classes.

28
00:01:39,900 --> 00:01:45,520
Okay, so, first, let's create a new class,
of br for

29
00:01:45,520 --> 00:01:50,140
border radius, and we're going to give
this a border-radius property.

30
00:01:51,350 --> 00:01:53,645
And set the value to 0.5em.

31
00:01:54,750 --> 00:01:56,530
So, once we save our style sheet,

32
00:01:56,530 --> 00:02:01,180
we'll go back to our index.html file, and
in the mark up,

33
00:02:01,180 --> 00:02:06,540
we'll need to add that br class, to the
contact form's class attribute.

34
00:02:06,540 --> 00:02:12,050
So, right here, on line 12, right after
the form contact class, let's add

35
00:02:12,050 --> 00:02:18,050
the br class, and when we save our
index.html file and refresh to browser,

36
00:02:18,050 --> 00:02:22,040
we get those nice rounded corners, on our
first form element.

37
00:02:22,040 --> 00:02:24,870
So, now we're able to use this br class,

38
00:02:24,870 --> 00:02:29,110
on any element that needs this particular
border radius.

39
00:02:29,110 --> 00:02:33,480
And this is a useful method when working
with elements that have common styles,

40
00:02:33,480 --> 00:02:36,400
with certain variations, or modifiers.

41
00:02:36,400 --> 00:02:38,380
So, images, for example.

42
00:02:38,380 --> 00:02:42,900
So, let's create one that styles our
images,

43
00:02:42,900 --> 00:02:46,030
particularly the avatar image in our login
form.

44
00:02:46,030 --> 00:02:48,360
So, right below the br selector,

45
00:02:48,360 --> 00:02:51,620
let's create a new class selector, called
avatar.

46
00:02:54,720 --> 00:02:58,890
And for this class, we're going to display
it block.

47
00:03:00,490 --> 00:03:03,260
And we're also going to add a margin
property.

48
00:03:03,260 --> 00:03:08,779
And let's set the value to 0 auto 2em.

49
00:03:08,779 --> 00:03:13,418
So, now let's say, that we also want to
have a rounded avatar.

50
00:03:13,418 --> 00:03:17,660
Well, right below the avatar rule, let's
create a new rule.

51
00:03:17,660 --> 00:03:20,386
This time the class will be rounded, and

52
00:03:20,386 --> 00:03:26,740
we're gonna add a border-radius property,
and set the value to 50%.

53
00:03:26,740 --> 00:03:32,780
All right, so now let's save our style
sheet, and go back to the index.html file.

54
00:03:32,780 --> 00:03:37,700
And let's add the avatar and rounded
class, to the image elements.

55
00:03:37,700 --> 00:03:42,000
So, let's scroll down here to line 28,

56
00:03:42,000 --> 00:03:46,490
and right before the source attribute,
let's go ahead and add a class attribute.

57
00:03:47,970 --> 00:03:51,275
And first, we're going to give it the
value avatar.

58
00:03:51,275 --> 00:03:56,050
Followed by that rounded class.

59
00:03:56,050 --> 00:04:00,200
So, now when we save our index file, and
refresh the browser,

60
00:04:00,200 --> 00:04:04,930
there we see our nicely centered and
rounded avatar image.

61
00:04:04,930 --> 00:04:05,760
Cool.

62
00:04:05,760 --> 00:04:10,180
But now what's great is that we're also
able to use this rounded class,

63
00:04:10,180 --> 00:04:14,390
on any element that needs to be round, not
just images.

64
00:04:14,390 --> 00:04:17,490
So, next, let's create a few more of these
classes.

65
00:04:17,490 --> 00:04:21,250
This time, we'll create classes for our
form button styles.

66
00:04:22,710 --> 00:04:27,620
So, we'll go back to our selectors.css
file, and the first thing we're gonna do

67
00:04:27,620 --> 00:04:33,420
is, we're going to replace the button
attribute selector group we wrote earlier.

68
00:04:33,420 --> 00:04:35,440
So, these three classes here.

69
00:04:35,440 --> 00:04:38,960
With a class button, so I'm gonna go ahead
and select and

70
00:04:38,960 --> 00:04:44,960
delete those three selectors, and write
the class btn, for button.

71
00:04:44,960 --> 00:04:48,840
And then right below the cursor
declaration,

72
00:04:48,840 --> 00:04:51,710
I'm going to add a few base button styles.

73
00:04:51,710 --> 00:04:58,453
So, let's say font size, and the value
will be 0.875em,

74
00:04:58,453 --> 00:05:04,300
and I'm going to give it a font weight
property, and set the font weight value

75
00:05:05,450 --> 00:05:10,700
to 400, and right below that let's change
the button's color to white,

76
00:05:10,700 --> 00:05:15,380
by giving it a hex value of pound fff.

77
00:05:15,380 --> 00:05:17,420
Let's also add some left and right
padding.

78
00:05:17,420 --> 00:05:25,298
So, let's say, padding left, 20 pixels,
followed by padding right, 20 pixels.

79
00:05:25,298 --> 00:05:30,460
And finally, let's give it a text
transform property,

80
00:05:30,460 --> 00:05:34,660
that transforms the text and the button,
to uppercase letters.

81
00:05:35,810 --> 00:05:38,720
And right below this button rule, let's go
ahead and

82
00:05:38,720 --> 00:05:41,280
add a hover state while we're at it.

83
00:05:41,280 --> 00:05:43,470
So, we'll once again write that button
class, and

84
00:05:43,470 --> 00:05:45,820
then add the hover pseudo-class right
after it.

85
00:05:46,910 --> 00:05:49,920
And then we're going to change the opacity
of the button,

86
00:05:49,920 --> 00:05:55,270
with an opacity property, and the value
will be 0.75.

87
00:05:55,270 --> 00:06:00,076
And since these are no longer attribute
selectors, I'm just gonna go ahead and

88
00:06:00,076 --> 00:06:02,083
cut them out of this section, and

89
00:06:02,083 --> 00:06:05,394
paste them right here with the rest of the
DRY classes.

90
00:06:05,394 --> 00:06:11,174
[BLANK_AUDIO]

91
00:06:11,174 --> 00:06:16,160
So, now we'll save our CSS file, and go
back to our index.html file.

92
00:06:16,160 --> 00:06:20,610
And let's give our button input elements,
that button class.

93
00:06:20,610 --> 00:06:25,600
So, right here in the first form, we'll
scroll down to the first input type

94
00:06:25,600 --> 00:06:31,320
submit, and let's add a class attribute,
and give it the class button.

95
00:06:31,320 --> 00:06:36,325
I'll just go ahead and copy this, and
paste it in the opening input tag

96
00:06:36,325 --> 00:06:41,730
below it, and then I'll scroll down to the
second form, and find the login button.

97
00:06:41,730 --> 00:06:42,630
So, right here.

98
00:06:42,630 --> 00:06:45,920
And then I'm gonna paste in that class of
button.

99
00:06:45,920 --> 00:06:47,650
All right.
So, when we save our index file and

100
00:06:47,650 --> 00:06:51,710
refresh, we can see that our buttons are
starting to take shape.

101
00:06:51,710 --> 00:06:56,820
And now we can actually create reusable
color theme classes, for our buttons.

102
00:06:56,820 --> 00:06:58,200
Or any elements really.

103
00:06:58,200 --> 00:07:02,360
So, let's go back to our selectors.css
file.

104
00:07:02,360 --> 00:07:07,900
And, let's create a class, called default,
and

105
00:07:07,900 --> 00:07:11,260
we're going to add a background-color
property.

106
00:07:11,260 --> 00:07:14,992
And let's set the background color,

107
00:07:14,992 --> 00:07:20,589
to the hex value pound 52BAB3, and right
below that,

108
00:07:20,589 --> 00:07:27,129
let's create the class error, and this is
gonna be a shade of red.

109
00:07:27,129 --> 00:07:32,796
So, let's also give it a background color
property, and

110
00:07:32,796 --> 00:07:37,548
we're gonna set this value to pound
FF784F.

111
00:07:37,548 --> 00:07:40,773
All right, so now let's save our selector
style sheet, and

112
00:07:40,773 --> 00:07:45,700
go back to our HTML file, and give our
buttons, some of these modifier classes.

113
00:07:45,700 --> 00:07:49,940
So, let's scroll up to the first form, and
we'll find the first button, and

114
00:07:49,940 --> 00:07:56,260
right after the button value, let's add
the class default.

115
00:07:56,260 --> 00:07:58,420
And then for our next button, let's go
ahead and

116
00:07:58,420 --> 00:08:02,940
give it the class, error, and let's scroll
down to the last button.

117
00:08:03,980 --> 00:08:07,000
And we're also going to give this one the
class default.

118
00:08:07,000 --> 00:08:08,950
All right, so let's take a look.

119
00:08:08,950 --> 00:08:11,450
We'll save our index file.

120
00:08:11,450 --> 00:08:15,180
And refresh, and now we have our nicely
themed buttons.

121
00:08:15,180 --> 00:08:20,630
So, the submit button has that aqua green
color, the reset button is red,

122
00:08:20,630 --> 00:08:24,350
and the last one also takes on that aqua
green background color.

123
00:08:24,350 --> 00:08:25,270
Cool.

124
00:08:25,270 --> 00:08:28,290
So, now if we need to change the color of
a button,

125
00:08:28,290 --> 00:08:30,790
we simply need to define a different class
name.

126
00:08:32,970 --> 00:08:38,000
So, finally, let's make the two buttons
here in the contact form,

127
00:08:38,000 --> 00:08:40,070
display inline with each other.

128
00:08:40,070 --> 00:08:44,260
But only when the browser or device is at
a certain width.

129
00:08:44,260 --> 00:08:45,530
And we can do that with a media query.

130
00:08:45,530 --> 00:08:52,230
So, let's go back to our selectors.css
file, and let's write a media query,

131
00:08:52,230 --> 00:08:57,580
that will target elements when the browser
is 769 pixels or wider.

132
00:08:57,580 --> 00:09:01,470
So, we'll say @media, followed by a set
of parentheses.

133
00:09:01,470 --> 00:09:05,928
and we will use the min-width media
feature, and

134
00:09:05,928 --> 00:09:10,210
we're gonna set that value to 769 pixels.

135
00:09:10,210 --> 00:09:16,350
So, now, we'll want to define a reusable
modifier class, that displays an element,

136
00:09:16,350 --> 00:09:20,860
inline block when the viewport is at 769
pixels or wider.

137
00:09:20,860 --> 00:09:25,370
So, let's call the class, I-N-L-N, for
inline.

138
00:09:27,080 --> 00:09:32,990
And in this rule, we're going to set that
the width value to auto, and

139
00:09:32,990 --> 00:09:34,020
right after that,

140
00:09:34,020 --> 00:09:39,255
we'll add a display property, and we're
gonna set the display to inline-block.

141
00:09:40,590 --> 00:09:44,330
All right.
So, let's save our CSS file, and we'll go

142
00:09:44,330 --> 00:09:50,210
back to our HTML file, and we'll want our
login, button down here at the bottom,

143
00:09:50,210 --> 00:09:53,670
to remain block at all times, so we'll
leave that one alone.

144
00:09:53,670 --> 00:09:55,050
And let's scroll up and

145
00:09:55,050 --> 00:10:00,020
apply that new inline class, to the submit
and reset buttons only.

146
00:10:00,020 --> 00:10:02,670
So, first, right in between the button and

147
00:10:02,670 --> 00:10:05,950
default classes, or anywhere really, I'll
go ahead and

148
00:10:05,950 --> 00:10:10,400
add that new inline class, and I'll do the
same for the reset button below.

149
00:10:12,100 --> 00:10:18,130
So, let's save our index.html file, go
back to the preview, and hit refresh.

150
00:10:18,130 --> 00:10:23,100
And as we can see, in the narrow viewport
size, the two buttons are displayed block,

151
00:10:23,100 --> 00:10:24,185
by default.

152
00:10:24,185 --> 00:10:27,440
The once the viewport is 769 pixels or

153
00:10:27,440 --> 00:10:33,010
wider, that inline class sort of kicks in,
and displays the buttons, inline.

154
00:10:33,010 --> 00:10:38,630
So, now our CSS is a little more
efficient, and maintainable.

155
00:10:38,630 --> 00:10:43,110
Compare this to a style sheet that repeats
all the reusable CSS, and you'll notice

156
00:10:43,110 --> 00:10:47,479
that we've probably significantly reduced
the lines of CSS in the style sheet.

157
00:10:47,479 --> 00:10:52,029
[BLANK_AUDIO]