Structuring Stylesheets with Sass

How can we better harness the power of preprocessors like Sass to structure our CSS in new ways?

Sass provides us with powerful tools to write efficient and focused stylesheets. Most of us began writing with plain CSS. How do these new improvements influence the structure of our documents? Are there better ways to separate or group the selectors that were not previously possible without sass? Let's take a look at some of the important aspects of sass that allow us to change the way we write our code.

Separate vs single documents / Mechanics of organization

Importing documents into a single sass file gives us the flexibility of using multiple files or folder structures for large projects. These partials are then compiled into the main CSS file automatically. For large projects such as web applications this can be essential for logically grouping styles. Without this extra organization big projects can quickly become hard to manage, and time is lost searching through messy documents or performance suffers because of redundant selectors.

But is this method always beneficial? For some projects the speed of only having to modify one document outweighs the benefits of dividing styles by function or site structure. This is most true on smaller projects with fewer declarations and designers.

Ultimately the goal of a good document outline is to make it easy for all designers to quickly understand its structure and to find elements within the sub-modules.

Systems of organization (Modules vs site structure)

How you organize your styles can make a big difference.

Further resources: Jonathan Snook has outlined some well thought-out defaults at smacss.com.