Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Organisation of CSS

Hi There

Just a quick best practice question

If I am using the same colour on parts of a website which is the best to do

header {background-color:#000;} footer {background-color:#000;}

or this

.blackBackground {background-color:#000;} and then apply the class to each tag in question.

This is a simplified version of the quandary I currently have but I think you get the idea.

G

2 Answers

Ian Lunn
Ian Lunn
4,558 Points

A class name should describe the structure of the content rather than the style. If you use .blackBackground, then decide to make it blue, your class name will need to be changed X amount of times in the HTML.

I'd personally use multiple selectors for the same rule, like so:

header,
footer {
    background-color: #000;
}

Or you could use a preprocessor such as Sass and make use of variables.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

+1

@Ian's suggestion of using multiple selectors for the same rule, that's how I always do it.

  • more semantic
  • DRYer (Don't Repeat Yourself)

You can read more about using the DRY principle in web design in this blog post