Home / Articles / Programming languages / Markup languages / HTML & CSS / How to improve CSS code

How to improve CSS code

How to improve CSS code
 
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (4 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Often found in many CSS source codes is the following content:

.class {
  margin-top: 10px;
  margin-bottom: 7px;
  margin-right: 9px;
  margin-left: 5px;
  border-width: 4px;
  border-style: solid;
  border-color: #333333;
  font-family: Verdana, Helvetica, Arial;
  font-size: 14px;
  font-weight: bold;
}

This is a more compact way to write the same thing:

.class {
  margin: 10px 9px 7px 5px;
  border: 4px solid #333333;
  font: bold 14px Verdana, Helvetica, Arial;
}

I think you've already guessed what the topic of this article is. We are going to talk about compactness (neatness) and correctness of CSS code. Without a doubt both variants are working ones, but it's more about the semantic correctness of the code. This is where I would like to stress on the main "errors" committed by many encoders.

Margins and paddings

Here is one way to write this code:

.class {
  margin-top: 7px;
  margin-right: 6px;
  margin-bottom: 9px;
  margin-left: 4px;
}

And this is a more "correct" way:

.class {
  margin: 7px 6px 9px 4px;
}

Here we can see that the compact form of entry is given in a defined sequence: first value - top margin, second - right, third - bottom and the fourth - left.

In case if left and right margins have the same values:

.class {
  margin-top: 0px;
  margin-right: 12px;
  margin-bottom: 8px;
  margin-left: 12px;
}

The short way to write it will look like this:

.class {
  margin: 0px 12px 8px;
}

If margins have the same values from all sides then they can be replaced by similar entry:

.class {
  margin-top: 4px;
  margin-right: 4px;
  margin-bottom: 4px;
  margin-left: 4px;
}

More simple:

.class {
  margin: 4px;
}

Border

Change this:

.class {
  border-width: 3px;
  border-style: solid;
  border-color: gray;
}

Into this:

.class {
  border: 3px solid gray;
}

If we style the right border, providing the following parameters:

.class {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: red;
}

Then it's better to replace the above entry with this:

.class {
  border-right: 1px solid red;
}

If you want to avoid assigning width for every border:

.class {
  border-top-width: 8px;
  border-right-width: 4px;
  border-bottom-width: 8px;
  border-left-width: 4px;
}

And now shorter way to write this entry:

.class {
  border-width: 8px 4px;
}

Background

Replace this:

.class {
  background-color: #FFFFFF;
  background-image: url(images/background-light.gif);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: top left;
}

With this: 

.class {
  background: #FFF url(images/background-light.gif) no-repeat top left;
}

By the way, we are not giving short forms of writing scroll, it's unnecessarily, because this attribute is set by default, so there is no need to add extra lines.

Font

Replace this:

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

With this:

.class {
  font: italic bold 12px/1.3 Arial, Helvetica;
}

And change this:

.class {
  font-family: Tahoma;
  font-size: 12px;
  font-weight: bold;
}

Into this:

.class {
  font: bold 12px Tahoma;
}

List-style

Replace this:

.class {
  list-style-image: url(images/nice-bullet.gif);
  list-style-position: inside;
  list-style-type: square;
}

With this:

.class {
  list-style: square inside url(images/nice-bullet.gif);
}

Color

If you have read the article HTML colors you probably are aware that the hexadecimal RGB-code is given in a defined sequence: the first two digits - red, the other two - green and the last two - blue. But if the digits of each color are identical to each other:

.class {
  color: #FFCC00;
}

Then this can be written in short form, using one digit of each color:

.class {
  color: #FC0;
}

Of course, if possible, replace the RGB-code with common name of a color.


 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation