<h2>How are you managing scoped styles?</h2>

<input name="weight" id="fornum1" type="radio">
<label for="fornum1">BEM</label><br />

<input name="weight" id="fornum2" type="radio">
<label for="fornum2">Utitlity CSS</label><br />

<input name="weight" id="fornum3" type="radio">
<label for="fornum3">CSS-in-JS</label>

<div class="row">
  <div id="num1">HTML</div>
  <div id="num2">CSS</div>
  <div id="num3">JS</div>
</div>

body {
  padding: 2rem;
}

.row {
  display: flex;
  flex-direction: row;
  height: 10rem;
  margin-top: 1rem;

  > div {
    background: #ccc;
    padding: 1rem;
    flex: 1;
    text-align: center;
    align-stretch: center;
    transition: all 0.2s ease-in-out;

    &:not(:last-of-type) {
      border-right: 1px solid #000;
    }
  }

  #num1 {
    background: tomato;
  }

  #num2 {
    background: lightblue;
  }

  #num3 {
    background: gold;
  }
}

h2 {
  display: block;
  margin-top: 0;
  font-size: 1.2rem;
}

label {
  margin-bottom: 0.25rem;
  margin-right: 1rem;
  display: inline-block;
}

#fornum1:checked ~ .row #num1,
#fornum1:checked ~ .row #num2 {
  flex: 5;
}
#fornum2:checked ~ .row #num1 {
  flex: 10;
}
#fornum3:checked ~ .row #num3 {
  flex: 10;
}