编写精简且易于维护的 CSS

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

Odoo 的 Web 客户端采用模块化设计，这意味着（可能所有）类都可以在各视图之间共享。创建新类之前请先检查代码。很可能已经有一个类或 HTML 标签正好实现了您要查找的功能。

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

警告

  • 某个类能实现所需的视觉效果，并不一定意味着它就是适合该用途的类。例如，请留意那些会触发 JS 行为的类。

  • 请注意类的语义。将 按钮类 应用于 标题 不仅在语义上是错误的，还可能导致迁移问题和视觉不一致。

以下各节介绍 在只能使用自定义代码时 精简 SCSS 代码行的技巧。

浏览器默认样式

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

在此阶段，所有“浏览器专属装饰”规则都已被移除，但大量定义基本布局信息的规则仍被保留（或为保持一致性由 Reboot 加以强化）。

您可以依赖这些规则。

示例

通常不需要为 <div/> 应用 display: block;。

div.element {
   display: block;
   /* not needed 99% of the time */
}

示例

在这种情况下，您可以选择更换 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}

…

…

更多内容

GitHub 上的 Bootstrap Reboot

HTML 标签

这似乎是显而易见的，但让文本看起来像标题的最简单且最 一致 的方法就是使用标题标签（<h1>、<h2> 等）。除了 reboot 规则之外，大多数标签都带有 Odoo 定义的装饰样式。

示例

不要这样做

<span class="o_module_custom_title">
   Hello There!
</span>

<span class="o_module_custom_subtitle">
   I'm a subtitle.
</span>

要这样做

<h5 class="o_module_custom_title">
   Hello There!
</h5>

<div class="o_module_custom_subtitle">
   <b><small>I'm a subtitle.</small></b>
</div>

注解

除了减少代码量之外，模块化设计方法（使用类、标签、mixin 等）还能使视觉效果保持一致，并且易于 维护。

沿用上一个示例，如果 Odoo 标题的设计发生变更，由于 o_module_custom_title 元素使用了 <h5> 标签，这些变更也会应用到该元素上。

工具类

我们的框架定义了大量工具类，旨在覆盖几乎所有布局/设计/交互需求。只要某个类已经存在，就足以说明在可能的情况下应优先使用它，而不是自定义 CSS。

以 position-relative 为例。

position-relative {
   position: relative !important;
}

既然已经定义了工具类，那么任何包含 position: relative 声明的 CSS 行都 可能 是多余的。

Odoo 基于默认的 Bootstrap 工具类 栈，并使用 Bootstrap API 定义自己的工具类。

更多内容

处理工具类的冗长问题

工具类的缺点是可能影响可读性。

示例

<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] 约定对类进行排序。

示例

<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 属性顺序