Declaration listing best practices

How you write out your selectors has a direct impact on the readability of your code. Compounded with dynamic features like injecting code with mixins, this also has a direct impact on the output CSS cascade.

Much like standard CSS, I want my code to be readable, simple to follow and easy to update. I always list my parent specific declarations directly under it's selector and then list the indented child selectors to keep readability at a maximum.

See how I listed the CSS rules specific to .foo directly after declaring the selector. At the end of the parent selector's rules is when I declare it's nested, or child selector .nested-foo. Within this child selector I will continue to follow the same pattern.

.foo {
  font-size: 12px;
  padding: 10px;
  width: 50%;
  .nested-foo {
    background-color: green;
  }
}