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
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
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.

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.

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.