CSS CSS Basics (2014) Basic Selectors Reusing Classes

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
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

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

Thank you for your answer Andres.

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


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

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

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

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.


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.

Many thanks Guil,

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

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.