Tối ưu css là giảm dung lượng của css xuống mức thấp nhất có thể, đảm bảo trang chỉ tải css đủ không tải cái dư, các dòng code gọn gàng dễ đọc dễ hiểu dễ chỉnh sửa.
Lưu ý: Mình không khuyến khích tối ưu css bằng cách dồn lại một cục sau đó đem nén lại, làm như vậy về nguyên tắc không sai nhưng rất khó chỉnh sửa về sau.
Chúng ta không phải là những coder chuyên nghiệp được học qua trường lớp bài bản, nhưng chỉ cần chúng ta nắm được một số kiến thức cơ bản chừng đó cũng đủ để biên tập được những đoạn code css theo ý muốn.
Đầu tiên css được viết ra khi có các phần tử element html của trang, nó quy định kiểu hiển thị của các phần tử element đó, đẹp hay xấu là do nó quyết định. Một trang khi tải càng nhiều phần tử element thì cần nhiều css. Đó là nguyên tắc cơ bản mà ai cũng nắm được, sắp xếp css thế nào mới hợp lý mới chính là vấn đề mà chúng ta cần bàn.
1. Cách sắp xếp
Trong template chỉ có duy nhất một thẻ tag <b:skin>...</b:skin> lưu các dòng code css. Thay vì bạn sẽ đặt hết code css trong này bạn chỉ lưu css cho những phần tử chính mà trang nào cũng tải ví dụ như tất cả các element của Header và Footer, các phần tử element cha của Main và Sidebar...
Ngay dưới <b:skin>...</b:skin> bạn sẽ đặt điều kiện cho trang để viết css trong đó, ta có ví dụ sau:
<b:skin><![CDATA[
// Viết css chung
]]></b:skin>
<b:if cond='data:view.isMultipleItems'>
// Viết css các element con chỉ tải ở các trang index
</b:if>
<b:if cond='data:view.isSingleItem'>
// Viết css các element con chỉ tải ở các bài viết
</b:if>
<b:if cond='data:blog.isMobileRequest'>
// Viết css các element con chỉ tải ở trang mobile (?m=1)
</b:if>
...
// Viết css reponsive cho tất cả element
2. Sử dụng thẻ b:tag thay cho style
Tương tự như viết code css đặt trong b:skin, bạn cũng có thể đặt code css trong b:tag, mình sẽ chỉ ra những cái lợi khi dùng b:tag thay cho style
+ Tải link css
Thay vì bạn sử dụng điều kiện khi tải link bootstrap.min.css ở trang chủ, thông thường sẽ đặt code như sau:
<b:if cond='data:view.isHomepage'>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' />
</b:if>
Nếu bạn dùng b:tag, bạn chỉ cần rút gọn thành một hàng duy nhất thành
<b:tag cond='data:view.isHomepage' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' name='link' rel='stylesheet' />
+ Viết css trong b:tag
Thay vì bạn sẽ viết css trong style với điều kiện ở trang index
<b:if cond='data:view.isMultipleItems'>
<style type='text/css'>
/* <![CDATA[ */
// Viết css các element con chỉ tải ở các trang index
/* ]]> */</style>
</b:if>
Bạn có thể thay thế style thành b:tag thành như sau:
<b:if cond='data:view.isMultipleItems'>
<b:tag name='style' type='text/css'>
/* <![CDATA[ */
// Viết css các element con chỉ tải ở các trang index
/* ]]> */</b:tag>
</b:if>
Lưu ý: Bạn không nên lồng điều kiện trong b:tag như tải link css, cụ thể viết gọn thành
<b:tag cond='data:view.isMultipleItems' name='style' type='text/css'>
/* <![CDATA[ */
// Viết css các element con chỉ tải ở các trang index
/* ]]> */</b:tag>
Vì khi viết gọn như vậy về nguyên tắc không sai, nhưng nếu ở các trang khác các dòng code css đó vẫn hiển thị màu xanh (không tải) như vậy sẽ mất thẩm mỹ.
Một lợi ích rất hay khi đặt code css trong b:tag là các dòng code đó sẽ chuyển sang màu tương đồng với màu css trong b:skin với trường hợp phải được đặt trong CDATA
3. Viết css rút gọn
Cái này hầu như ai cũng gặp phải trường hợp có nhiều element có chung thuộc tính css
+ Viết rút gọn element
Trường hợp này hay gặp phải nếu element đó có thành phần ul, li, a
<div class="element">
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a> </li>
</ul>
</div>
Bạn viết css một trong 3 kiểu sau đều đúng
+ Kiểu 1:
.element ul
.element ul li
.element ul li a
+ Kiểu 2:
.element>ul
.element>ul>li
.element>ul>li>a
+ Kiểu 3:
.element ul
.element li
.element a
=> Kiểu 3 sẽ rút gọn code hơn
+ Sử dụng :not, :first-child, :last-child, :first-of-type, :nth-of-type(n), :nth-last-of-type(n)
Thay vì bạn sẽ viết về thuộc tính hover của phần tử li
.element li:hover{background:#ccc}
Nhưng bạn không muốn phần tử li thứ 2 trong các phần tử li không có thuộc tính hover, bạn sẽ viết
.element li:not(:nth-of-type(2)):hover{background:#ccc}
+ Sử dụng @media (min-width) và (max-width)
Nếu bạn chỉ muốn có thuộc tính hover cho các phần tử li có màn hình kích thước > 768px, bạn sẽ viết
@media (min-width:769px){.element li:not(:nth-of-type(2)):hover{background:#ccc}}}
+ Viết rút gọn thuộc tính css của element
Giả sử bạn sẽ có class .element với thuộc tính css như sau:
.element {
padding-left: 15px;
padding-bottom: 10px;
font-family: Roboto,sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.2em;
}
Bạn có thể viết gọn thành
.element {
padding: 0 0 10px 15px;
font: 400 Roboto,sans-serif 15px/1.2;
}
+ Xóa bỏ khoảng cách giữa các element cùng thuộc tính và dấu ";" của thuộc tính cuối cùng trong phần tử, viết cùng một hàng.
Thay vì dòng code css
.element-1, .element-2 {
padding: 0 0 10px 15px;
font: 400 Roboto,sans-serif 15px/1.2;
}
Bạn viết gọn thành
.element-1,.element-2{padding:0 0 10px 15px;font:400 Roboto,sans-serif 15px/1.2}
4. Đặt tên cho nhóm phần tử element cha
Điều này giúp bạn dễ dàng tìm kiếm và chỉnh sửa về sau, ví dụ bạn sẽ đặt tên cho các nhóm Header, Main, Footer
/* Header */
// code css
/* Main */
// code css
/* Footer */
// code css
...
5. Lấy màu text, link, backgroud chung
Thay vì các phần tử element có chung màu chữ, màu nền lặp lại nhiều lần, bạn nên thiết lập bằng một màu chung trong b:kin như sau:
:root{--background-color:#fff;--text-color:#333;--link-color:#4285f4;-link-hover-color:#4267b2}
Khi bạn lấy thuộc tính màu cho phần tử element bạn chỉ cần thêm var đằng trước ví dụ:
.element a{color:var(--link-color)}
.element a:hover{color:var(--link-hover-color)}
Sau này bạn muốn thay màu khác bạn chỉ cần thay lại trong phần :root là xong.
