Group and shorten CSS code

How to Group and shorten your CSS code: 

Group and shorten CSS code: Google would prefer a minified CSS while looking at your page speed and how it loads. A minified CSS is a rather graver and wider term than grouping and shortening the CSS code manually. However, I believe that grouping sets of elements as well as deliberately creating plenty of classes within HTML document do help us a lot in actually minifying the CSS code; this in turn is effective exactly the way a minified CSS is. Briefly speaking minified CSS file is the one where we have merely removed the white spaces between different CSS properties while the actual speed of a page can be increased using grouping of HTML elements and classes.

A casual piece of CSS is placed below where no grouping has been performed by the author:

p{          color:blue;

             width:100%;

                margin:0px;

                margin-top:0px;

                margin-bottom:2px;

                padding:0px;

                height:auto;

                background:#9ACD32;}

p.red{  color:red;

             

width:100%;

                margin:0px;

                margin-top:0px;

                margin-bottom:2px;

                padding:0px;

                height:auto;

                background:#9ACD32;

}

p.green{  color:green;

               width:100%;

                margin:0px;

                margin-top:0px;

                margin-bottom:2px;

                padding:0px;

                height:auto;

                background:#9ACD32;}

 A closer observation reveals that the author has created a repetitive code whereas only property i.e. ‘color’ is different in the three classes of ‘p’.  Well, what can we do to remove this repetition? Should we make them all of one class or stop using different colour paragraphs? No! We simply need to club the similar properties of all the different classes as in the code below: 

P, p.green, p.red{   

                width:100%;

                margin:0px;

                margin-top:0px;

                margin-bottom:2px;

                padding:0px;

                height:auto;

                background:#9ACD32;}

And the different properties can still be associated to different classes without any repetition:

p{ color:blue;}

p.red{ color:red;}

p.green{ color:green;}

 

Keep enjoying and do ask questions, if any.  Isn’t this wonderful? Do leave your comments and share this on the social media. 

Leave a Reply