メンテナンスしやすいCSSを書く¶

SCSSを傾けて単純化する方法はたくさんあります。最初のステップはカスタムコードが必要かどうかを確認することです。

Odoo の Web クライアントは、(潜在的にはすべての) クラスをビュー全体で共有できることを意味するモジュール型に設計されています。新しいクラスを作成する前にコードを確認してください。チャンスは、あなたが探しているものを正確に実行しているクラスやHTMLタグがすでにあることです。

さらに、Odoo は Bootstrap (BS) を利用しています。 Odoo のデザイン(コミュニティ版とエンタープライズ版の両方)に合わせてフレームワークがカスタマイズされています。つまり、OdooでBSクラスを直接使用して、UIと一致する視覚的な結果を得ることができます。

警告

クラスが望ましい視覚的結果を達成するという事実は、必ずしもそれが仕事に適していることを意味するわけではありません。例えば JS の動作を引き起こすクラスに注意してください。
授業の意味論には気をつけなさい。 ボタンクラス を タイトル に適用することは意味論的に間違っているだけでなく、移行の問題や視覚的な矛盾につながる可能性があります。

以下のセクションでは、**カスタムコードが唯一の方法**の場合には、ストリップダウンSCSS行へのヒントについて説明します。

ブラウザの既定値¶

デフォルトでは、各ブラウザーは ユーザーエージェントスタイルシート を使用してコンテンツをレンダリングします。ブラウザー間の矛盾を克服するために、これらのルールのいくつかは Bootstrap Reboot によって上書きされます。

この段階では、"browser-specific-decoration" のすべてのルールが剥奪されました。しかし、基本的なレイアウト情報を定義する大きなルールは維持されています(または、一貫性の理由から*Reboot*によって強化されています)。

これらのルールに頼ることができます。

Example

`<div/>`に`display: block;`を適用するのは通常必要ありません。

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

Example

この場合、新しい CSS ルールを追加するのではなく、HTML タグを切り替えることを選択できます。

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}`
...	...

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

ユーティリティクラスが定義されているため、position: relative という宣言を持つCSS行は、冗長化されます。

Odoo はデフォルトの Bootstrap utility-classes スタックに依存し、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 属性では、クラスのみが on-the-fly に切り替えられます。
各属性に新しい行を使用する
慣例`[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"
/>