编写简洁易维护的 CSS¶

有许多方法可以学习和简化 SCSS。第一步是确定是否真的需要自定义代码。

Odoo 的 webclient 设计为模块化，这意味着（可能所有）类都可以在不同视图之间共享。在创建新类之前，请查看代码。很可能已经存在一个类或 HTML 标签可以完全满足你的需求。

在这一点之上，Odoo 依赖于 `Bootstrap <https://getbootstrap.com/docs/5.1/getting-started/introduction/>`_（BS），这是目前最完整的 CSS 框架之一。该框架已进行自定义，以匹配 Odoo 的设计（包括社区版和企业版），这意味着您可以在 Odoo 中直接使用任何 BS 类，并获得与我们 UI 一致的视觉效果。

警告

一个类实现了所需的视觉效果，并不一定意味着它是适合该任务的正确类。请注意那些会触发 JavaScript 行为的类，例如。
请注意类的语义。将 按钮类 应用于标题不仅在语义上是错误的，还可能导致迁移问题和视觉不一致。

以下部分介绍了在**仅能通过自定义代码实现时**，精简 SCSS 代码行的技巧。

浏览器默认样式¶

默认情况下，每个浏览器使用 用户代理样式表 来渲染内容。为了克服浏览器之间的不一致性，一些规则被 Bootstrap 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: 块级`
`<span/>`、`<a/>`、`<em/>`、`<b/>`…	`display: inline`
`<按钮/>`, `<标签/>`, `<输出/>`…	`display: 内联块级元素`
`<img/>`，`<svg/>`	`垂直对齐：中间`
`<summary/>`, `[role="按钮"]`	`cursor: pointer;`
`<q/>`	`:before {内容: open-quote}` `:after {内容: close-quote}`
…	…

另请参见

GitHub 上的 Bootstrap Reboot

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

由于定义了一个实用程序类，任何包含 position: relative 声明的 CSS 代码行**可能**是冗余的。

Odoo 依赖默认的 Bootstrap 工具类堆栈，并使用 Bootstrap 接口定义了其自身的工具类。

另请参见

Bootstrap 实用程序类
Odoo 自定义工具在 GitHub 上 <https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/scss/utilities_custom.scss>`_

处理实用类的冗长问题¶

实用类的缺点是可能导致可读性不足。

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