Improving speed on loading css

Question

I'm wondering is there a difference in performance by the browser if you code like this:

<div class="css-1 css-2 css-3 css-4 css-5">

<div class="css-everything">

Loads the site faster if you put everything in .css-everything, instead of partial css classes?

i don't think it's faster. i will be faster and better to put css code in different css files. this will keep it clean and you can search faster when you need to change something. — Kees Sonnema
– Kees Sonnema, Commented Jun 25, 2012 at 13:48
@KeesSonnema Only when in development. When you actually deploy the site you'll want to concatenate all the files together to reduce the number of HTTP requests. — Yi Jiang
– Yi Jiang, Commented Jun 25, 2012 at 13:56
@Kees Sonnema: Yi Jiang is right – it's all about saving HTTP requests. You can also minify the CSS-files to use even less bandwidth. But I don't really understood the question. CSS-Classes don't have anything to with where they are defined. — feeela
– feeela, Commented Jun 25, 2012 at 14:00
Any difference is negligible unless your page is very complex. Don't base this decision on performance concerns. There are a hundred other more important things to optimize first. — thirtydot
– thirtydot, Commented Jun 25, 2012 at 14:06

Asif · Accepted Answer · 2012-06-25 15:00:01Z

Its only matter of perspective for the conditions as you stated. Nothing Else.

Examples:

Consider you have a scenarios like:

Scene:1

CSS:

.button {
    width:100px;
    border-radius: 5px;
}
.blueBG {
    background-color: blue;
}
.redBG {
    background-color: red;
}
.left{
    float: left;
    margin-left: 10px;
}
.right {
    float: right;
    margin-right: 10px;
}

HTML:

<a href="stackoverflow.com" class="button red left">StackOverflow</a>
<p class="blue">Text with blue background</p>
<img class="left" src="image.jpg"></img>

NOW THINK, if I use a code here somewhat like this:

CSS:

.blueButtonLeft {
    width:100px;
    border-radius: 5px;
    background-color: blue;
    float: left;
    margin-left: 10px;
}
.blueButtonRight {
    width:100px;
    border-radius: 5px;
    background-color: blue;
    float: right;
    margin-right: 10px;
 }
 .redButtonLeft {
    width:100px;
    border-radius: 5px;
    background-color: red;
    float: left;
    margin-left: 10px;
}
.redButtonRight {
    width:100px;
    border-radius: 5px;
    background-color: red;
    float: right;
    margin-right: 10px;
 }

HTML:

<a href="stackoverflow.com" class="blueButtonLeft">StackOverflow</a>
<!-- Need of defferent code for img and p -->

I hope the difference is clear. Isn't it?

Scene:2

I am sorry I need to go off for sometime will surely back and edit it more later.

Collectives™ on Stack Overflow

Improving speed on loading css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related