Пишіть простий та зручний у підтримці CSS¶

Існує багато способів спростити та покращити SCSS. Перший крок – визначити, чи взагалі потрібен власний код.

Веб-клієнт Odoo розроблено модульним, що означає, що (потенційно всі) класи можна використовувати спільно в різних представленнях. Перевірте код перед створенням нового класу. Цілком ймовірно, що вже існує клас або тег HTML, який виконує саме те, що ви шукаєте.

Крім того, Odoo спирається на Bootstrap (BS), один із найповніших CSS-фреймворків. Фреймворк був налаштований відповідно до дизайну Odoo (як версій для спільноти, так і корпоративних), що означає, що ви можете використовувати будь-який BS-клас безпосередньо в Odoo та досягати візуального результату, що відповідає нашому інтерфейсу користувача.

Попередження

Той факт, що клас досягає бажаного візуального результату, не обов’язково означає, що він підходить для цього завдання. Наприклад, зверніть увагу на класи, які запускають певні поведінки в JS.
Будьте обережні з семантикою класу. Застосування класу button до title не лише семантично неправильне, але й може призвести до проблем міграції та візуальних невідповідностей.

У наступних розділах описано поради щодо спрощення рядків SCSS, коли єдиним варіантом є використання користувацького коду.

Налаштування браузера за замовчуванням¶

За замовчуванням кожен браузер відтворює контент, використовуючи таблиця стилів користувацького агента. Щоб подолати невідповідності між браузерами, деякі з цих правил замінюються на Bootstrap 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¶

Це може здатися очевидним, але найпростіший та найпослідовніший спосіб зробити текст схожим на заголовок – це використовувати тег заголовка (<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;
}

Оскільки визначено утилітний клас, будь-який рядок CSS з оголошенням position: relative є потенційно надлишковим.

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 використовувати лише класи, які можна перемикати на льоту;
використовуйте нові рядки для кожного атрибута;
упорядкувати класи, використовуючи домовленість [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"
/>

Перегляньте також

Порядок властивостей CSS Odoo

Edit on GitHub