wake-up-neo.com

WENIGER: Verwenden Sie besser Vererbung oder mehrere Klassen

Ich habe eine LESS-Datei mit einer inputbase(){}-Klasse. Ich benutze es häufig, aber nicht bei jedem Eingabetyp. Beim Kompilieren habe ich viele Stile in der ausgegebenen CSS-Datei. 

Ich habe nachgesehen, wie Bootstrap LESS für ihr Grid verwendet, und sie verwenden denselben Ansatz. Dabei würde column 1 etc von einer column-Basisklasse erben. Dies scheint wiederum eine Menge CSS zu generieren.

Sollte ich .inputbase .specificClass in jedem <input /> verwenden, anstatt LESS-Vererbung zu verwenden?

30
MaxWillmo

Verschiedene Optionen, keine Antwort eingestellt

Es hängt sehr stark von Ihrem Code, Ihren Zielen usw. ab, wie Sie die verschiedenen Elemente mit Stilen versehen. Hier sind einige Möglichkeiten, jede mit Stärken und Schwächen.

1. Mixin (was Sie derzeit tun)

WENIGER

.inputbase() {
  /* your base code */
}

.someInput {
  .inputbase;
  /*some input special code */
}

.someOtherInput {
  .inputbase;
  /*some other input special code */
}

.andAnotherInput {
  .inputbase;
  /*and another input special code */
}

CSS-Ausgabe

.someInput {
  /* your base code */

  /*some input special code */  
}
.someOtherInput {
  /* your base code */

  /*some other input special code */    
}
.andAnotherInput {
  /* your base code */

  /*and another input special code */    
}

Wenn in .inputbase() mehr als eine oder zwei Zeilen Code vorhanden sind und wenn er in mehr als nur ein paar Fällen gemischt wird, wird dies eine Menge zusätzlichen Code generieren. Dies ist das Problem, vor dem Sie stehen.

2. Klasse erweitern

Es scheint, dass LESS gerade bereit ist, Mixins zu erweitern , aber derzeit (LESS 1.5) erfordert dies nur eine Klassendefinition.

WENIGER

.inputbase {
  /* your base code */
}

.someInput {
  &:extend(.inputbase);
  /*some input special code */
}

.someOtherInput {
  &:extend(.inputbase);
  /*some other input special code */
}

.andAnotherInput {
  &:extend(.inputbase);
  /*and another input special code */
}

CSS-Ausgabe

.inputbase, /* this is gone once mixin extending allows .inputbase() extension */
.someInput,
.someOtherInput,
.andAnotherInput {
  /* your base code */   
}
.someInput {
  /*some input special code */    
}
.someOtherInput {
  /*some other input special code */   
}
.andAnotherInput {
  /*and another input special code */   
}

Der Vorteil ist, dass der Basiscode nicht wiederholt wird, sondern dass die Selektoren wiederholt werden, da sie zuerst mit dem Basiscode gruppiert werden und dann erneut für den einzelnen Code ausgegeben werden. Wenn Sie möchten, dass der Code in einer Auswahldefinition gruppiert wird, ist dies nicht der richtige Weg. Ansonsten bietet dies eine gute Möglichkeit, die CSS-Ausgabe zu reduzieren.

3. Zwei Klassen (zusätzliches HTML-Markup, das Sie vorschlagen)

Diese eine Lösung, die Sie vorgeschlagen haben, besteht aus zwei Klassen (weil Sie angegeben haben, dass .inputbase nicht immer auf ein Eingabeelement angewendet werden soll).

LESS- und CSS-Ausgabe *

.inputbase {
  /* your base code */
}

.someInput {
  /*some input special code */
}

.someOtherInput {
  /*some other input special code */
}

.andAnotherInput {
  /*and another input special code */
}

Dies hat zwar die geringste Menge an CSS, hat aber den Nachteil, dass zusätzlich die HTML-Markierung der beiden Klassen <input class="inputbase someInput" /> usw. erforderlich ist. 

4. Eine Klasse mit Außerkraftsetzung der Basis

Das kann besser sein als das oben.

LESS- und CSS-Ausgabe

input {
  /* your base code */
}

.someInput {
  /*some input special code */
  /*override input base code if needed */
}

.someOtherInput {
  /*some other input special code */
  /*no override if not needed */
}

.andAnotherInput {
  /*and another input special code */
  /*no override if not needed */
}

Wenn die meisten Eingaben über den Code für den Basiseintrag verfügen, können Sie einfach Ihren Basiseingabecode in der Elementvariable input definieren. Überschreiben Sie einfach die Eigenschaften, die Sie in Ihrem speziellen CSS-Code nicht möchten. Dies ermöglicht weniger HTML, wenn nur die einzelne Klasse <input class="someInput" /> angewendet wird. Dadurch werden sowohl CSS als auch HTML weniger übersichtlich gehalten, es hat jedoch den Nachteil, dass Sie sich an den Basiscode erinnern und ihn bei Bedarf überschreiben können.

Zusammenfassung

Was am besten sein wird, hängt zu sehr von den jeweiligen Umständen ab. Aber vielleicht helfen Ihnen die beiden zusätzlichen Optionen, Ihren Fall zu durchdenken. Ich persönlich würde mich in den meisten Fällen für # 2 oder # 4 entscheiden, aber auch hier gibt es Anwendungen für # 1 und # 3.

76
ScottS

Zunächst scheint es von der Version von Less, die Sie verwenden, abzuhängen. Werfen Sie einen Blick auf https://github.com/twbs/bootstrap/issues/8947 . Zuerst wurde es als Fehler identifiziert. In diesem Fall können Sie auf den Bugfix warten oder Ihren Code ändern.

Später wird diskutiert, ob es sich um einen Fehler handelt oder nicht. Eine andere Verwendung von Klammern führt zu unterschiedlichen Ergebnissen. Sie werden auch ein Thema über Mixins mit demselben Namen wie Klassen sein, siehe auch: https://github.com/less/less.js/issues/1437

0
Bass Jobsen