Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Selectors

Well done!

You have completed CSS Selectors!

Sign up for Treehouse Back to Library

DRY CSS

10: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 examples of writing DRY'er CSS.

DRY Example

CSS:

.btn {
 cursor: pointer;   
 color: #fff;
 padding-left: 20px;
 padding-right: 20px;
}
.default-theme {
  background-color: coral;
}

HTML:

<input class="btn default-theme" type="submit" value="submit">

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    is that, it can help us avoid repeating style declarations, in our style sheet. 0:00
    There's a common best practice in CSS, or in web development in general, called DRY. 0:01
    DRY stands for Don't Repeat Yourself, and 0:05
    the main idea, is to avoid repeating the same bits of code. 0:08
    So, let's explore this a bit further. 0:11
    If we have CSS that's repeated many times, throughout a style sheet, 0:14
    it can make maintenance difficult, because if we need to make any changes. 0:18
    We're required to make those changes in various rules, instead of in one rule. 0:22
    So, all that extra CSS, can also increase the size of the style sheet. 0:26

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up