Mobile First
All classes should be written mobile first
// Do This
.good {
// Mobile code
@media (min-width: 768px) {
// Desktop code
}
}
// Don't Do This
.bad {
// Desktop code
@media (max-width: 768px) {
// Mobile code
}
}
Avoid IDs
// Do This
.good {
.better {
background-color: rgb(0, 0, 0);
}
}
// Don't Do This
#bad {
#worse {
background-color: #000;
}
}
Class naming
Follow the BEM naming conventions
// Do this
<figure class="photo">
<img class="photo__img" src="me.jpg">
<figcaption class="photo__caption">Look at me!</figcaption>
</figure>
<style>
.photo { }
.photo__img { }
.photo__caption { }
</style>
// Don't Do This
<figure class="photo">
<img src="me.jpg">
<figcaption >Look at me!</figcaption>
</figure>
<style>
.photo { }
.photo img { }
.photo figcaption { }
</style>
Descriptive Naming
Use names that follow the BEM structure, also make sure to use the correct variable values
// Do This
.brand__title {
font-family: 'Ubuntu', serif;
}
.u-highlight {
color: $color-text-highlight;
}
// Don't Do This
.huge-font {
font-family: 'Ubuntue', sans-serif;
}
.blue {
color: blue;
}
Zero Units
// Do This
.better {
animation-delay: 0s;
margin: 0;
opacity: 0.4;
}
// Don't Do This
.not-so-good {
animation-delay: 0;
margin: 0px;
opacity: .4567;
}
Magic Numbers
Avoid magic numbers
// Do This
.good {
// 20px because of font height
left: ($GUTTER - 20px - ($NAV_HEIGHT / 2));
}
// Don't Do This
.bad {
left: 20px;
}
Commenting
// Do This
.good {
// Commenting on top of property
background-color: red;
// padding-top: 30px;
// width: 100%;
}
// Don't Do This
.bad {
background-color: red; // Not commenting on top of property
/* padding-top: 30px;
width: 100% */
}