<p>
  <button class="button">
    Button
  </button>
</p>  

<aside role="complementary" class="section">
  <p>
    <button class="button">
      Button
    </button>
  </p>  
</aside>
/* Component Section */

.section {
  background: gold;
  padding: 2rem;
}

/* Component Button */

.button {
  padding: 1rem;
  color: LimeGreen;  
  border: 1px solid currentColor;
  background: transparent;
}

/*
Should not be BEM modifier?
*/

.section .button {
  color: DarkGreen;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.