Optimize your stylesheet

If your website uses large stylesheets, optimizing the CSS code can help your code to load and render faster. CSS shortcuts shortern the cascading stylesheets rules into one efficient line of code.

Fonts

.MyClass
{
font-weight: normal;
font-size: 14px;
line-height: 12px;
font-family: arial, verdana;
}

You can simply use:

.MyClass
{
font: normal 14px/12px arial, verdana;
}

Background Images

#MyID
{
background-image:url(images/Vikas.gif);
background-position:top;
background-repeat:repeat-x;
background-color:#r1f1f1;
}

Can be shortened to:

#MyID
{
background: #f1f1f1 url(images/Vikas.gif) repeat-x top;
}

Borders

.MyClass
{
border-width: 1px;
border-color: #e0e0e0;
border-style: solid;
}

Shortcut:
.MyClass
{
border: 1px solid #e0e0e0;
}

Margins/Padding

#MyID
{
padding-top: 10px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
}

Use a single line of code, like this:

padding: top right bottom left;

#MyID
{
padding: 10px 5px 20px 5px;
}

The margin or padding shortcut can be be shortened further.

margin: top right bottom left;
margin: 10px 20px 10px 20px;

Can be shortened to:

margin: top/bottom right/left;
margin:10px 20px;

You can even take this one step further.

margin: top/bottom/right/left;
margin:10px;

If you do not want any margins or padding with a web object, you can set all of the values to zero.

margin: 0;
padding: 0;

Color

color: #000000;

shortcut:
color: #000

color: #FFCC00;

shortcut:
color: #FC0;

One thought on “Optimize your stylesheet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s