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

Structure

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

.hooray {
}

Indentation

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

.nope {
	text-align: center;
}

Mulitple Selectors

Commas with newlines
Split multiple selectors.
Alphabetically.

.george,
.john,
.paul,
.ringo {
	text-align: center;
}

Properties

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

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

	border: none;
	text-align: center;
}

Nested Selectors

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

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

Selectors

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

#bad {
	// stuff
}

ul.be-sorry {
	// 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;
	}
}

radium-v / less-code-style-guide