- Course Overview 1:49
- Attribute Selectors 8:44
- Styling Form Buttons and Links with Attribute Selectors 3:34
- Attribute Selectors Challenge 3 objectives
- DRY CSS 10:51
- Child, Adjacent, and General Sibling Combinators 9:03
- Combinators Challenge 2 objectives
- Attribute Selectors and Combinators Review 5 questions
Preview
Video Player
00:00
00:00
DRY CSS
10:51DRY 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 examples 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 let's change this, to say DRY classes.
1:32
Okay, so, first, let's 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 form's class attribute.
2:01
So, right here, on line 12, right after
the form contact class, let's 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 button's 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, let's 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
and 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, let's 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