Skip to main content

Forums

This topic contains 4 replies, has 0 voices, and was last updated by  Volkan Görgülü 11 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #22608

    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

    #47167

    Adam
    Member

    This reply has been reported for inappropriate content.

    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.

    #47174

    Chris Coyier
    Keymaster

    This reply has been reported for inappropriate content.

    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:
    #47177

    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.

    #47183

    Edwin
    Member

    This reply has been reported for inappropriate content.

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

icon-link icon-logo-star icon-search icon-star