Grow your CSS skills. Land your dream job.

Using classes effectively in CSS

  • # April 29, 2008 at 5:11 am

    Hi Guys,

    Lets say I have 2 different classes and I attach them to 2 seperate divs.

    Code:
    .class1 {}
    .class2 {}

    Now I want those 2 divs to float to left. Here comes to question, which technic do you prefer?

    Technic 1

    Code:
    .class1 {}
    .class2 {}

    class1, class2 {float:left}

    Technic 2

    Code:
    .floatL {float:left}

    .class1 {}
    .class2 {}

    Actually, since we have option to add more than one class to an html element, I rather prefer Technic 2. What is your opinion? Or what is your experience about this two technics?

    Best Regards

    # April 29, 2008 at 8:07 am

    I don’t really like technique 2, only because you may decide to move one of the divs some where else at a later date. doing it this way would make more work for yourself.

    I prefer to just tell each class what to do separately.

    more like:

    Code:
    .class1 {
    float: left;
    }
    .class2 {
    float: left;
    }

    This allows for easier changing of each div for future updates / changes.

    # April 29, 2008 at 1:17 pm

    I think it really depends on how many other attributes you are using along with the float.

    If you had something like:

    Code:
    #left-box {
    float: left;
    padding-right: 25px;
    font-size: 2.0em;
    color: blue;
    background: white;
    }

    #right-box {
    float: right;
    padding-left: 25px;
    font-size: 2.0em;
    color: blue;
    background: white;
    }

    In this circumstance, I would be tempted to break off the common attributes into a class, and leave the unique ones alone like:

    Code:
    .box {
    font-size: 2.0em;
    color: blue;
    background: white;
    }

    #left-box {
    float: left;
    padding-right: 25px;
    }

    #right-box {
    float: right;
    padding-left: 25px;
    }

    Then call them like:

    Code:

    Otherwise, I actually prefer your first technique. Otherwise it can lead to some confusing / bloating problems if you try and separate every single possible attribute into it’s own class. Like:

    Code:
    # April 29, 2008 at 4:12 pm

    I see but I did not mean to declare a class for every single attribute, just for the very very common ones like float, but I got your points thank you very much for sharing your opinions.

    # April 29, 2008 at 7:22 pm

    @chris: I really like the way you used the class and id together. Never thought of it that way, I was always used to use a class or an idea, but ofcourse you can use both together. Good idea, good example :)

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

You must be logged in to reply to this topic.

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