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

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

The first method is basically object oriented CSS.

mkjeldsen
– mkjeldsen

2012-05-11 12:19:14 +00:00
Commented May 11, 2012 at 12:19 — mkjeldsen
– mkjeldsen, Commented May 11, 2012 at 12:19

jimw · Accepted Answer · 2012-05-11 13:33:18Z

1

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.

edited May 11, 2012 at 13:33

answered May 11, 2012 at 12:45

jimw

2,60817 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mesut Tasci Over a year ago

Yes,fisrt method almost same with inline css but second method not provide reusable css rules.

sandeep · Accepted Answer · 2012-05-11 13:13:40Z

0

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.

edited May 11, 2012 at 13:13

answered May 11, 2012 at 12:11

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

3 Comments

Mesut Tasci Over a year ago

I gave as an example.Why my approach not good ?.Of course I am creating classes that contain more css rules but these not more than.

Mesut Tasci Over a year ago

Um.I understand that I should inherit rules at css file instead of write on class attribute.True ?

sandeep Over a year ago

yes, it's better to create inherit rules instead of creating separate css for every property.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related