https://github.com/radium-v/less-code-style-guide

Basic Less guidelines. Written in haiku only. You can help out too!
https://github.com/radium-v/less-code-style-guide

Last synced: 2 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/radium-v/less-code-style-guide
• Owner: radium-v
• Created: 2015-05-14T16:26:50.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-10-02T01:42:42.000Z (about 9 years ago)
• Last Synced: 2023-03-22T10:47:11.349Z (over 1 year ago)
• Homepage:
• Size: 117 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Less Code Style Guidelines

## Values and Variables

Rems are the best  

[Unless they really don't work.](http://fvsch.com/code/bugs/rem-mediaquery/)  

Use what makes the most sense.  

```less

font-size: 1rem; // 16px

```

-

### Structure

Selector, then space.  

Then curly brace and new line.  

Solo closing brace.  

```less

.hooray {

}

```

-

### Indentation

Use tabs to indent.  

Only one tab per level.  

Retract closing brace.

```less

.nope {

	text-align: center;

}

```

-

### Mulitple Selectors

Commas with newlines  

Split multiple selectors.  

Alphabetically.  

```less

.george,

.john,

.paul,

.ringo {

	text-align: center;

}

```

-

### Properties

Extends always first.  

All mixins go after that.  

Then the properties.

```less

.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.  

```less

.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.  

```less

#bad {

	// stuff

}

ul.be-sorry {

	// over-qualified

}

```

-

### Media Queries

Store queries as strings.  

Declare variables.  

CSS cascades.

```less

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

```

Media queries  

Nested inside the module.  

Mobile First, of course.

```less

.box {

	width: 1rem;

	

	@media @tablet-up {

		width: 2rem;

	}

}

```