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/

Nguồn: https://lamblogdep.wordpress.com/2015/01/01/cach-viet-css-toi-uu-nhat/

About Phạm Quốc Toàn

Chủ sáng lập Công ty TNHH Vision Global - công ty quản lý của Webviptop.com (Thiết kế Website và Online Marketing) và Codementor.org (Đào tạo Thiết kế Website cho người mới).

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *