Ich gebe mein Bestes, um so viele "Klassen" -Markupstile von Bootstrap wie möglich aus meinem HTML-Code zu entfernen und semantische Tags zu verwenden, sofern dies sinnvoll ist. Bisher funktioniert dies jedoch nur in einfachen Fällen.

Wenn die ursprünglichen Klassen viele verschachtelte Regeln enthalten, wird dies zu einem Albtraum. Zum Beispiel im folgenden Beispiel aus den Dokumenten (mit hinzugefügten Größenregeln):

<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 -->

Regeln wie diese funktionieren wie ein Zauber:

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

So können diese Spaltenklassen aus HTML entfernt werden. Das Gleiche mit Schaltflächen und Formularsteuerelementen zu tun, funktioniert jedoch nicht so gut, da es viele verschachtelte Regeln gibt, um diese Elemente zu formatieren. Jedes Mal, wenn ich eine Klasse aus HTML entferne, zum Beispiel mit

input {
   .,form-control;
}

Diese Eingabe verliert jedes Styling basierend auf mehreren Bootstrap-Regeln wie

.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

Das Folgende kann getan werden, aber IMHO ist es unproduktiv, jede kleine Regel bis ins kleinste Detail zu verfolgen, die BS hervorbringt:

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

GERINGER, WENIGER':extend(* all) Manchmal kann es verwendet werden, aber ich habe nur grundlegende Erfahrung damit und bisher konnte ich nicht herausfinden, wie die folgende "Logik" funktioniert oder ob es überhaupt machbar ist:

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

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

Aber alle dieseextend() kann immer noch nicht jede verschachtelte Regel replizieren.

Fehlt mir eine grundlegende Logik mit WENIGER 'extend() Hier? Ist das überhaupt ein würdiges Ziel? Bisher habe ich die Anzahl der zu entfernenden Bootstrap-Klassen begrenzt, bin mir jedoch nicht sicher, ob dies der richtige Weg ist. Diese Art von Problemen tritt häufig auf, wenn Sie mit allgemeinen Seitenelementen in Bootstrap arbeiten (Navigationsheader, Dropdowns, Formulare usw.).