Các thủ thuật tối ưu hóa code CSS

Nó bao gồm hầu hết các màu sắc, kích cỡ, vị trí, background, fonts… sẽ hiển thị trên website. Tuy nhiên, nếu không biết cách khai thác CSS, dung lượng file CSS sẽ phình to rất nhanh dẫn đến trang web load một cách chậm chạp. Các mẹo dưới đây sẽ hướng dẫn bạn một số cách để “trong sáng hóa” code và giảm tối thiếu dung lượng file .css
1. Tổng Hợp Lại Những Thuộc Tính ChungBạn nên kết hợp những thuộc tính. Ví dụ, để thiết lập thuộc tính margin cho một đối tượng, bạn thường viết:

margin-top: 8px;

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

Code này hoàn toàn không có gì sai. Tuy nhiên, nếu trong trường hợp bạn cần set margin cho cả 4 cạnh thì có một cách khác dễ thực hiện hơn nhiều:

margin: 8px 4px 8px 4px;

Trên – Phải – Dưới – Trái. Đây là thứ tự để set thuộc tính nhanh, không chỉ của margin mà padding cũng như vậy .

Ví dụ 2: Thay vì sử dụng như thế này:

background-image: url(bk_main.jpg);

background-repeat: repeat-x;

background-color: #ccccff;

bạn nên viết code lại như thế này:

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

2. Nhóm Các Style Chung Lại Với NhauBạn xem đoạn code bên dưới:

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

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

Trong đoạn code trên, ta thấy, cả H2 và H3 đều có chung các thuộc tính: color, font-family, margin, padding-left và text-decoration. Vậy tại sao lại phải chia ra như vậy cho tốn tài nguyên nhỉ?
Cách dưới đây là tối ưu và hoàn toàn không khác gì so với code bên trên:

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;
}

Như các bạn đã thấy, tôi đã gom các thuộc tính chung lại với nhau. Chỉ có thuộc tính font-size là khác nhau nên mới tách ra
3. Viết Tắt Mã Màu Thập Lục Phân Đối Với Các Màu Đơn GiảnTôi xin đưa ra ba ví dụ để các bạn dễ hình dung:

#99ff33 có thể thay thế bằng #9f3
#ff0000 có thể thay thế bằng #f00
#000000 có thể thay thế bằng #000

Nếu bạn sử dụng DreamWeaver để thiết kế web thì khi chọn màu từ bảng mã màu của chương trình, DW sẽ tự động rút gọn mã màu cho bạn
4. Chỉ Sử Dụng Class Cho Đối Tượng ChínhVí dụ bạn cần vẽ một menu như thế này:

Home
About
Contact
Sitemap

Thực sự không cần làm vậy. Bạn chỉ cần vẽ một thẻ div và set class cho nó, sau đó, chứa tất cả các thẻ
trong đó:

Home
About
Contact
Sitemap

5. Đừng Lạm Dụng CommentKhá nhiều bạn thích comment trong file css để sau này lỡ có public thì có người biết là hàng độc của mình . Tuy nhiên, điều này dễ làm cho file css trở nên nặng nề:

/**************************************/
/**********Coded By DDS*********/
/*************************************/

Bạn nên rút gọn lại, và chỉ viết dòng giữa thôi nhé ^^:

/*Coded By DDS*/

6. Không Chèn Thẳng Style Vào Đối TượngKhông nên chèn style vào trong đối tượng như thế này, trừ khi bạn chỉ làm một file HTML vô cùng đơn giản (Trường hợp này bây giờ khá là hiếm):

Home
About
Contact
Sitemap

Có khá nhiều lí do để bạn không nên làm vậy:

- Làm file HTML trở nên nặng nề
- Các đối tượng đều có chung tất cả các thuộc tính tại sao không tách riêng ra và đưa tất về thành class myMenu, đáp ứng yêu cầu “trong sáng hóa” file CSS

7. Xóa Các Khoảng Trắng Dài Và Các Kí Tự Xuống DòngKhông nên quan niệm khoảng trắng và kí tự xuống dòng không làm file css nặng nề. Nếu file CSS của bạn chỉ có cỡ 10
dòng thì không đáng quan tâm. Nhưng nếu file CSS cơ 200 dòng thì lại là vấn đề khác. Mỗi khoảng trắng là một kí tự ASCII, còn kí tự xuống dòng cần tới tận hai kí tự ASCII để thực hiện việc này: Xuống dòng, trở về đầu hàng!