separationOfConcernsForCss.js

/* Modal */
<div className="modal">
  <CloseButton />
</div>

/* CloseButton */
<button className="close-button">Close</button>

Pretty bad for re-usability because we shouldn't assume its position to always be the same whatever its parent context.

.close-button {
  color: red;
  position: absolute;
  top: 10px;
}

Better but

• Can't edit Modal s styles to use another button without having to refactor modal.css
• nested declaration makes debugging harder with unpredictable specificity

/* close-button.css */
.close-button {
   red;
}

/* modal.css */
.modal .close-button {
   position: absolute;
   top: 10px;
}

Better:

• close button is an element of modal

Still not good:

• Extra DOM nesting

/* modal.css */
.modal__close-button {
   position: absolute;
   top: 10px;
}

/* Modal.js */
<div className="modal">
   <div className="modal__close-button">
      <CloseButton />
   </div>
</div>

/* Modal.js */
<div className="modal">  
  <CloseButton className="modal__close-button"/>  
</div>  

/* CloseButton.jsx */  
<button className=`close-button ${this.props.className || ''}`>Close</button>