Viết CSS gọn gàng, dễ bảo trì¶

Có nhiều cách để làm gọn và đơn giản hóa SCSS. Bước đầu tiên là xác định xem có thực sự cần đến mã tùy chỉnh hay không.

Webclient của Odoo được thiết kế theo module, nghĩa là (có khả năng tất cả) các class có thể được chia sẻ giữa các view. Hãy kiểm tra mã nguồn trước khi tạo một class mới. Rất có thể đã có sẵn một class hoặc một tag HTML thực hiện chính xác điều bạn đang tìm kiếm.

Bên cạnh đó, Odoo dựa vào Bootstrap (BS), một trong những CSS framework đầy đủ nhất hiện có. Framework này đã được tùy chỉnh để phù hợp với thiết kế của Odoo (cả phiên bản community và enterprise), nghĩa là bạn có thể sử dụng trực tiếp bất kỳ class BS nào trong Odoo và đạt được kết quả trực quan nhất quán với UI của chúng ta.

Cảnh báo

Việc một class đạt được kết quả trực quan mong muốn không nhất thiết có nghĩa là nó phù hợp cho công việc đó. Ví dụ, hãy cẩn thận với các class kích hoạt các hành vi JS.
Hãy cẩn thận về ngữ nghĩa của class. Việc áp dụng một class button cho một tiêu đề không chỉ sai về mặt ngữ nghĩa, mà còn có thể dẫn đến các vấn đề khi migration và sự không nhất quán về mặt hiển thị.

Các phần sau đây mô tả các mẹo để rút gọn các dòng SCSS khi mã tùy chỉnh là cách duy nhất khả thi.

Mặc định của trình duyệt¶

Theo mặc định, mỗi trình duyệt render nội dung bằng một user agent stylesheet. Để khắc phục sự không nhất quán giữa các trình duyệt, một số quy tắc này được ghi đè bởi Bootstrap Reboot.

Ở giai đoạn này, tất cả các quy tắc "trang trí đặc thù của trình duyệt" đã được loại bỏ, nhưng một phần lớn các quy tắc định nghĩa thông tin bố cục cơ bản vẫn được giữ lại (hoặc được Reboot củng cố thêm vì lý do nhất quán).

Bạn có thể tin tưởng vào các quy tắc này.

Example

Việc áp dụng display: block; cho một <div/> thường là không cần thiết.

div.element {
   display: block;
   /* not needed 99% of the time */
}

Example

Trong trường hợp này, bạn có thể chọn thay đổi tag HTML thay vì thêm một quy tắc CSS mới.

span.element {
   display: block;
   /* replace <span> with <div> instead
      to get 'display: block' by default */
}

Dưới đây là danh sách không đầy đủ các quy tắc mặc định:

Tag / Thuộc tính	Mặc định
`<div/>`, `<section/>`, `<header/>`, `<footer/>`...	`display: block`
`<span/>`, `<a/>`, `<em/>`, `<b/>`...	`display: inline`
`<button/>`, `<label/>`, `<output/>`...	`display: inline-block`
`<img/>`, `<svg/>`	`vertical-align: middle`
`<summary/>`, `[role="button"]`	`cursor: pointer;`
`<q/>`	`:before {content: open-quote}` `:after {content: close-quote}`
...	...

Xem thêm

Bootstrap Reboot trên GitHub

Thẻ HTML¶

Điều này có vẻ hiển nhiên, nhưng cách đơn giản và nhất quán nhất để làm cho văn bản trông giống như một tiêu đề là sử dụng thẻ header (<h1>, <h2>, ...). Ngoài các quy tắc reboot, hầu hết mọi thẻ đều mang các kiểu trang trí do Odoo định nghĩa.

Example

Không nên

<span class="o_module_custom_title">
   Hello There!
</span>

<span class="o_module_custom_subtitle">
   I'm a subtitle.
</span>

.o_module_custom_title {
   display: block;
   font-size: 120%;
   font-weight: bold;
   animation: 1s linear 1s mycustomAnimation;
}

.o_module_custom_subtitle {
   display: block;
   font-size: 12px;
   font-weight: bold;
   animation: 2s linear 1s mycustomAnimation;
}

Nên

<h5 class="o_module_custom_title">
   Hello There!
</h5>

<div class="o_module_custom_subtitle">
   <b><small>I'm a subtitle.</small></b>
</div>

.o_module_custom_title {
   animation: 1s linear 1s mycustomAnimation;
}

.o_module_custom_subtitle {
   animation: 2s linear 1s mycustomAnimation;
}

Ghi chú

Bên cạnh việc giảm lượng code, cách tiếp cận thiết kế theo mô-đun (sử dụng class, tag, mixin...) giúp kết quả hiển thị nhất quán và dễ bảo trì.

Tiếp theo ví dụ trước, nếu thiết kế tiêu đề của Odoo thay đổi, những thay đổi này cũng sẽ được áp dụng cho phần tử o_module_custom_title vì nó đang sử dụng thẻ <h5>.

Utility classes¶

Framework của chúng ta định nghĩa rất nhiều utility classes được thiết kế để đáp ứng gần như mọi nhu cầu về bố cục/thiết kế/tương tác. Chỉ riêng việc một class đã tồn tại sẵn cũng là lý do để ưu tiên sử dụng nó thay vì viết CSS tùy chỉnh, bất cứ khi nào có thể.

Hãy lấy ví dụ về position-relative.

position-relative {
   position: relative !important;
}

Vì đã có một utility-class được định nghĩa, bất kỳ dòng CSS nào khai báo position: relative đều có khả năng là dư thừa.

Odoo dựa vào bộ Bootstrap utility-classes mặc định và định nghĩa thêm các utility-class riêng bằng cách sử dụng Bootstrap API.

Xem thêm

Xử lý sự dài dòng của utility-classes¶

Nhược điểm của utility-classes là có thể làm giảm khả năng đọc hiểu của code.

Example

<myComponent t-attf-class="d-flex border px-lg-2 card
{{props.readonly ? 'o_myComponent_disabled' : ''}}
card d-lg-block position-absolute {{props.active ?
'o_myComponent_active' : ''}}  myComponent px-3"/>

Để khắc phục vấn đề này, bạn có thể kết hợp nhiều cách tiếp cận khác nhau:

trong các thuộc tính Qweb, chỉ sử dụng các class cần bật/tắt ngay lập tức;
sử dụng dòng mới cho mỗi thuộc tính;
sắp xếp thứ tự các class theo quy ước [odoo component] [bootstrap component] [css declaration order].

Example

<myComponent
   t-att-class="{
      o_myComponent_disabled: props.readonly,
      o_myComponent_active: props.active
   }"
   class="myComponent card position-absolute d-flex d-lg-block border px-3 px-lg-2"
/>

Xem thêm

Thứ tự thuộc tính CSS của Odoo