CSS use class and style on the same element, good or not?

Question

I would like to know if its ok to use class and style attributes on the same element?

I also want to know if my page will be faster when I use class and style attributes on the same element instead two different classes, for example:

I got two divs, one with style="width:680px;display:table;" and the second with style="width:680px;display:table;margin-top:20px;", I can make one class called "tst" > .tst{width:680px;display:table;} and I will use the class in both divs, but in the second one I will also add style="margin-top:20px;".

EDIT: I got another suggestion, to have two classes but one will hold width:680px;display:table; and the second one will hold margin-top:20px; and then I will use in the second div in both classes > class="class1 class2".

Which way will cause my page to load faster and why?

Answer 1

Puttin style parameters is never a good idea (except maybe if you are using java and put a style="display:none").

The reason is because css files get cached by the browser allowing the page to load faster. If you have 10kb of text embedded in the html this will be redownloaded each time, multiply this for several page and for thousand of users and you'll end up with bandwidth problems.

The way I do what you are talking about is setting a rule like you put in the edit:

.xyz {
width:680px;
display:table;
}

Then

.margin-20{
margin-top:20px;
}

And use them like this:

class="xyz margin-20"

It's also to be noted that what you are doing has little to no sense, usually divs have the same properties, a margin-top means you need to put a space on top of a div, this can be done with an div that you use a spacer like this:

.spacer {
height:20px;
...
}