Les frameworks CSS sont connus pour amener un club à l'idée de HTML sémantique. Ce problème est tel que les développeurs du monde entier ont entièrement abandonné l’idée des frameworks basés sur une grille uniquement sur le principe qu’elle conduit à des noms de classe non sémantiques.
Avec Sass, il devient assez facile de contourner ce problème et d’utiliser une grille prédéfinie sans recourir à des noms de classe débiles. En fait, la dernière version de Sass (3.2) intègre une nouvelle fonctionnalité qui rend cette tâche plus facile que jamais. Lisez la suite pour voir ce que c'est et comment ça marche.
Le problème
Personnellement, j'aime créer et utiliser des grilles en CSS. Je suis un type de type analytique et ringard, donc la mise en page et tout ce qui se passe si ses subtilités (ennuis) sont littéralement ce que je préfère dans CSS.
Certes, je comprends tout à fait ce que vous voulez si vous avez juré de quitter les grilles. Voici un exemple du problème, illustré par la grille Twitter Bootstrap:
Idéalement, les noms de classe seraient limités à quelque chose qui vous dit quelque chose sur le déroulement de la page. Vous pourriez avoir un? En vedette? section ou peut-être un? copyright? classe. Ces noms de classe vous expliquent à quoi ils servent sans être si spécifiques qu’ils décrivent la nature du style de l’élément. En utilisant cette méthode, l’esthétique du design pourrait complètement changer avec une refonte, mais les noms de classe pourraient rester les mêmes.
Avec Bootstrap et d’autres grilles, vous êtes obligé d’insérer tous ces noms de classes de grille qui communiquent et définissent votre mise en page de manière très spécifique, directement dans votre code HTML. Sémantiques ou non, je pense que les grilles sont très amusantes et faciles à assimiler, mais au final, nous utilisons les classes d’une manière différente de celle prévue.
«Sémantique ou pas, je pense que les grilles sont très amusantes et faciles à comprendre, mais au final, nous utilisons les classes d’une manière différente de ce qui était réellement prévu. ?Ce ne serait pas bien si nous pouvions avoir le meilleur des deux mondes? Les frameworks de grille sont extrêmement faciles à implémenter, mais le codage sémantique est sans doute la meilleure voie à suivre pour l’ensemble du secteur. C'est une bataille classique entre le besoin individuel et le bien commun.
Sass @extend
Lorsque nous faisons intervenir Sass, nous pouvons vraiment avoir notre gâteau et le manger aussi. La raison derrière ceci est le point entier de Sass. En coulisse, vous devez enfreindre les règles et faire toutes sortes de choses folles, car au final, le résultat sera un fichier CSS à la vanille.
La fonctionnalité Sass qui sauve vraiment la journée ici s'appelle @extend et constitue sans conteste la meilleure fonctionnalité Sass (c'est également l'une des principales raisons pour lesquelles de nombreux utilisateurs de MOINS cèdent et passent à Sass). Sass @extend est une fonctionnalité simple avec des implications majeures.
Pour apprécier le fonctionnement de @extend, passons directement à un exemple que j'ai codé pour un tutoriel précédent:
Ici, nous avons deux classes qui doivent essentiellement partager la plupart de leurs styles. Fondamentalement, la? Réponse? la classe est exactement comme le? commentaire? classe, uniquement avec du texte en italique et une couleur de fond différente. Pour ce faire, nous utilisons simplement une instruction @extend dans notre? Réponse? classe, ce qui pointe à notre? commentaire? classe.
Cela indique à Sass que lorsque le CSS est sorti, tous les styles de? Comment? devrait également être appliqué à? réponse. La meilleure partie ici est que Sass est suffisamment intelligent pour produire ceci de manière à éliminer la redondance:
Je sais ce que vous pensez, pourquoi diable n'avons-nous pas simplement codé de cette façon en premier lieu? Nous pourrions absolument. Pour beaucoup cependant, la méthode Sass est un peu plus linéaire et plus facile à configurer à la volée.
Extension des classes de grille
Maintenant que nous savons ce que fait @extend, voyons comment nous pouvons l'appliquer à certains CSS en grille. Jetons un coup d'œil à un code de réseau inspiré du livre Don't Overthink It Grids de Chris Coyier.
Ce code est magnifiquement concis et très facile à implémenter, mais il nécessite que nous appliquions des noms de classe non sémantiques dans notre CSS (.col-1-2, etc.). Si nous repensons ces idées avec @extend, nous pourrions produire quelque chose comme:
Trouble au paradis
Comme vous pouvez le voir dans l'exemple ci-dessus, @extend n'est pas tout à fait le héros que nous voulons qu'il soit dans cette situation. Notre version Sass peut générer des noms de classe sémantiques pour notre code HTML, mais notre CSS final sera rempli de satiété.
Le code généré par Sass, bien que plus concis, contient toujours nos différents noms de classe inutilisés, tels que? Column? et? .col-1-3 ?. Nous voulions simplement les configurer en tant que modèles pour @extend et nous n'en avons pas besoin ou ne les voulons pas dans notre CSS final.
Placeholder Selectors dans Sass 3.2
C'est là qu'intervient Sass 3.2. Il existe une nouvelle fonctionnalité appelée "sélecteurs de substitution"? cela résoudra bien notre petit problème. Les bonnes personnes derrière Sass ont réalisé que les codeurs établissaient fréquemment une sorte de? Classe de base? cela n'existait que par souci de @extend et créait des sélecteurs d'espace réservé comme moyen d'encourager ce comportement sans les effets secondaires malheureux d'une classe inutilisée dans le CSS final.
Dans l'exemple ci-dessous, nous pouvons voir comment cela fonctionne. Cette fois, j'ai inséré l'entrée Sass et la sortie CSS l'une à côté de l'autre pour que vous puissiez voir facilement la transformation. Lisez les commentaires pour voir lequel est lequel.
Comme vous pouvez le constater, en utilisant un symbole de pourcentage à la place d’une période, nous avons pu définir? Col-2-3? en tant que sélecteur d'espace réservé qui peut être étendu mais ne sera pas reporté dans notre sortie finale.
Utilisation de sélecteurs de substitution dans notre grille
Implémentons-les à plus grande échelle avec tout le code avec lequel nous travaillions auparavant. Voici à quoi cela pourrait ressembler:
Comme vous pouvez le voir maintenant plus de nos classes ne sont en fait que des sélecteurs d’espace réservé qui ne seront pas affichés dans notre CSS final. Cela nous permet de mettre en place des noms de classe très simples et faciles à implémenter dans notre Sass, tout en conservant une sortie sémantique! Enfin, le meilleur des deux mondes!
Mauvaise forme sass
Pas si vite, pourquoi n'ai-je pas montré la sortie du code ci-dessus? Parce qu'en théorie, ça devrait être génial. Si tout se passait bien, le résultat serait le suivant:
Malheureusement, Sass est un peu bizarre lorsqu'il s'agit d'utiliser plusieurs extensions. Voici la sortie réelle:
Si vous êtes astucieux, vous avez déjà remarqué les sélecteurs redondants des lignes quatre et onze. Parce que les deux extensions étendent en réalité deux sélecteurs d'espaces réservés différents, Sass les traite comme des éléments distincts dans la sortie, même s'ils peuvent facilement être combinés.
Comme vous pouvez l’imaginer, si l’ensemble de votre site reposait sur plusieurs sélecteurs d’extensions et d’espaces réservés, les redondances seraient alors nombreuses dans le résultat final.
En raison de la façon dont fonctionne la cascade et l'héritage, je peux voir que ce serait un problème vraiment délicat à coder, alors je vais couper les gars de Sass. Néanmoins, j'espère que c'est quelque chose qui sera abordé à l'avenir.
Qu'est-ce que tu penses?
Sass @extend promet d’améliorer considérablement votre efficacité avec CSS. C'est également un outil très pratique si vous essayez de configurer un système de grille sémantique, en particulier lorsqu'il est combiné à la nouvelle fonctionnalité de sélecteur de paramètres de substitution de Sass 3.2.
Malheureusement, comme nous l'avons vu ci-dessus, cette technique présente également des inconvénients. Pensez-vous que les avantages valent les inconvénients? Pouvez-vous penser à un meilleur moyen de retirer ceci? Je veux le voir, alors laissez-moi un commentaire.