Cách viết CSS tối ưu nhất

Việc tối ưu CCS có lợi ích là giảm bớt gánh nặng khi trang web được load. Nếu chúng ta biết cách tối ưu CSS thì website của bạn sẽ nhẹ hơn rất nhiều, rút ngắn quá trình tải. Vì vậy phải biết cách viết CSS tối ưu nhất.

1. Viết gọn mã màu một cách tối đa

Ví dụ bạn có một đối tượng article và bạn style cho nó nền trắng:
article { background-color: rgb(255,255,255); 

hay article { background-color: #ffffff; }
Ta có thể rút gọn đoạn code trên thành article { background: #fff; }
Với những mã màu thập lục có dạng #xxxxxx hoặc #xxyyzz thì lần lượt bạn có thể viết gọn lại thành #xxx và #xyz. Ví dụ:#ff0000(màu đỏ) thành #f00, #000000(màu đen) thành #000, …

2. Gộp các thuộc tính trùng lặp
p {
font-family: Arial;
font-weight: normal;
line-height: 1.33em;
font-size: 1.22em;
}
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.22em;
}
….
Trùng lặp quá nhiều bạn có thể viết gọn nó lại như sau:

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

3. Sử dụng cú pháp rút gọn khi có thể
Ví dụ bạn có đoạn code như sau:

p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.22em;
}
Ta tối ưu lại thành
p {font: normal 1.33em/1.33 Georgia, serif;}

Một số code khác có thể tối ưu
/* Background */
background-color: #fff;
background-image: url(i/icon.png);
background-repeat: repeat-x;
background-position: 0 0;

Viết gọn thành
background: #fff url(i/dope.png) repeat-x 0 0;

/* Thuộc tính margin */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
Rút gọn thành margin: 10px 20px 10px 20px;

/* Thuộc tính Border */
border-width: 1px;
border-style: solid;
border-color: red;

Bạn sẽ tối ưu thành border: 1px solid red;

4. Gộp các giá trị số

Ví dụ bạn có code sau margin: 10px 20px 10px 20px;

Vì ta thấy giá trị margin-top và margin-bottom trùng nhau bằng 10px và margin-left và margin-right bằng 20px nên ta có thể gộp thành margin: 10px 20px;

5. Tối ưu những giá trị có phần nguyên là 0
opacity: 0.5; viết thành opacity: .5;

6. Loại bỏ phần đơn vị những giá trị zero
margin: 0px; viết thành margin: 0;

7. Loại bỏ dấu chấm phẩy
Ví dụ
p {
font-family: Georgia, serif;
font-weight: normal;
}
Ta có thể vứt bỏ dấu “;” ở dòng cuối cùng đi
p {
font-family: Georgia, serif;
font-weight: normal
}

8. Gỡ bỏ comment trong file CSS
Việc comment những cái không cần thiết sẽ làm file CSS của bạn nặng hơn rất nhiều nếu bạn cho rằng cái nào không cần thiét bạn có thể bỏ đi được.

9. Loại bỏ những khoảng trống không cần thiết
body {
font-family: “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
background-color: #333;
text-align: center;
margin: 0px auto;
font-size: 62.5%;
color: #FFF;
}

Bạn có thể viết thành như sau
body {font-family:”Trebuchet MS”,Verdana,Arial,Helvetica,sans-serif;background-color: #333;text-align: center;margin: 0px auto;font-size: 62.5%;color: #FFF;}

Và cuối cùng bạn có thể Validate CSS để tìm lỗi CSS công cụ hoàn toàn miền phí http://jigsaw.w3.org/css-validator/

SHARE THIS