Các thủ thuật tối ưu hóa code CSS
- Thứ tư - 24/07/2013 14:07
- |In ra
- |Đóng cửa sổ này
margin-top: 8px;
margin-right: 4px;
margin-bottom: 8px;
margin-left: 4px;
Code này hoàn toàn không có gì sai. Tuy nhiên, nếu trong trường hợp bạn cần set margin cho cả 4 cạnh thì có một cách khác dễ thực hiện hơn nhiều:
margin: 8px 4px 8px 4px;
Trên – Phải – Dưới – Trái. Đây là thứ tự để set thuộc tính nhanh, không chỉ của margin mà padding cũng như vậy .
Ví dụ 2: Thay vì sử dụng như thế này:background-image: url(bk_main.jpg);
background-repeat: repeat-x;
background-color: #ccccff;
bạn nên viết code lại như thế này:
background: #ccccff url(bk_main.jpg) repeat-x;
2. Nhóm Các Style Chung Lại Với NhauBạn xem đoạn code bên dưới:
H2
{
font-size: 16pt;
color: #4169e1;
font-family: 'Trebuchet MS' , Arial;
margin: 4px 0px 2px;
padding-left: 10px;
ext-decoration: underline;
}
H3
{
font-size: 14pt;
color: #4169e1;
font-family: 'Trebuchet MS' , Arial;
margin: 4px 0px 2px;
padding-left: 10px;
text-decoration: underline;
}
Cách dưới đây là tối ưu và hoàn toàn không khác gì so với code bên trên:
H2, H3
{
color: #4169e1;
font-family: 'Trebuchet MS' , Arial;
margin: 4px 0px 2px;
padding-left: 10px;
text-decoration: underline;
}
H2
{
font-size: 16pt;
}
H3
{
font-size: 14pt;
}
3. Viết Tắt Mã Màu Thập Lục Phân Đối Với Các Màu Đơn GiảnTôi xin đưa ra ba ví dụ để các bạn dễ hình dung:
#99ff33 có thể thay thế bằng #9f3
#ff0000 có thể thay thế bằng #f00
#000000 có thể thay thế bằng #000
4. Chỉ Sử Dụng Class Cho Đối Tượng ChínhVí dụ bạn cần vẽ một menu như thế này:
Home
About
Contact
Sitemap
trong đó:
Home
About
Contact
Sitemap
5. Đừng Lạm Dụng CommentKhá nhiều bạn thích comment trong file css để sau này lỡ có public thì có người biết là hàng độc của mình . Tuy nhiên, điều này dễ làm cho file css trở nên nặng nề:
/**************************************/
/**********Coded By DDS*********/
/*************************************/
/*Coded By DDS*/
6. Không Chèn Thẳng Style Vào Đối TượngKhông nên chèn style vào trong đối tượng như thế này, trừ khi bạn chỉ làm một file HTML vô cùng đơn giản (Trường hợp này bây giờ khá là hiếm): Home
About
Contact
Sitemap
- Làm file HTML trở nên nặng nề
- Các đối tượng đều có chung tất cả các thuộc tính tại sao không tách riêng ra và đưa tất về thành class myMenu, đáp ứng yêu cầu “trong sáng hóa” file CSS
7. Xóa Các Khoảng Trắng Dài Và Các Kí Tự Xuống DòngKhông nên quan niệm khoảng trắng và kí tự xuống dòng không làm file css nặng nề. Nếu file CSS của bạn chỉ có cỡ 10
dòng thì không đáng quan tâm. Nhưng nếu file CSS cơ 200 dòng thì lại là vấn đề khác. Mỗi khoảng trắng là một kí tự ASCII, còn kí tự xuống dòng cần tới tận hai kí tự ASCII để thực hiện việc này: Xuống dòng, trở về đầu hàng!