Write lean easy-to-maintain CSS¶
There are many ways to lean and simplify SCSS. The first step is to establish if custom code is needed at all.
Flectra’s webclient has been designed to be modular, meaning that (potentially all) classes can be shared across views. Check the code before creating a new class. Chances are that there is already a class or an HTML tag doing exactly what you’re looking for.
On top of that, Flectra relies on Bootstrap (BS), one of the most complete CSS frameworks available. The framework has been customized in order to match Flectra’s design (both community and professional versions), meaning that you can use any BS class directly in Flectra and achieve a visual result that is consistent with our UI.
Warning
The fact that a class achieves the desired visual result doesn’t necessarily mean that it’s the right one for the job. Be aware of classes triggering JS behaviors, for example.
Be careful about class semantics. Applying a button class to a title is not only semantically wrong, it may also lead to migration issues and visual inconsistencies.
The following sections describe tips to strip-down SCSS lines when custom-code is the only way to go.
Browser defaults¶
By default, each browser renders content using a user agent stylesheet. To overcome inconsistencies between browsers, some of these rules are overridden by Bootstrap Reboot.
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).
You can rely on these rules.
Example
Applying display: block;
to a <div/>
is normally not necessary.
div.element {
display: block;
/* not needed 99% of the time */
}
Example
In this instance, you may opt to switching the HTML tag rather than adding a new CSS rule.
span.element {
display: block;
/* replace <span> with <div> instead
to get 'display: block' by default */
}
Here’s a non-comprehensive list of default rules:
Tag / Attribute |
Defaults |
---|---|
|
|
|
|
|
|
|
|
|
|
|
:before {content: open-quote} :after {content: close-quote} |
… |
… |
See also
Utility classes¶
Our framework defines a multitude of utility classes designed to cover almost all layout/design/interaction needs. The simple fact that a class already exists justifies its use over custom CSS whenever possible.
Take the example of position-relative
.
position-relative {
position: relative !important;
}
Since a utility-class is defined, any CSS line with the declaration position: relative
is
potentially redundant.
Flectra relies on the default Bootstrap utility-classes stack and defines its own using Bootstrap API.
Handling utility-classes verbosity¶
The downside of utility-classes is the potential lack of readability.
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"/>
To overcome the issue you may combine different approaches:
in Qweb attributes, only use classes to be toggled on-the-fly;
use new lines for each attribute;
order classes using the convention
[flectra 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"
/>
See also