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