Structuring Stylesheets with Sass

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.

• Use as few selectors as possible
• Use specific wording for your classes so they don't overlap
• Whenever possible divide styles by function rather than the page or area they are meant to style
• Comment liberally to clarify a style's usage or the specifics of the method used.

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