1. Use kebab case for naming your css code

/* BAD */

.myClass {
	cursor: pointer;
	height: 200px;
	width: 100px;
}

/* GOOD */

.my-class {
	cursor: pointer;
	height: 200px;
	width: 100px;
}

2. Use css variables instead scss ones

/* BAD */
$colors = (
	myColor: #f829ff,
)

/* GOOD */
:root {
	my-color: #f829ff;
}

3. Order css properties in alphabetical order

/* BAD */
.my-class {
	width: 100px;
	cursor: pointer;
	height: 200px;
}

/* GOOD */
.my-class {
	cursor: pointer;
	height: 200px;
	width: 100px;
}

4. Keep nested classes at two/three levels maximun

/* BAD */
.my-module {
	.nested-module {
		.another-nested-module {
			.other-more {
			}
		}
	}
}

/* GOOD */
.my-module {
	.nested-module {
	}
}

5. Avoid ID selectors

/* BAD */
#my-module {
}

/* GOOD */
.my-module {
}

6. Always put a space between properties and their value

/* BAD */
.my-class {
	width:100px;
}

/* GOOD */
.my-class {
	width: 100px;
}

7. Always leave a blank space separation between two classes

/* BAD */
.my-class {
	width:100px;
}
.my-other-confusing-class {
	height: 200px;
}

/* GOOD */
.my-class {
	width: 100px;
}

.now-i-get-it-class {
	height: 200px;
}

8. In a flex item always control width/height using flex-basis

/* BAD */
.my-flex-item {
	width: 50%;
}

/* GOOD */
.my-flex-item {
	flex-basis: 50%;
}

9. Never use transition all

/* BAD */
.selector-to-animate {
	transition: all 0.2s ease-in;
}

/* GOOD */
.selector-to-animate {
	transition: transform 0.2s ease-in;
}