编写简洁且易于维护的 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> 等）。除了重置规则外，几乎所有标签都带有 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 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