CODEWITHSUNDEEP
css
Mesut Tasci
Mesut Tasci

Reputation: 3120

A css rule for each html element VS several simple css rules for each element?

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.

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 :)

Upvotes: 0

Views: 294

Answers (2)

jimw
jimw

Reputation: 2598

The main reason not to do it the first way is that it doesn't separate presentation from content: your HTML elements will look like <span class="f_left d_block w_100">, with the presentation embedded into the HTML itself. The whole point of CSS is to remove the presentation from the HTML so you can write <span class="product-list-description"> in HTML and then define the style in CSS.

The first method allows perhaps fewer CSS rules which can be re-used on lots of different elements, but it forces you to change your HTML whenever you want to change presentation. For example, if you have lots of elements with the same CSS rules applied, if you want to change how they look you'll have to change the HTML for every one of those elements. This is a lot of work and is prone to errors. With the second method, you'd have a CSS rule that applies to all those elements, and to change their presentation you only have to change the rule. In most projects this is a significant advantage.

Upvotes: 1

sandeep
sandeep

Reputation: 92803

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.

Upvotes: 0

Related Questions