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: 4 months 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 (about 10 years ago)
- Default Branch: master
- Last Pushed: 2015-10-02T01:42:42.000Z (almost 10 years ago)
- Last Synced: 2025-01-16T11:32:27.548Z (6 months 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;
}
}
```