cssperformanceclassbrowsertraffic

Css performance! more duplicate or unique

In large projects...

Which one is Faster and Optimized?

Which is better for browser and traffic?

*1.

.class1,.class2{
line-height:40px;
text-align:left;
margin-left:4%;
width:34%;
float:right
}
.class2{
width:44%;
float:left
}

.class1{
line-height:40px;
text-align:left;
margin-left:4%;
width:34%;
float:right
}
.class2{
line-height:40px;
text-align:left;
margin-left:4%;
width:44%;
float:left
}

*3.

.class1,.class2{
line-height:40px;
text-align:left;
margin-left:4%;
}
.class1{
width:34%;
float:right;
}
.class2{
width:44%;
float:left;
}

*new update suggested by @connexo.

Sepas for your time!

Solution

  • This is how I'd do it. Put all properties both classes share in one block, then define deviating properties solo after that.

    .class1, 
.class2 {
    line-height: 40px;
    margin-left: 4%;
    text-align: left;
}
.class1 {
    float: right;
    width: 34%;
}
.class2 {
    float: left;
    width: 44%;
}

    Aside from that structural thing I'd recommend to sort the declarations alphabetically and do not omit the semi-colon after the last declaration in a block.