Skip to content
Basic Less guidelines. Written in haiku only. You can help out too!
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Less Code Style Guidelines

Values and Variables

Rems are the best
Unless they really don't work.
Use what makes the most sense.

font-size: 1rem; // 16px


Selector, then space.
Then curly brace and new line.
Solo closing brace.

.hooray {


Use tabs to indent.
Only one tab per level.
Retract closing brace.

.nope {
	text-align: center;

Mulitple Selectors

Commas with newlines
Split multiple selectors.

.ringo {
	text-align: center;


Extends always first.
All mixins go after that.
Then the properties.

.fancy-class {
	.story(@bro: 1rem);

	border: none;
	text-align: center;

Nested Selectors

Nested selectors
Have a comment afterwards.
Search is now easy.

Prevents ridiculousness
And over-nesting.

.parent {

	.child { // .parent .child

		&:hover { // .parent .child:hover

			> .woah { // .parent .child:hover > .woah

				&:nth-of-type(2n + 1) { // .parent .child:hover > .woah:nth-of-type(2n + 1)
					text-align: center;


Classes are the best.
Please use IDs sparingly.
Stop, don't qualify.

#bad {
	// stuff
} {
	// over-qualified

Media Queries

Store queries as strings.
Declare variables.
CSS cascades.

@tablet-up: ~"screen and (min-width: 768px)";

Media queries
Nested inside the module.
Mobile First, of course.

.box {
	width: 1rem;
	@media @tablet-up {
		width: 2rem;
You can’t perform that action at this time.