Grow your CSS skills. Land your dream job.

global or seperately margins?

  • # January 21, 2013 at 5:21 am

    Hello!

    Is it good to create some global margins and use them in every where needed?

    for example:

    .bottom1 {
    margin-bottom:5px;
    }

    .bottom2 {
    margin-bottom:10px;
    }

    .bottom3 {
    margin-bottom:15px;
    }

    or no it is good to use seperately margins for every elements like:

    .accordion {
    margin-bottom:10px;
    }

    .accordion {
    margin-bottom:10px;
    }

    .alert {
    margin-bottom:15px;
    }

    .progress-bar {
    margin-bottom:5px;
    }

    this is codepen example :
    http://cdpn.io/Ffdbm

    thanks in advance!

    Alireza.M

    # January 21, 2013 at 7:21 am

    The second option is the most preferred as, in the first option, you will be creating classes ‘in case’ they are used leading to unnecessary bloat in your CSS.

    # January 21, 2013 at 7:28 am

    But my problem is :

    When I implement my items (elements like accordion, toggle and …) in other ways they don’t look in line. what can I do to achieve the best result?

    # January 21, 2013 at 7:32 am

    We really can’t help you without a link to a live site or, perhaps, a CodePen example.

    Anyway, your second question doesn’t really relate to your first one. Either way you will be adding some CSS &/or HTML.

    # January 21, 2013 at 7:44 am

    Thank you very much for your helping!

    I have added a codepen link in first comment

    # January 21, 2013 at 7:48 am

    >I have added a codepen link in first comment

    But that has nothing to do with your second question.

    Regarding your first question, you can see that you do not have to add all those extra classes into your HTML over and over again to achieve the same effect. This is much easier to read and comprehend.

    I would much rather read semantic HTML/CSS than try to figure out what class ‘bottom1′ does.

    # January 21, 2013 at 7:52 am

    ok.

    Then I’ll upload the page in a hosting and show you what the exactly problem is.

    Thanks.

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

You must be logged in to reply to this topic.

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