CSS Nesting and Why Its a Good Thing

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