Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

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;
...
}
share|improve this answer
    
Alright thank you. I got another question related to this. If I use width:180px in alot of css rules, should I split it? two rules > one with width:180px and the second with what ever it has. It will cause my css to have alot of rules each div I use class will have some rules inside it for example class=rule1 rule2 rule3 rule4 rule5.... –  Ron Apr 19 '11 at 10:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.