Tối ưu hóa cho CSS cho SEO - phần 2

Mình xin tiếp tục với phần 2 của bài Tối ưu hóa CSS cho SEO.

6. Rút gọn cú pháp css của một thành phần:
Thẻ p của bạn có css như sau:

 p {

font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em;
}

Bạn nên viết gọn lại:

 p {
font: normal 1.33em/1.33 Georgia, serif;
}

Hay như bạn có thuộc tính margin cho div như sau:

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

Bạn có thể viết gọn lại là:

 margin: 10px 20px ;

7. Các giá trị số.
Bạn có:

padding:0px;

thì bạn có thể viết thành:

 padding:0;

Đối với các thuộc tính có 4 giá trị đối xứng nhau như ở ví dụ margin ở trên thì bạn nên viết lại thành 2 giá trị nếu chúng có giá trị giống nhau.
8. Cách viết comment
Comment trong css sẽ giúp bạn quản lí code tốt hơn nhưng comment thế nào cho hợp lí?
Nếu những comment không cần thiết thì bạn có thể bỏ, còn những comment khác thì bạn nên viết ngắn gọn xúc tích, mang nội dung phù hợp. Không nên viết comment theo kiểu này:

/************************************/
/*          Content Styles            */
/************************************/

Mà bạn nên viết lại thành:

 /* content styles */

 9.Nén CSS lại
Hạn chế việc xuống dòng và bạn có thể bỏ dấu ";" ở giá trị thuộc tính cuối cùng:

h2 {
    font-family:verdana;
    padding:0;
    margin:5px 0;
    color:#333;
    text-decoration:underline;
}

Viết lại thành:

h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline}

 10. Sử dụng một vài công cụ giúp bạn tối ưu hóa và nén CSS online
CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat

11. CSS Sprite

Có thể đây là một khái niệm lại đối với 1 vài bạn nhưng nó khá hữu ích trong việc css cho ảnh. Ảnh là một tài nguyên chiếm khá nhiều băng thông và dung lượng trên server nên việc sprite ảnh là việc rất cần thiết. Để sử dụng CSS sprite cần có skill khá tốt trong css. Mình sẽ nói kĩ hơn về CSS Sprite trong một bài khác.

12. Validate CSS.

Sau khi làm xong bạn nên validate CSS để biết mình có sai ở đâu hay không, hay code vẫn chưa được chuẩn hóa. Có khá nhiều những validator CSS mình xin giới thiệu 1 cái của w3c: http://jigsaw.w3.org/css-validator/

Hy vọng với chút ít kiến thức trên bạn có thể hiểu thêm về css và seo.