1. Usar kebab case para nombrar clases

/* MAL */

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

/* BIEN */

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

2. Usar css variables en lugar de las de scss

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

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

3. Siempre ordenar las propiedades de css de manera alfabética

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

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

4. Mantener las clases anidadas a 2 niveles maximo.

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

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

5. Evitar el uso de ID selectors

/* MAL */
#my-module {
}

/* BIEN */
.my-module {
}

6. Siempre poner un espacio entre la propiedad css y su valor

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

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

7. Siempre dejar un espacio en blanco entre dos clases css

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

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

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

8. En un item flex siempre controlar su width/height usando flex-basis

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

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

9. Nunca usar transition all

/* MAL */

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

/* BIEN */

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