Sass is a scripting language that gets compiled into CSS. This theme uses the SCSS syntax, so any valid CSS you write is also valid SCSS. Variables, Nesting, and Mixins are just a few of Sass’s powerful features.
This Sass file structure uses many of the ideas discussed in Jonathan Snook’s SMACSS and Harry Robert’s itcss, which provide a starting point for building modular, scalable CSS.
It’s recommended that you follow the Drupal 8 CSS architecture guidelines.
This file shouldn’t contain any CSS code. It only serves to combine the CSS contained in other Sass partials through @import directives.
Global variables, functions, and mixins that should be imported into all scss files.
CSS reset based on Normalize.css and default styles for HTML elements. Custom font declarations and extendables go here as well.
The layout of major regions that components will be placed into.
Discrete, reusable UI components. (Think SMACSS “modules”.) The majority of your styles should be here.
Utility classes that aren’t components themselves, such as clearfix.
Deadlines happen, so put your quick fixes here. Hopefully there will be time later to move/re-factor these styles into their proper place.
You should try to abstract your components as much as possible to promote reuse throughout the theme. Components should be flexible enough to respond to any width and should never rely on context (e.g., .sidebar-first .component) for styling. This allows components to be placed anywhere in the markup with no risk of them breaking.
If you find you need to change the look of a component depending on its context, you should avoid using context based classes at all costs. Instead, it is better to add another modifier class to the component to alter the styling.
Sub-components are the individual parts that make up a component. As a general rule, adding a class to target a sub-component is a much better option than using descendant selectors or element selectors. In many cases sub-components can be made more reusable by making them components in their own right, so they can then be used within other components.