编写简洁且易于维护的 CSS¶

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

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

除此之外，Odoo 依赖于 Bootstrap （BS），这是目前最完整的 CSS 框架之一。该框架已经根据 Odoo 的设计（包括社区版和企业版）进行了定制，这意味着您可以直接在 Odoo 中使用任何 BS 类，并获得与我们的 UI 一致的视觉效果。

警告

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

以下部分描述了在**必须使用自定义代码时**精简 SCSS 行的技巧。

浏览器默认值¶

默认情况下，每个浏览器都会使用 用户代理样式表 渲染内容。为了克服浏览器之间的不一致性，其中一些规则被 Bootstrap Reboot 覆盖。

在此阶段，所有“特定于浏览器的装饰性”规则已被移除，但定义基本布局信息的大部分规则仍然保留（或者出于一致性原因被 Reboot 强化）。

您可以依赖这些规则。

Example

对 <div/> 应用 display: block; 通常是没有必要的。

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> 等）。除了Reboot规则外，几乎所有标签都带有Odoo定义的装饰性样式。

Example

Don’t

<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 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组件] [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