Treehouse: Grow your CSS skills. Land your dream job.

is this good practice with selectors?

  • # March 30, 2012 at 5:35 pm

    I’m applying color to different text and I want to know if this is good or bad.

    instead of having multiple selectors with commas point to one color which saves a lot of lines of code-
    p, .content, #idunno{ color:white}

    instead I make a class called color1 and add the class anywhere i want a certain color.
    i feel this is easier because i can just pull the class off on the html side and its gone.
    it also helps me keep my color scheme to a minimum and realize when I am using too much variations of the same color.

    # March 31, 2012 at 1:51 am

    It really depends on opinion of good practice…I think it is much more flexible personally…a lot of people say not to have classes named after colors etc…but, again, matter of preference, if it is going to make my life easier in the long run, I will do it, in fact, I do it some times…

    # March 31, 2012 at 7:56 pm

    I’ve always been taught that creating classes with a color name are a bad idea. Why?

    .red {


    # March 31, 2012 at 8:09 pm

    I wouldn’t say it’s “bad” but it certainly creates more work and makes no sense to those viewing your code.

    # March 31, 2012 at 9:12 pm

    thats not what I was doing.
    the class was called color1

    # March 31, 2012 at 9:22 pm

    But how will you remember what “color1″ applies to?

    It’s irrelevant in terms of actual presentation and the output, but thinking long term (as in, “if I come back in 6 months, will I remember this?”) and as such you should try and retain colours within their relevant classes.

    So the Div class “content” would have “color: #fff” and div class “undercontent” would have the same. That way if you need to change it you know exactly where to look.

    # March 31, 2012 at 11:46 pm
    .red{ color: red; }

    It has nothing to do, specifically, with the name you choose (though, as pointed out above, it is a good idea to make understandable class names).

    The problem is that you’re making a class that only exists to apply one, completely arbitrary, rule – it’s no better than writing style="color: red;" in your markup. You’re missing the point of CSS and the problems it’s intended to solve.

    It’s also very easy to get carried away, and soon you’ll have one CSS class for every possible property:value combination, which is all kinds of “bad things.”

    Usually, if you want to change text color, there’s a reason for it. So if there is some more appropriate concept to build your class around, you should do so:

    color: red;
    /* and then later you might add */
    border: 25px dotted purple;
    # April 1, 2012 at 3:14 am

    I wouldn’t use classes for colors because of the single use of a class is wasteful to me but it wouldn’t hurt your overall sheet via caching or anything as it won’t add that much. Depending on the amount of classes.

    You can use multiple classes in an element so if you are doing that it could work and may save time.

    For example:

    In the long run it could save time but whether it is a best practice, not really but when is a consensus ever really 100% correct. :) BUT you are probably wanting to do this to allow a single variable to be added whenever necessary…this can also be done via PHP.

    Chris made an article a couple years back about this…give it a look and see if this helps you with what you are wanting to do.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.