Hướng dẫn cách tối ưu CSS - Kinh nghiệm, Thủ Thuật

Hỗ trợ điện thoại Hỗ trợ kinh doanh P: (043) 550 1189 M: (090) 550 1189 Hỗ trợ điện thoại Hỗ trợ trực tuyến

Hướng dẫn cách tối ưu CSS

Hướng dẫn cách tối ưu CSS

Tối ưu CSS làm giảm kích thước file css, giảm bớt HTTP request, góp phần làm tăng tốc độ tải trang. Để tối ưu CSS bạn có thể sử dụng các công cụ online, chỉ cần paste hoặc upload file css của bạn lên, các công cụ này sẽ xử lí tự động và cho ra file kết quả để bạn download về sử dụng. Thực ra, bạn cũng có thể tự mình tối ưu các file CSS của mình bằng nhiều kĩ thuật khác nhau, việc nắm rõ những kĩ thuật này sẽ thuận tiện cho bạn trong việc phát triển web sau này. Bài viết này hướng dẫn các bạn cách tối ưu CSS thủ công, bạn có thể sử dụng trong quá trình viết mã.

Hướng dẫn cách tối ưu CSS
Rate: 4.5/5 based on 100 votes

1. Viết gọn mã màu một cách tối đa
 
Giả sử 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);
 
Hoặc
 
article { background-color: #ffffff; }
 
Nhưng bạn vẫn có thể viết gọn background-color thành background và #ffffff thành #fff, đoạn mã ngắn gọn hơn nhưng kết quả vẫn không thay đổi:
 
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
 
Tiến hành kiểm tra lại file CSS để tìm các thuộc tính trùng lặp và gộp chúng lại. Chẳng hạn như sau:
 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.33em;
}
Bạn có thể viết lại thành:
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em;
}
3. Sử dụng cú pháp rút gọn khi có thể
 
Sử dụng các cú pháp rút gọn cho ta kết quả giống như mong đợi mà lại tiết kiệm được thời gian viết code, và giảm đáng kể dung lượng file CSS. Đây có lẽ là phương pháp tối ưu mang lại hiệu quả cao nhất:
 
Thẻ p bên dưới được style:
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em;
}
Rất nhiều phải không, đoạn code sau thì ngắn gọn hơn nhiều:
p {
font: normal 1.33em/1.33 Georgia, serif;
}
Một số ví dụ khác:
/* 4 thuộc tính background*/
background-color: #fff;
background-image: url(i/dope.png);
background-repeat: repeat-x;
background-position: 0 0;
/* Có thể viết gọn lại thành */
background: #fff url(i/dope.png) repeat-x 0 0;
/* 4 thuộc tính margin */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* Dưới là cách viết gọn cho 4 dòng trên */
rgin: 10px 20px 10px 20px;
/* 3 thuộc tính border*/
border-width: 1px;
border-style: solid;

border-color: red;

/* Chỉ cần viết  */

border: 1px solid red;
 
4. Gộp các giá trị số
 
Giả sử bạn có thuộc tính margin bên dưới:
margin: 10px 20px 10px 20px;
Vì margin-top và margin-bottom, margin-left và margin-right trùng nhau về giá trị, bạn hoàn toàn có thể viết lại thành:
margin: 10px 20px;
 
Khi thuộc tính margin nhận 2 giá trị thì giá trị đầu sẽ giá trị cho margin-top và margin-bottom còn giá trị sau sẽ là giá trị của margin-left và margin-right.
 
5. Tối ưu những giá trị có phần nguyên là 0
 
opacity: 0.5;
 
Có thể viết thành:
 
opacity: .5;

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

7. Loại bỏ dấu chấm phẩy
 
Đối với những đối tượng có nhiều thuộc tính thì bạn có thể loại bỏ những dấu phẩy nằm sau giá trị của thuộc tính cuối cùng mà không ảnh hưởng gì.
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em;
}

Sau khi loại bỏ
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em
}
tối ưu tối đa
p { font: normal 1.33em/1.33 Georgia, serif }
 

8. Gỡ bỏ comment trong file CSS
 
Khi thiết kế, mọi người thường để lại các comment trong file CSS để tiện cho việc chỉnh sửa sau này, tất nhiên các comment không ảnh hưởng gì, trình duyệt sẽ bỏ qua chúng, chúng sẽ làm file CSS thêm "đồ sộ" thêm, chúng sẽ làm tổn hại đến tài nguyên server, băng thông, thời gian load,  nếu muốn tối ưu tối đa bạn cũng có thể loại bỏ những comment.
 
9. Loại bỏ những khoảng trống không cần thiết
 
Để cho code dễ nhìn, trực quan, chúng ta thường hay viết mỗi thuộc tính nằm ở một dòng, điều này tạo nên 1 lượng khoảng trống rất lớn, làm tăng kích thước file CSS. Vì vậy, viết tất cả các thuộc tính nằm trên một dòng là một cách tối ưu hiệu quả.
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;
}
Loại bỏ khoảng trống
body{font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;text-align:center;background:#333;margin:0px auto;font-size:62.5%;color:#fff}

Rất đáng kể phải không nào?
10. Validate CSS
Để các trình duyệt có thể duyệt file CSS một cách chính xác, tối ưu hoàn toàn thì file CSS của bạn cũng phải validate, sử dụng công cụ CSS Validator của W3C để kiểm tra.

,

các Kinh nghiệm, Thủ Thuật khác: