Cách rút gọn code CSS

Thư mục: Thủ Thuật Blog |

Quan trọng
Đăng ngày: 12:33 08-10-2009

Bạn luôn muốn blog mình thật đẹp, thật ấn tượng. Bạn say mê chỉnh sửa CSS, bạn chăm chỉ tích hợp nhiều hiệu ứng vào blog. Rồi đến một hôm bạn bắt gặp câu báo lỗi của Plus

Làm sao đây khi mà bạn muốn thêm hiệu ứng mới vào blog mà cũng không muốn bỏ các code cũ đi. Thật là nan giải.

Nhưng olympia có hướng giải quyết cho bạn : Rút gọn code.

Nghe thế bạn sẽ thắc mắc code thì có sẵn rồi làm sao mà rút gọn được, rút gọn thì code làm sao còn có tác dụng được nữa.

Câu trả lời là ta hoàn toàn có thể rút gọn code mà vẫn giữ nguyên tác dụng ban đầu.

Ta cùng xem qua các kiểu rút gọn mà olympia đang áp dụng nhé :

Rút gọn các thành phần giống nhau về tính chất:

Ví dụ nếu bạn có code như sau :

#blast .rc div {background:transparent;}
#blast .rc {background:transparent;}
#blast .rc_bd div.rc_bc {background:transparent ;}
#blast .rc_bd {background:transparent ;}
#blast .rc_ft {background:transparent ;}
#blast .rc_ft div {background:transparent ;}

thì bạn có thể rút gọn nó thành:

#blast .rc div, #blast .rc, #blast .rc_bd div.rc_bc, #blast .rc_bd, #blast .rc_ft, #blast .rc_ft div {background:transparent ;}

Tác dụng của code cũ không hề bị thay đổi mà code lại ngắn hơn. Để sử dụng cách này bạn chỉ cần gôm các phần cùng tính chất lại rồi viết liên tiếp phân tách nhau bởi dấu ",". Tương tự cho một ví dụ khác:

.privacy, #introduction_profile p, #footer .ft .rights, .mod-alist-folderbar , .tag_content , #article_list_module .mod-alist-tagsbar em, .total , #comment_new strong, #article_new a, #subscribe_highlight a, #folder a, #photo_highlight a, #mod-tagged-frd-article a, #update_date .date, #guestbook_entries a, #calendar td, #comments-listing * ins , .mod-relatives .bd li a , .mod-relatives .info {color:#F0F;}

Chọn những màu sắc chủ đạo cho blog để tiết kiệm code, tận dụng triệt để bảng có sẵn của Plus

Lấy blog olympia làm ví dụ, đây là bảng có sẵn của Plus được chỉnh sửa lại :

Màu chủ đạo là màu #0000FF. Khi để bảng như thế, phần lớn các màu chữ thanh tiêu đề sẽ là màu #0000FF. Nhờ thế khi dùng code áp dụng màu cho blog thì code đã được giảm bớt so với không dùng bảng có sẵn

#article_list_module a, #subscribe_highlight p, #calendar .hd, #calendar .hd .titlebar .bd a, #comment_container * .content, #mod-tagged-frd-article ins a, #footer .ft .info a {color:#0000FF;}

Ngoài ra bạn cũng nên chọn một hay hai màu chủ đạo cho blog để khi sử dụng code áp dụng màu chữu cho các thành phần sẽ tiết kiệm hơn. Ví dụ code áp dụng màu các phần của olympia gồm hai màu #0000FF (màu xanh dương đậm) và #FF00FF (màu hồng).

.privacy, #introduction_profile p, #footer .ft .rights, .mod-alist-folderbar , .tag_content , #article_list_module .mod-alist-tagsbar em, .total , #comment_new strong, #article_new a, #subscribe_highlight a, #folder a, #photo_highlight a, #mod-tagged-frd-article a, #update_date .date, #guestbook_entries a, #calendar td, #comments-listing * ins , .mod-relatives .bd li a , .mod-relatives .info {color:#F0F;}

#article_list_module a, #subscribe_highlight p, #calendar .hd, #calendar .hd .titlebar .bd a, #comment_container * .content, #mod-tagged-frd-article ins a, #footer .ft .info a {color:#00F;}

Sử dụng các quy tắc rút gọn của CSS

Ví dụ đây là code trang trí khung tìm kiếm ở module bài viết

.mod-alist-searchbox input.ipt {background:transparent url(http://i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Hover/2.gif);border-top-color:#0000FF;border-left-color:#0000FF;border-right-color:#0000FF;border-bottom-color:#0000FF;}

có thể viết rút gọn lại thành

.mod-alist-searchbox input.ipt {background:transparent url(http://i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Hover/2.gif);border-color:#0000FF;}

Rút gọn với color

Plus hiện giờ trong các code chia sẻ phần lớn sử dụng màu sắc dạng hex, ví dụ #FFFFFF(6 chữ số, ký tự). Có một cách rút gọn #FFFFFF có thể viết #FFF, hoặc #CC0066 viết thành #C06. Có nghĩa là chia 6 số, ký tự đó thành 3 nhóm từng 2 ký tự một, nếu cả 3 nhòm đó đều là từng nhóm hai số hay ký tự giống nhau ta có thể rút gọn được. #AAFF00 có thể rts gọn thành #AF0, nhưng #BC00DD không thể rút gọn được.

Ngoài ra các bạn cũng nên chú ý đến độ dài code CSS của mình và tiết kiệm dần dần.

Trước hết bạn copy code CSS vào word rồi chọn trên thanh menu tool >>> Word count. Bạn xem dòng Characters (no space) nhé, khoảng trên dưới 17000 là code bạn gần full rồi đó

Đó là một số cách rút gọn mà olympia biết và áp dụng.

Còn một số cách rút gọn nữa nhưng hoặc là code chia sẻ trên Plus đã rút gọn sẵn (như code background), hoặc là việc trang trí không cần thiết dùng đến.