Don't Repeat Yourself Code

Transcript

Hello. 

We are jumping back into DRY – Don't Repeat Yourself. But this time we are using borders.

Lets say I want a 15 pixel solid brown border on all sides of a tag. How many declarations do I need.

Drumroll please

12!!! Count ‘em: 12!!!

That means I repeated the same color style and width for four different sides. This is a bad case of code garbage. Thankfully, there's a DRY way to code a border and to code boxes in general. 

To get a 15 pixel solid brown border on all sides of my images, I'll code the border property with the values 15 pixels, solid, and a brown color code, each separated by a space. 

By the way, it doesn't matter what order you put the values in, check this out, I could write it like this too. And they get the same result. 

This new border property is called shorthand.

In CSS shorthand is when you use one property to do the work of multiple properties. 

B border is short for border width, border color and border style. Not to mention, it applies the width, color and style to all of these sides at once.

That's True DRY. 

There are shorthand ways to code padding and margin too.

If you want to give a tag the same padding or margin on all sides, then you just use the margin or padding properties and give them a single pixel value. There are definitely going to be times when you don't want to add padding or margin to all sides of a tag. So there's another way to code them shorthand. 

If you give padding or margin two values, the first value applies to the top and bottom of the tag, and the second value applies to the left and right at the tag.I want my images to have 20 pixels of left and right margin. So I'll code the margin property and give it a value of zero pixels and 20 pixels. 

This way, the top and bottom have zero margin, but the left and right get 20 pixels. That's True DRY.

Using shorthand is an awesome way to dry up your code. If you find yourself with a bunch of repeated values for your padding, margin or border, then it might be time to DRY things up.

Wow. We have finished Chapter 2. You are making great progress and building awesome coding skills. 

Lets  move on together to Chapter 3.