When reading the Creating more intuitive code and making inheritance clear and the Avoiding nested selectors too deeply for more modular CSS recipes of this chapter, you should have realized that creating maintainable and reusable CSS code with Sass, which performs well, means to find a compromise between using class selectors for everything and using deep selector rules that create tight coupling between HTML and CSS. Creating modular CSS code can be such a compromise.

The methodologies described in this recipe will help you better organize your CSS code. These methodologies build your CSS code as round reusable objects, modules, or blocks. Reusable components can be reused in all your projects without the need to write the same CSS again and again for every new project.

For teams using the same methodology for writing CSS (and Sass), the methodology not only helps to write reusable CSS code, but also guarantees that each team member can more...