编写简洁易于维护的CSS¶

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

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

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

警告

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

The following sections describe tips to strip-down SCSS lines when custom-code is the only way to go.

浏览器默认值¶

默认情况下，每个浏览器都使用 用户代理样式表 来呈现内容。为了克服浏览器之间的不一致性，其中一些规则被 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 标签¶

It may seem obvious, but the simplest and most consistent way of making text look like a title is to use a header tag (<h1>, <h2>, …). Besides reboot rules, mostly all tags carry decorative styles defined by 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