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)