• thes
  • thes
  • thes
Besides your HTML file size, the size of CSS plays vital role in loading speed of your web site. The large size of CSS file also signifies your relevancy in CSS coding. There are several tweaks that you can apply to reduce your CSS file size.

There are several CSS properties that can be used in single properties. Let me show you some of the CSS shortcut properties to cut the file size and make your CSS as fast as possible.



Till now I've discovered that about 20 CSS properties can be shortcuted and these 20 CSS properties are widely used one.



Let me show you what are they.



For Padding and Margin Property



Instead of :


padding-top:5px;
padding-left:4px;
padding-bottom:5px;
padding-right:4px;


You can describe it in shorthand:


padding: 5px 4px 5px 4px;
/* top left bottom right */


Again the above shorthand CSS can even more shorten like this:


padding: 5px 4px;
/* top and bottom, left and right */


If you have same values for all the sides then you can define it like this.

padding:5px;
/* this will be applied to all the 4 sides */


Same tricks goes for the margin. But you must mind the order of sides, it goes clock-counter wise from the top.



Background CSS property:



Instead of :


background-color:#ffffff;
background-image:url(image.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position: top center;


You can use:

background: #fff url(image.gif) no-repeat fixed top center;


In case of background property the position of the value doesn't matters as in margin and padding.



Border CSS property:


Instead of:
border-width:1px;
border-style:dotted;
border-color:#ccc;


You can use:


border: #ccc dotted 1px;


Same is the case if you have border-left, just replace border with border-left. Another shortcut you can apply is for Font: Font CSS Property: Instead of:


font-family: Verdana, Arial, Helvetica;
font-size: 12px;
font-weight: bold;
font-style: italic;
font-variant: normal;
line-height: 1.3;


Use:


font:italic bold 12px/1.3 Verdana, Arial, Helvetica;


Another is for List CSS Property:


list-style-image: url(list.gif);
list-style-position: inside;
list-styel-type: disc;


Try this:


list-style: disc inside url(list.gif);


Similarly you can also use short codes for HEX colors like, #CCCCCC to #CCC.



Let me give share you some formula:



You can take assume the following HEX code #FF6600, note that #[FF][66][00] pattern, you can reduce it to #F60.

Same thing for #FF0000 -> #[FF][0][0] -> #F00

So to #CCCCCC -> #[CC][CC][CC] -> #CCC



Besides these you can use short comments hint to reduce the file size. For example, using comments is always recommended but long comments only increases your CSS file. You must use comments to hint the group of code rather than describing it in multiple lines.



Hope this was helpful. If you liked this post then press CTRL + D to Bookmark your site.

{ 0 comments... read them or add one }

Post a Comment