5 Tips and Tricks How to Optimize Your Css

In this article we will find that how to optimize Css.This is very simple and basic tips for the web designers and developers. Not only will these tips help reduce the file size of your CSS file, but they’ll also speed up your coding if you prefer to do some of your CSS by hand.

1. Use CSS Shorthand


Before
[code lang="css"]
p {
margin-top: 5px;  
margin-right: 10px;  
margin-bottom:  15px;  
margin-left: 20px;
}  
[/code]
After
[code lang="css"]
p{ margin:5px 10px 15px 20px;}
[/code]

2. Remove Unnecessary Whitespace


Before
[code lang="css"]
.wrap
{
width:900px;

height:100%;

margin:0px;

padding:0px;

background-color:#cccccc;
}
[/code]
After
[code lang="css"]
.wrap
{ width:900px; height:100%; margin:0px; padding:0px;}
[/code]

3. Use shorthand colors

Longhand hex colors are specified as three red, green, and blue triplets, like this:

[code lang=”css”]
p { color: #fdca30; }
[/code]

You can abbreviate colors that have an identical value for each pair, that is, #rrggbb;, with only one value per pair, so this:

[code lang=”css”]
p { color: #ffcc00; }
[/code]

becomes this, using shorthand hex notation:

[code lang=”css”]
p {color: #fc0;}
[/code]

Named colors can ease maintenance, but they are generally longer than their shorthand hex equivalents (other than red and tan).

4. Use Descendant Selectors

[code lang=”css”]
div.warning p{color:red;}
[/code]

[code lang=”htmlstrict”]

Warning! Meltdown is imminent.

[/code]

5. Use Css CompressTools

if you don’t want to waste your time in modifying your old style sheets you can simply use online css compress tools, it make your work in seconds
check this online css compress tools…
Css Tidy
Clean Css
Css Optimiser
Flumpcakes Css optimizer
cssdrive Css Comperasor
W3C Css Validator

Leave a Reply

Your email address will not be published. Required fields are marked *