CSS/LESS Coding Convention

General CSS

Consistent and Minimal

Most important rules:
Be consistent.
Be minimal.
Use tools.
Read these sections carefully.

React

Scope

Write CSS per component.

let Btn = props=><a className="main_links" href={props.href}>
    {props.children}</a>;
let Contact_link = props=><a className="main_links" href={props.href}>
    {props.children}</a>;

let Btn = props=><a className="btn" href={props.href}>{props.children}</a>;
let Contact_link = props=><Btn {...props}/>;

.btn {
    color: @dark_blue;
}

Keep the same syling wherever the component is used: don't nest component CSS inside a different component.

.main_page {
    .btn {
        color: @white;
    }
}

.main_page {
    color: @white;
}
.btn {
    color: @dark_blue;
    .btn-main {
        color: @white;
    }
}

Flat

Make all component CSS global. A component should look the same in on any page in and inside any other component.

.main_page {
    .btn {
        color: @dark_blue;
    }
}

.btn {
    color: @dark_blue;
}

Nest component sub-classes inside the component less to group the definitions together.

.btn {
    padding: 5px;
}
.btn-text {
    color: @dark_blue;
}

.btn {
    padding: 5px;
    .btn-text {
        color: @dark_blue;
    }
}

Inside a component's class keep it flat - only one level of nesting.

.btn {
    padding: 5px;
    .btn-left {
        float: left;
        .btn-text {
            color: @dark_blue;
        }
    }
}

.btn {
    padding: 5px;
    .btn-left {
        float: left;

    }
    .btn-text {
        color: @dark_blue;
    }
}

Naming

Use Unix notation for naming

.startButton {
    color: @white;
}

.start-button {
    color: @white;
}

.start_button {
    color: @white;
}

Use the same name as the react component

let Btn = props=><a className="button_round" href={props.href}>
    {props.children}</a>;

let Btn = props=><a className="btn" href={props.href}>
    {props.children}</a>;

Use parent class name to prefix inner class names to pervent collisions.

.btn {
    .text {
          color: @white;
    }
}

.btn {
    .btn-text {
          color: @white;
    }
}

Use dash "-" as a delimiter between prefixes.

.btn {
    .btn_text {
          color: @white;
    }
}

.btn {
    .btn-text {
          color: @white;
    }
}

Use "sc_" as a prefix for sections.

let Many_ips = props=><Section className="many_ips">
    <h2>title</h2></Section>;

let Many_ips = props=><Section className="sc_many_ips">
    <h2>title</h2></Section>;

Do not use "ad-" prefix for class names. Such items can be removed by ad blockers. Check that your code works with the ad blockers enabled.

.ad-text {
    color: @white;
}

.item-text {
    color: @white;
}

HTML

TBD