7 CSS Optimization Techniques

Recently, I did not pay much attention to the meticulous work of artists such as Image Positioning and spatial layout in the later stages of the project. I used the temporary Gu Ge | du Niang. I found some CSS skills on the Internet and shared them here.

CSS is a very important part of page effect rendering, including color, size, background, and font. It is easy to write CSS, but there are still many skills to write refined CSS code.

The following are tips 7:

1. Merge multiple identical attributes

For example, many write margin as follows:

margin-top: 8px;
margin-right: 4px;
margin-bottom: 8px;
margin-left: 4px;

However, writing in this way is more efficient:

margin: 8px 4px 8px 4px;

The same applies to font and background attributes. The general syntax is as follows:

font-family: Tahoma;
font-weight: bold;
font-style: italic;
font-size: 12px;

Recommended Syntax:

font: italic bold 12px Tahoma;

General Syntax:

background-image: url(bk_main.jpg);
background-repeat: repeat-x;
background-color: #ccccff;

Recommended Syntax:

background: #ccccff url(bk_main.jpg) repeat-x;

2. Write tags with the same attributes in one piece

For example:

H2
{
    font-size: 16pt;
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

H3
{
    font-size: 14pt;
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

It is better to write like this:

H2, H3 
{
　　color: #4169e1;
　　font-family: ‘Trebuchet MS’ , Arial;
　　margin: 4px 0px 2px;
　　padding-left: 10px;
　　text-decoration: underline;
}

H2
{
　　font-size: 16pt;
}

H3
{
　　font-size: 14pt;
}

3. Simplified color

For example, #99ff33 can be written as #9f3

For example, # ff0000 can be written as with # f00

For example, #000000 can be written as #000

4. Use class in the parent Element

For example, there is a piece of code:

<p>Home</p>
<p>About</p>
<p>Contact</p>
<p>Sitemap</p>

In fact, the above can be written as follows:

<div>
<p>Home</p>
<p>About</p>
<p>Contact</p>
<p>Sitemap</p>
<div>

5. Do not use dazzling comments

For example:

/*****************************/
/**********Header CSS*********/
/*****************************/

You can write it as follows:

/*Header CSS*/

6. Never add CSS to any element in the row.

<p style=”font-size: 14pt ;font-family: Arial; text-decoration: underline;”>Home</p>
<p style=”font-size: 14pt ;font-family: Arial; text-decoration: underline;”>About</p>
<p style=”font-size: 14pt ;font-family: Arial; text-decoration: underline;”>Contact</p>
<p style=”font-size: 14pt ;font-family: Arial; text-decoration: underline;”>Sitemap</p>

Write them as follows:

<p>Home</p>
<p>About</p>
<p>Contact</p>
<p>Sitemap</p>

7. Remove unnecessary spaces and empty rows

Remove unnecessary spaces and empty rows to reduce the size of the Style File.

Site: http://www.zreading.cn/ican/2011/07/css/