编写精益且易于维护的 CSS¶

有很多方法可以精益和简化 SCSS。第一步是确定是否需要自定义代码。

Odoo 的网络客户端被设计为模块化，这意味着（可能是所有）类可以跨视图共享。在创建新类之前检查代码。很可能已经有一个类或 HTML 标签完全可以满足您的需求。

最重要的是，Odoo 依赖于 Bootstrap (BS)，它是可用的最完整的 CSS 框架之一。该框架已经过定制，以匹配 Odoo 的设计（社区版和企业版），这意味着您可以直接在 Odoo 中使用任何 BS 类，并获得与我们的 UI 一致的视觉结果。

警告

一个类实现了所需的视觉结果这一事实并不一定意味着它适合该工作。例如，请注意触发 JS 行为的类。
请注意类语义。将**按钮类**应用于**标题**不仅在语义上是错误的，还可能导致迁移问题和视觉不一致。

以下部分描述了**当自定义代码是唯一的方法**时精简 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: 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 on 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;
}

由于定义了实用程序类，因此任何带有声明 position: relative 的 CSS 行**可能**是多余的。

Odoo 依赖于默认的 Bootstrap utility-classes 堆栈并使用 Bootstrap API 定义自己的堆栈。

其他资料

处理实用程序类的冗长内容¶

实用程序类的缺点是可能缺乏可读性。

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

其他资料

Odoo CSS properties order