LESS coding guidelines

Since saas-11.4 (master), we are not using LESS anymore. Be sure to check these guidelines instead: https://github.com/odoo/odoo/wiki/SCSS-coding-guidelines

Generic rules

• Order properties following the position - float - flex - display - size - margin - padding - border - background - font order (basically layout followed by style):

    .o_my_class {
        position: relative;
        .o-flex(1, 1, auto);
        display: block;
        width: 200px;
        height: 150px;
        margin: 10px 25px;
        padding: 8px;
        border: 3px solid red;
        background: blue;
        font-size: 2px;
        // ...
    }

• Put a space between the selector and the opening {
• Use "full" property when possible (use margin instead of margin-top)
• Indentation should always be 4-spaces
• Be careful when using a , in a hierarchy:

    .o_class_a {
        .o_class_b, .o_class_c {
            .o_class_d {
                // ...
            }
        }
    }

Here, this will create only one CSS rule:

.o_class_a .o_class_b .o_class_d, .o_class_a .o_class_c .o_class_d {}

But you still have to make sure that you really wanted the rule to be applied in both .o_class_a .o_class_b AND .o_class_a .o_class_c contexts.

• Do not create complex LESS hierarchy for nothing; use this:

    .o_class_a .o_class_b .o_class_c {
        display: block;
        .o_class_d {
            margin-top: 4px;
        }
    }

instead of this:

    .o_class_a {
        .o_class_b {
            .o_class_c {
                display: block;
                .o_class_d {
                    margin-top: 4px;
                }
            }
        }
    }

Mixins

• Use mixins when possible (see utils.less file). In particular, there are mixins for the flex properties.
• Avoid using mixins to style an element like another

.o_class_a {
    display: block;
}
.o_class_b {
    .o_class_a;
    width: 200px;
}

In this example, the display property will be repeated for no good reason. In that case, it will be better to add the o_class_a class on elements which have the o_class_b class in HTML. Another more elegant solution but that is not yet used in Odoo would be to use the extend feature in that case (see http://lesscss.org/features/#extend-feature).

• Do not use the .square mixin, the name is confusing.

Flex

Flex is great but remember it is not a great idea to use it on every DOM element. While flex is now supported by every major browser, its behavior is somewhat different from one browser to another and this becomes even more visible when there is a deep hierarchy of flex elements in the page. Most of the time, the nearly same behavior that you want is possible without flex and will be more efficient without it.

Styling

When you want to style some stuff, here are the steps you must follow:

1. Check if there is a standard Odoo (+ bootstrap) layout / set of classes that would style your DOM the way you want it. In that case, there is not any LESS to declare. Just use the right layout and classes.
2. Check if there is an Odoo app which uses a style which looks the same as the one you want. If this is the case, there should be a way to share this style in a common app (even in web, check with the framework team).
3. If required, create a LESS file for your app. Try to style only elements found by their classnames (avoid styling element found by ID or tag name). Classnames should follow the convention:
   • o_<app_name>_... where <app_name> is the name of your app (this is skipped for "standard" app like web and website)