Tối ưu CSS

Đăng bởi tipsviet trong mục Hướng dẫn vào 18 tháng 11, 2010 | Comments

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ã.

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 */
margin: 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.

(Tham khảo từ perishablepress.com)

Bạn có thích bài viết này?

tipsviet

17 tuổi, yêu thích design, hiện đang cố gắng trao dồi kiến thức.

Trang chủ - Twitter