CODEWITHSUNDEEP
css
woutvdd
woutvdd

Reputation: 821

Improving speed on loading css

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?

Upvotes: 0

Views: 76

Answers (1)

Asif
Asif

Reputation: 5038

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.

Upvotes: 1

Related Questions