Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

+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