global or seperately margins?

[AlirezaM]

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

[Paulie_D]

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.

[AlirezaM]

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?

[Paulie_D]

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.

[AlirezaM]

Thank you very much for your helping!

I have added a codepen link in first comment

[Paulie_D]

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

[AlirezaM]

ok.

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

Thanks.

[Author]

Posts