Create a gist now

Instantly share code, notes, and snippets.

Embed
An example of bad coding practice - deeply nested Sass leading to over-qualified CSS.
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
// This code sucks.
.module-container {
background-color: red;
.module-sub-container {
background-color: yellow;
.feature1 {
background-color: orange;
.feature2-container {
background-color: white;
span {
background-color: green;
}
}
.feature3 {
background-color: transparent;
&.option1 {
background-color: blue;
.option2 {
background-color: purple;
}
}
.option3 {
background-color: black;
}
}
}
}
}
// This is how you might re-write it in a more efficient, reusable way
/* --------------------------------------------- */
.module_container {
background-color: red;
}
.module_sub-container {
background-color: yellow;
}
.module_feature1 {
background-color: orange;
}
.module_feature2-container {
background-color: white;
}
.module_feature2-element { // used to be `span`
background-color: green;
}
.module_feature3 {
background-color: transparent;
&--option1 {
background-color: blue;
}
&--option2 {
background-color: purple;
}
&--option3 {
background-color: black;
}
}
.module-container {
background-color: red;
}
.module-container .module-sub-container {
background-color: yellow;
}
.module-container .module-sub-container .feature1 {
background-color: orange;
}
.module-container .module-sub-container .feature1 .feature2-container {
background-color: white;
}
.module-container .module-sub-container .feature1 .feature2-container span {
background-color: green;
}
.module-container .module-sub-container .feature1 .feature3 {
background-color: transparent;
}
.module-container .module-sub-container .feature1 .feature3.option1 {
background-color: blue;
}
.module-container .module-sub-container .feature1 .feature3.option1 .option2 {
background-color: purple;
}
.module-container .module-sub-container .feature1 .feature3 .option3 {
background-color: black;
}
/* --------------------------------------------- */
.module_container {
background-color: red;
}
.module_sub-container {
background-color: yellow;
}
.module_feature1 {
background-color: orange;
}
.module_feature2-container {
background-color: white;
}
.module_feature2-element {
background-color: green;
}
.module_feature3 {
background-color: transparent;
}
.module_feature3--option1 {
background-color: blue;
}
.module_feature3--option2 {
background-color: purple;
}
.module_feature3--option3 {
background-color: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment