Understanding CSS Optimizations Techniques

Well , to make our application work faster and without lingering, we people basically put more kneen attention towards upgrading our server, updation our RAM etc. whereas what all we can do is to make our source code more optimized by optimizing our css, so it will load faster and without dwadling. There are various ways we can  take care of while developing our applications such as :-

1) Splitting CSS files :-  We can split our css code as per browser compatibility. As suppose , we are targeting multiple browsers like Chrome , IE etc .. , instead of writing the whole code in single stylesheet we can use conditional statements to load different stylesheet  , for IE there is no need to load Chrome code. This will help in reducing the size as well . 

2) Remove Whitespace:-  We should always reduce white spaces in css as it takes lot of bytes and lead to the major factor in slowness and fastness of application.

3) Remove unnecessary code:-  Reduce unnecessary redundancy of classes in css and code , as it will take lot of bytes unnecessarily.

4) Minify CSS :- Compressing your css files into newer files will remove extra load and build time . As now a days when we build our application , all we require is a command to run automatically our css files combined into single minified stylesheet . 

5) Sprites :- Use image sprites instead of single png images reduces http requests and improves your page load time . If our application is complex , its better to use image sprites as it will build in one go without redundancy.

6) Organize your code :- Document your code , with comments and  information neccessary so that we can able to identify the useful and useless code very easily and it will help again in removing redundancy and extra line of code.

7) Use shorthand properties:- Instead of using different declarations of properties we can use shorthand property which will lead to the cut down of extra code . For eg , intsead of using margin-left , margin- top , all we can use is  margin.

 
p { margin-top: 10px;
	margin-right: 20px;
	margin-bottom:  30px;
	margin-left: 40px; }

 p { margin: 10px 20px 30px 40px; }

Many factors are there to increase the efficiency and code optimization , cleaning and optimized code is very essential not for fastness but also to enhance the readiability and maintenance of code. CSS properties we use are not so bigger part of the project to accomplish , but these little thing helps alot to measure the time we put to develop and build application .