Question

There are 2 methods for external css assignments.I am using the first method; most websites use the second method. I wonder whether I am doing it wrong!

Fisrt method:

Create a class for almost each & every css rule and use them anywhere.

<div class="f_left d_iblock">
   <span class="w_100 f_left">blah blah</span>
</div>


.f_left{
    float:left;
}
.f_right{
    float:right;
}
.d_block{
    display:block;
}
.w_100{
    width:100%;
}

....
....

Second method:

Create css rules for each element.

<div id="container">
   <span>blah blah</span>
</div>


#container{
   float:left;
   display:inline-block;
}

#container span{
   width:100%;
   float:left;
   font-weight:bold;
}

In general I am using the first method. I am choosing this method because this provides the following to me.

• Small css files hence provide less load time.
• Reusable css rules.
• Clear code hence CSS management is more easier than second method.
• I don’t need to create an id or class attribute but only assign css rules. So I don’t need to think of a name for each element 🙂
• I think browsers can interpret css rules fast so this enhances the performance.

I see most sites generally don’t use this method most and I am starting to think that I need to strive to improve performance, but I am bulking html files instead of css with writing 3 to 4 css rule names to each element.

Note:I know little English. I hope you can understand me. I will be happy if you can write simple sentences 🙂

Answer 1

Your both method is not so good yet. you can write second method like this:

#container{
   float:left;
}

#container span{
   display:block;
   font-weight:bold;
} 

But your approach for creating a separate class for every property is not good.

There are some good article you have to read about check these

https://developers.google.com/speed/docs/best-practices/rendering

https://developer.mozilla.org/en/Writing_Efficient_CSS

UPDATED

Why your approach is not good suppose i have three different element there most of the property is same but are different.

For Example:

.one{
 float:left;
 font-family:"tahoma";
 font-weight:bold;
 font-size:15px;
 color:#000;
 line-height:1.5;
}
.two{
 float:left;
 font-family:"tahoma";
 font-weight:bold;
 font-size:18px;
 color:#000;
 line-height:1.5;
}
.three{
 float:left;
 font-family:"tahoma";
 font-weight:bold;
 font-size:13px;
 color:#000;
 line-height:1.5;
}

You can write this in a better way which decrease your CSS file size. Write like this:

.one, .two, .three{
     float:left;
     font-family:"tahoma";
     font-weight:bold;
     font-size:15px;
     color:#000;
     line-height:1.5;
    }
    .two{
     font-size:18px;
    }
    .three{
     font-size:13px;
    }

So, if i go through your approach i have to define each property separately, it’s time consuming & heavy also.