3 simple rules

There are only 3 simple rules to follow. And SASS compiler will let you know if you break them.

#1 One entity in one place

The most important rule is ONE ENTITY IN ONE PLACE, hence the name "Single Place Of Truth".

This applies to any entity, such as a component, element, or mutation.

You will find any entity always in one contiguous block.

#2 Fixed semantic order

The second rule is FIXED SEMANTIC ORDER of all entities:

A component contains:

1. register - the very first section, used when component has mutations or sub elements, or can be omitted when component is in mode draft.
2. default - the default style section of component or sub element. It can be omitted when current element has no mutations, just single fixed style.
3. responsive - mutations for breakpoints, media queries, or special responsive contexts.
4. state - section of all states of current component/element.
5. variant - section of all variants of current component/element.
6. browser - section of all browser exceptions of current component/element.
7. context - section of all contexts of current component/element.
8. pseudo-element - repeat entities with order 2. - 6.
9. element - repeat entities with order 2. - 6.

When this prescripted order is not followed, SASS parser will let you know that you break the 2nd rule.

This rule brings the ability to find (or not to find) everything with absolute certainty. Because even if you can't find something (on its prescripted place), it means it doesn't exist.

#3 Follow HTML structure

The third and last rule is FOLLOW HTML STRUCTURE to find everything very quickly.

HTML

<button>
    <span class="icon">
        <img src="{{ buttonImage }}" />
    </span>
    <span class="text">
        {{ buttonName }}
    </span>
</button>

SASS

+mode('draft')

+component('button')
  display: inline-block
  
  +____________________________
  +element('.icon')
    vertical-align: middle

    +____________________________
    +element('img')
      width: 100%
    
  +____________________________
  +element('.text')
    font-size: 1.2em    

SCSS

@include mode('draft');

@include component('button') {
  display: inline-block;
  
  @include ____________________;
  @include element('.icon') {
    vertical-align: middle;

    @include _____________________;
    @include element('img') {
      width: 100%;
    }
  }
  @include ____________________;
  @include +element('.text') {
    font-size: 1.2em;
  }
}

SASS

+mode('strict')

+component('button')
  +register
    +element('.icon')
      +element('img')
    +element('.text')

  display: inline-block
  
  +____________________________
  +element('.icon')
    vertical-align: middle

    +____________________________
    +element('img')
      width: 100%
    
  +____________________________
  +element('.text')
    font-size: 1.2em    

SCSS

@include mode('strict');

@include component('button') {
  @include register {
    @include element('.icon') {
      @include element('img');
    }
    @include element('.text');
  }

  display: inline-block;
  
  @include ____________________;
  @include element('.icon') {
    vertical-align: middle;

    @include _____________________;
    @include element('img') {
      width: 100%;
    }
  }
  @include ____________________;
  @include +element('.text') {
    font-size: 1.2em;
  }
}

If your component has sub elements, a SASS/SCSS code have to reflect exact same element structure.