编写简洁易于维护的CSS¶

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

Odoo的Web客户端被设计为模块化，这意味着（潜在的）所有类都可以在视图之间共享。在创建新类之前，请先检查代码。很可能已经有一个类或HTML标签可以做到你想要的事情。

此外，Odoo 还依赖于 Bootstrap (BS) ，这是一个最完整的 CSS 框架之一。该框架已经被定制，以匹配 Odoo 的设计（包括社区版和企业版），这意味着您可以直接在 Odoo 中使用任何 BS 类，并获得与我们的用户界面一致的视觉效果。

警告

一个类达到了期望的视觉效果并不一定意味着它适合这个任务。例如，要注意触发 JS 行为的类。
小心类语义。将 button class 应用于 title 不仅在语义上是错误的，还可能导致迁移问题和视觉不一致。

以下章节描述了在自定义代码是唯一选择时，简化 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 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;
}

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

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

另请参阅

处理实用类的冗长性¶

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

Edit on GitHub