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 CSS Basics (2014) Basic Selectors Reusing Classes

Posted by David Bilson
David Bilson
13,819 Points

Adding extra classes vs combining selectors

Why add extra classes to elements / selectors when you can just combine your selectors and do the following?

.primary-content, .secondary-content, #main-footer {
    border-top : 2px solid lightgrey;
}

It seems cleaner to me to do the above than add the extra class of .t-border to your .pimary-content, .secondary-content and #main-footer

.t-border { border-top : 2px solid lightgrey; }

4 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi David Bilson ,

This was just a suggestion, but also a tiny glimpse into a commonly used CSS methodology called OOCSS(Object Oriented CSS). This is a method for writing reusable CSS that is fast, scalable and maintainable.

Adding extra classes to your HTML is not always a bad thing. :)

Julie Kohler
Julie Kohler
6,122 Points
Julie Kohler
Julie Kohler
6,122 Points

Sorry, I still don't understand the answer to this student's question. So WHY is the method in the video better??

David Bilson
David Bilson
13,819 Points
David Bilson
David Bilson
13,819 Points

Thank you for your answer Andres.

If that was the case I would see if I could be more specific with that selector.

i.e

<div class="primary-content">
            Content here
</div>

<div class="secondary-content">
                       Content here
</div>

<footer id="main-footer">
                       Content here
</footer>

If i had used the css rules below to give me a 2px solid grey top border and I wanted the border of the .secondary-content to be black instead of grey, then I would be more specific with the footer declaration to override the rule.

.primary-content, .secondary-content, #main-footer { border-top : 2px solid lightgrey; }

div.secondary-content  { border-top : 2px solid lightgrey; }

or even change the CSS rule and omit .secondary content

.primary-content,  #main-footer { border-top : 2px solid lightgrey; }

.secondary-content { border-top : 2px solid #000; }

That way I am not adding extra markup to my HTML just to enable me to style it differently. In certain cases, such as editing with a CMS, you may not be able to touch the HTML markup at all.

i.e

Thing www.csszengarden.com where you have to change the design using just the HTML markup you have been given.

I am only altering the presentation of the content by using the CSS stylesheet.

I don't like adding loads of extra classes to the HTML markup, when you can achieve the same result by using existing elements / selectors and specificity to do the same job.

David Bilson
David Bilson
13,819 Points
David Bilson
David Bilson
13,819 Points

Many thanks Guil,

In the past I had always read that classitis and divitis were bad.

Andres Aguero
Andres Aguero
30,545 Points
Andres Aguero
Andres Aguero
30,545 Points

Hi David,

In the example you presented everything runs correctly. But say I wanted my .secondary selector different from the others, maybe I wanted that selector to have a black background. In this case, t-border would have a css rule of

.t-border{ background-color:#000; }

This would distinguish this class selector different from all the other ones.