Írjon karbantartható, egyszerű CSS-t

Számos módja van az SCSS egyszerűsítésének és karcsúsításának. Az első lépés annak megállapítása, hogy egyáltalán szükség van-e egyedi kódra.

Az Odoo webkliense moduláris kialakítású, ami azt jelenti, hogy (potenciálisan minden) osztály megosztható a nézetek között. Ellenőrizze a kódot, mielőtt új osztályt hozna létre. Valószínű, hogy már létezik egy osztály vagy HTML tag, amely pontosan azt csinálja, amit keres.

Ezen felül az Odoo a Bootstrap (BS) keretrendszerre támaszkodik, amely az egyik legteljesebb CSS keretrendszer. A keretrendszert testreszabták, hogy illeszkedjen az Odoo dizájnjához (mind a közösségi, mind a vállalati verziókhoz), ami azt jelenti, hogy bármely BS osztályt közvetlenül használhat az Odoo-ban, és olyan vizuális eredményt érhet el, amely összhangban van a felhasználói felületünkkel.

Figyelem

  • Az a tény, hogy egy osztály eléri a kívánt vizuális eredményt, nem feltétlenül jelenti azt, hogy ez a megfelelő a feladathoz. Legyen tisztában az osztályok által kiváltott JS viselkedésekkel, például.

  • Legyen óvatos az osztály szemantikájával. Egy gomb osztály alkalmazása egy címre nemcsak szemantikailag helytelen, hanem migrációs problémákhoz és vizuális következetlenségekhez is vezethet.

A következő szakaszok tippeket írnak le az SCSS sorok lecsupaszításához amikor az egyedi kód az egyetlen megoldás.

Böngésző alapértelmezések

Alapértelmezés szerint minden böngésző felhasználói ügynök stíluslappal rendereli a tartalmat. A böngészők közötti következetlenségek leküzdése érdekében ezek közül néhány szabályt a Bootstrap Reboot felülír.

At this stage all „browser-specific-decoration” rules have been stripped away, but a big chunk of rules defining basic layout information is maintained (or reinforced by Reboot for consistency reasons).

Ezekre a szabályokra támaszkodhat.

Example

display: block; alkalmazása egy <div/>-re általában nem szükséges.

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

Example

Ebben az esetben választhatja a HTML tag cseréjét, ahelyett, hogy új CSS szabályt adna hozzá.

span.element {
   display: block;
   /* replace <span> with <div> instead
      to get 'display: block' by default */
}

Itt van egy nem teljes lista az alapértelmezett szabályokról:

Tag / Attribútum

Alapértelmezések

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

…

…

Lásd még

Bootstrap Reboot a GitHubon

HTML címkék

Lehet, hogy nyilvánvalónak tűnik, de a legegyszerűbb és leg**konzisztensebb** módja annak, hogy a szöveg címként jelenjen meg, az a fejléc címke használata (<h1>, <h2>, …). A reboot szabályok mellett szinte minden címke dekoratív stílusokat hordoz, amelyeket az Odoo határoz meg.

Example

Ne

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

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

Tegye

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

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

Megjegyzés

A kód mennyiségének csökkentése mellett a moduláris tervezési megközelítés (osztályok, címkék, mixinek használata…) biztosítja a vizuális eredmény konzisztenciáját és könnyű karbantarthatóságát.

Az utolsó példát követve, ha az Odoo címek dizájnja megváltozik, ezek a változások az o_module_custom_title elemben is alkalmazásra kerülnek, mivel <h5> tag-et használ.

Segédosztályok

Keretrendszerünk számos segédosztályt határoz meg, amelyek célja szinte minden elrendezési/dizájn/interakciós igény kielégítése. Az a tény, hogy egy osztály már létezik, indokolja annak használatát egyedi CSS helyett, amikor csak lehetséges.

Vegyük például a position-relative-t.

position-relative {
   position: relative !important;
}

Mivel egy segédosztály definiálva van, bármely CSS sor a position: relative deklarációval potenciálisan felesleges.

Az Odoo a Bootstrap utility-classes alapértelmezett halmazára támaszkodik, és sajátjait a Bootstrap API használatával definiálja.

Lásd még

Segédosztályok bőbeszédűségének kezelése

A segédosztályok hátránya a potenciális olvashatósági hiány.

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"/>

A probléma megoldásához különböző megközelítéseket kombinálhat:

  • a Qweb attribútumokban csak az on-the-fly módon kapcsolható osztályokat használja;

  • használjon új sorokat minden attribútumhoz;

  • rendezze az osztályokat a következő konvenció szerint: [odoo komponens] [bootstrap komponens] [css deklarációs sorrend].

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"
/>

Lásd még

Odoo CSS tulajdonságok sorrendje