Please read this first: https://signalvnoise.com/posts/3003-css-taking-control-of-the-cascade
So, in CSS we can establish a hierarchy so that a class only applies if it’s within a parent class. This hierarchy is a good and very much needed thing. Because this way you can define your class names for specific areas of the site with freedom of mind – it will never interfere with or be overwritten by another class that has (accidentally) the same name. Think of class names such as .title
. And no, .newsletter-title
and .homepage-newsletter-title
is not a good idea (CSS supports native hierarchy, so why would you want to fake it?).
Example of SASS Good Practise:
.newsletter
margin: 20px
.title-box
.title
margin-top: 20px
.subtitle
margin-top: 10px
.email-input
padding: 50px
Example of SASS Bad Practise:
.title
margin-top: 20px
.subtitle
margin-top: 10px
.email-input
padding: 5px
.newsletter
margin: 20px
You agree? Are you ready to overshoot the target? Read this: http://thesassway.com/beginner/the-inception-rule