web-dev-qa-db-fra.com

MOINS: Mieux vaut utiliser l'héritage ou plusieurs classes

J'ai un fichier LESS avec une classe inputbase(){}. Je l'utilise beaucoup mais pas tous les types d'entrées. Quand je compile, j'ai beaucoup de styles répétés dans le fichier CSS généré. 

J'ai jeté un œil sur la façon dont bootstrap utilise LESS pour leur grille et utilise la même approche où column 1 etc hériterait d'une classe de base column. Encore une fois, cela semble générer beaucoup de CSS.

Devrais-je utiliser .inputbase .specificClass dans chaque <input /> au lieu d'utiliser l'héritage LESS?

cssless
30
MaxWillmo

Diverses options, pas de réponse définie

Cela dépendra beaucoup de votre code, de vos objectifs, etc., de la manière dont vous obtenez le style des différents éléments. Voici quelques possibilités, chacune avec ses forces et ses faiblesses.

1. Mixin (ce que vous faites actuellement)

MOINS

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

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

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

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

Sortie CSS

.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 */    
}

S'il y a plus d'une ligne ou deux de code dans .inputbase(), et s'il est mélangé dans plus que quelques cas, cela générera beaucoup de code supplémentaire. C'est le problème auquel vous vous trouvez confronté.

2. Etendre une classe

Il semble que LESS soit sur le point de permettre l’extension de mixins , mais à l’heure actuelle (LESS 1.5), une définition de classe n’est nécessaire que si,

MOINS

.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 */
}

Sortie CSS

.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 */   
}

L'avantage est que tout le code de base n'est pas répété, mais ce qui est répété, ce sont les sélecteurs, car ils sont d'abord regroupés avec le code de base, puis sont à nouveau générés pour le code individuel. Si on aime garder son code groupé dans une définition de sélecteur, ce ne serait pas la solution. Sinon, cela offre un moyen agréable de réduire la sortie CSS.

3. Deux classes (balise HTML supplémentaire que vous proposez)

Cette solution que vous avez proposée, ayant deux classes (c’est parce que vous avez dit que vous ne voulez pas toujours que .inputbase soit appliqué à un élément d’entrée).

LESS and CSS Output *

.inputbase {
  /* your base code */
}

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

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

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

Cela a le moins de CSS, mais il a le désavantage de requérir le balisage HTML supplémentaire des deux classes, <input class="inputbase someInput" />, etc. 

4. Une classe avec dérogation de base

Cela peut être mieux que ce qui précède.

LESS and CSS Output

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 */
}

Si la plupart des entrées ont le code d'entrée de base, vous pouvez simplement définir votre code d'entrée de base dans la définition de l'élément input, puis simplement remplacer les propriétés que vous ne voulez pas dans votre code CSS spécial. Cela permet moins de HTML avec seulement la seule classe appliquée <input class="someInput" />. Le CSS et le HTML seront ainsi moins encombrés, mais ils auront le désavantage de se rappeler du code de base et de pouvoir le remplacer si nécessaire.

Résumé

Ce qui sera meilleur dépend trop des circonstances particulières. Mais peut-être que les deux options supplémentaires vous aideront à réfléchir à votre cas. Personnellement, je choisirais dans la plupart des cas le n ° 2 ou le n ° 4, mais encore une fois, il existe également des applications pour les n ° 1 et n ° 3.

76
ScottS

En premier lieu, cela semble dépendre de la version de Less que vous utilisez. Jetez un oeil à https://github.com/twbs/bootstrap/issues/8947 . D'abord, il a été identifié comme un bug. Dans ce cas, vous pouvez choisir d'attendre le correctif du bogue ou de modifier votre code.

Plus tard, il sera discuté s'il s'agit d'un bug ou non. Une utilisation différente de la parenthèse donnera des résultats différents. Il y aura aussi un problème avec les mixins ayant le même nom que les classes, voir aussi: https://github.com/less/less.js/issues/1437

0
Bass Jobsen