Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 

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

About

Basic Less guidelines. Written in haiku only. You can help out too!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published