編寫簡潔易于維護的CSS?

有很多方法可以使 SCSS 更加簡潔和簡化。第一步是確定是否需要自定義代碼。

Odoo的Web客戶端被設計為模塊化，這意味著（潛在的）所有類都可以在視圖之間共享。在創建新類之前，請先檢查代碼。很可能已經有一個類或HTML標簽可以做到你想要的事情。

此外，Odoo 依賴于 Bootstrap (BS) 這個最完整的 CSS 框架之一。該框架已經被定制以匹配 Odoo 的設計（社區版和企業版），這意味著您可以直接在 Odoo 中使用任何 BS 類，并獲得與我們的 UI 一致的視覺效果。

警告

一個類達到了期望的視覺效果并不一定意味著它適合這個任務。例如，要注意觸發 JS 行為的類。
注意類語義。將 button類 ** 應用于 ** 標題 不僅在語義上是錯誤的，還可能導致遷移問題和視覺不一致性。

以下章節介紹了在 只有自定義代碼是唯一選擇 時簡化 SCSS 代碼的技巧。

瀏覽器默認值?

默認情況下，每個瀏覽器都使用 用戶代理樣式表 來呈現內容。為了克服瀏覽器之間的不一致性，一些規則被 `Bootstrap Reboot <https://getbootstrap.com/docs/5.1/content/reboot/>`_覆蓋。

在這個階段，所有的“瀏覽器特定裝飾”規則都被剝離了，但是一大部分定義基本布局信息的規則被保留（或者由于一致性原因被 Reboot 加強）。

你可以依賴這些規則。

Example

通常不需要將 display: block; 應用于 <div/> 。

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

Example

在這種情況下，您可以選擇切換HTML標簽，而不是添加新的CSS規則。

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

這是一份不全面的默認規則清單：

標簽 / 屬性	默認值
`<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}`
…	…

另請參閱

Bootstrap Reboot 在 GitHub 上的鏈接

HTML 標簽?

看起來很明顯，但使文本看起來像標題的最簡單和最一致的方法是使用標題標簽（ <h1> ， <h2> ，…）。除了重啟規則外，大多數標簽都帶有Odoo定義的裝飾樣式。

Example

不要

<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;
}

做

<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;
}

注解

除了減少代碼量，模塊化設計方法（使用類、標簽、混合等）可以保持視覺效果的一致性，易于維護。

在上一個例子中，如果Odoo的標題設計發生了變化，這些變化也將應用于 o_module_custom_title 元素，因為它使用了 <h5> 標簽。

實用類?

我們的框架定義了大量的實用類，旨在涵蓋幾乎所有的布局/設計/交互需求。只要存在一個類，就應該盡可能使用它，而不是使用自定義的CSS。

以 position-relative 為例。

position-relative {
   position: relative !important;
}

由于定義了utility-class，任何帶有聲明 position: relative 的CSS行都可能是多余的。

Odoo 依賴于默認的 Bootstrap 實用類堆棧，并使用 Bootstrap API 定義自己的實用類。

另請參閱

Bootstrap 實用類
Odoo在github上的自定義工具

處理實用類的冗長性?

utility-classes 的缺點是可能會導致可讀性不足。

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"/>

為了克服這個問題，您可以結合不同的方法：

在 Qweb 屬性中，只使用可即時切換的類；
每個屬性使用新行；
使用約定的方式來排序類，即 [odoo 組件] [bootstrap 組件] [CSS 聲明順序] 。

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"
/>

另請參閱

Odoo CSS屬性順序

Edit on GitHub