comment-code.md

<!-- Hero CTA -->
<button class="c-button c-button--outline t-red c-hero__button js-hero-button qa-hero-button">Hero CTA</button>

// Button base
.c-button {} 

// Button modifier with structural properties.
// In example: `border: 1px solid transparent; padding: 5px 10px;`
.c-button--outline {}

// Theme, which is scoped to button modifier. 
// In example: `border-color: map-get($colors, “red”); color: map-get($colors, “red”);`
.c-button--outline.t-red {}

// Parent component hook. Very specific case/scenario.
// In example: `align-self: flex-end;`
.c-hero__button {}

// JavaScript selector hook
let heroButton = document.querySelector('.js-hero-button')

// QA selector hook
let heroButton = document.querySelector('.qa-hero-button')