3 Practical Ways To Efficient CSS


 

 

Most probably already know this but it doesn’t hurt to remind and have it down on “paper”. When writing CSS code and as you adjust things to make it all look good in the browser your CSS file becomes huge with extra lines of unneeded code that can be purged to make the size of the file smaller. All though this is not a complete list, this is practical and easy to remember steps that really make a difference. What I am talking about is Shorthand, Default Values and Multiple Declaration.

Shorthand

There are several elements that you can apply shorthand to font, border, background, padding & margin.

font


 Instead of declaring:

font-family:   Arial;
font-size:        12px;
line-height:   18px;
color:              #333;

You can say all that in one sentence:

font: 12px/18px #333 Arial;

border


 Instead of declaring:

border-color:    #ccc;
border-width:    1px;
border-style:      solid;

You can say all that in one sentence:

border: 1px solid #ccc;

background


 Instead of declaring:

background-color:         #fff;
background-image:        url(images/bg.gif);
background-position:    top;
background-repeat:        no-repeat;

You can say all that in one sentence:

background: #fff url(images/bg.gif) top no-repeat;

padding & margin


 Instead of declaring every side individually:

padding-top:         10px;
padding-left:          20px;
padding-right:       25px;
padding-bottom: 15px;

or

margin-top:         10px;
margin-left:          20px;
margin-right:       25px;
margin-bottom: 15px;

You can say all that in one sentence:

padding: 10px 20px;                            (first value is top & bottom, second is right & left)
padding: 10px 20px 5px;                   (first value is top, second is for right & left, third is for bottom)
padding: 10px 25px 15px 20px;     (top, right, bottom, left)

or

margin: 10px 20px;                            (first value is top & bottom, second is right & left)
margin: 10px 20px 5px;                   (first value is top, second is for right & left, third is for bottom)
margin: 10px 25px 15px 20px;     (top, right, bottom, left)

Default Values

Establishing default values allows you to not need to set styles for the majority of the website and only need to deal with the elements that are not regular. In the default values you want to declare the main styles of the website, like fonts, colors, backgrounds, margins, paddings, etc.

In the begining of the CSS code add this:


 html, body, div { 
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 font-size: 62.5%; /* Resets 1em to 10px */
 font-family: 'Verdana', Arial, Sans-Serif;
 background: #000 url('images/bg.jpg') top left repeat-x;
 color: #dbdbdb;
 text-align: left;
}

Multiple Declaration

When you know that multiple elements will carry the same settings you can bundle them into one package instead of declaring each element separately.


 Instead of this:

a:link {  color: #dbdbdb; }
a:visited {  color: #dbdbdb; }
a:active {  color: #dbdbdb; }

You can bundle them into one, like this:

a:link, a:visited, a:active {  color: #dbdbdb; }

I am sure there are more ways to save bytes in CSS but these are the most practical things that I found to be important in my experience. Please, let us know in the comments if you have something to add to these.

You Might Also Like:

Leave a Reply