Estoy haciendo todo lo posible para eliminar tantos estilos de marcado de "clases" de Bootstrap como pueda de mi HTML, y usar etiquetas semánticas cuando sea útil, pero hasta ahora solo funciona en casos simples.

Cuando las clases originales presentan muchas reglas anidadas, se convierte en una pesadilla. Por ejemplo, en el siguiente ejemplo de los documentos (con reglas de tamaño añadidas):

<div class="row">
  <div class="col-lg-6">
    <div class="input-group input-group-lg">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Reglas como esta funcionan de maravilla:

div:first-child {
  .make-row();
  & > div {
    make-lg-column(6);
  }
}

Por lo tanto, estas clases de columna se pueden eliminar de HTML. Sin embargo, intentar hacer lo mismo con los botones y los controles de formulario no funciona tan bien, porque hay muchas reglas anidadas para diseñar esos elementos. Cada vez que elimino una clase de HTML, por ejemplo con

input {
   .,form-control;
}

Esa entrada pierde cada estilo basado en varias reglas de Bootstrap como

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn

Se puede hacer lo siguiente, pero en mi humilde opinión, no es productivo realizar un seguimiento de cada pequeña regla hasta cada pequeño detalle que BS logra:

input {
    .form-control;
    input-group .form-control;
    input-group .form-control:last-child;
}

MENOS':extend(* all) a veces se puede usar, pero solo tengo experiencia básica en usarlo y hasta ahora no he podido imaginar cómo hacer que funcione la siguiente "lógica", o incluso si es factible:

div:first-child {
  .make-row();
  & > div {
    make-lg-column(6);

    div {
      &:extend(.input-group all);
      &:extend(.input-group-lg all);
      /* ... and so on */
  }
}

Pero todos esosextend() todavía no puede replicar todas las reglas anidadas.

¿Me estoy perdiendo alguna lógica fundamental usando MENOS 'extend() ¿aquí? ¿Es esta una meta digna? Hasta ahora he limitado las clases de Bootstrap que estoy eliminando, pero no estoy seguro de si este es el camino correcto. Este tipo de problemas surgen mucho cuando se trata de elementos de página comunes en Bootstrap (encabezados de navegación, menús desplegables, formularios, ...).