Grow your CSS skills. Land your dream job.

How better to use?

  • # October 2, 2012 at 9:15 am

    Which example better?

    First Example:

    text-h {
    text-decoration: none;
    }

    text-h2 {
    text-decoration: none;
    font-size: 15px;
    }

    Second example

    text-h, text-h2 {
    text-decoration: none;
    }

    text-h2 {
    font-size: 15px;
    }

    # October 2, 2012 at 10:02 am

    2nd example…if only because it has a smaller file size.

    # October 2, 2012 at 10:32 am

    I agree. 2nd example is better. I had always done it the first way for a long time. But as I’ve gained experience, I have come to like the second approach. If you have a lot of styles that overlap, that approach really saves not only space but makes changes a lot easier.

    # October 2, 2012 at 11:27 am

    What I usually do is write my code in the way I want each class or ID styled. When I’m finished I’ll go back through and combine the similarities between classes or ID’s (show in example 2).

    # October 2, 2012 at 1:22 pm

    thanks for comment :)

    # October 2, 2012 at 5:36 pm

    @ChristopherBurton: why don’t you do that the first time?

    Ontopic: second approach

    # October 2, 2012 at 6:00 pm

    @Vermaas It’s just the way I work. No particular reason.

    # October 3, 2012 at 11:31 am

    One more example:

    Which example better?

    First-example:

    background {
    background: url(“blabla.png”) no-repeat;
    }

    Second-example:

    background {
    background-image: url(“blabla.png”);
    background-repeat: no-repeat;
    }

    # October 3, 2012 at 11:47 am

    Either works.

    I tend to use the first option for single background images.

    If I have multiple bg images then I find it somewhat easier to comma separate onto individual lines and each property.

    background {
    background-image:
    url(“blabla.png”)’
    url(“blafoor.png”);

    background-repeat:
    no-repeat,
    repeat;
    }

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".