Ne te répète pas (sec). C'est un concept simple avec la possibilité de changer complètement la façon dont vous écrivez du code. Cependant, si je repense à mes débuts avec CSS, je ne pense pas que le concept comptait beaucoup pour moi. Bien sûr, d'accord, ne me répète pas, merci pour le conseil. Comment cela se traduit-il en conseils applicables?
Aujourd'hui, nous allons examiner les concepts de base pour repenser le CSS que vous avez écrit en réduisant le gras et en réduisant la redondance. Le résultat sera un CSS plus léger, plus facile à créer et à maintenir.
Où je pense que tu es
Cet article n’est pas destiné au gars qui passe ses journées à parcourir les blogs de développement Web pour avoir une chance de laisser des commentaires et de montrer à quel point il sait plus que tout le monde. Si vous êtes déjà un génie CSS, allez écrire un livre.
Au lieu de cela, j'écris ceci pour la masse de développeurs qui commencent enfin à comprendre le système CSS. Vous concevez des sites Web depuis un an, peut-être deux ans, et vous êtes prêt à aller au-delà de la rédaction d'un code efficace et de l'apprentissage de l'écriture de code efficace.
"Vous êtes prêt à aller au-delà de la rédaction d'un code efficace et à l'écriture d'un code efficace."Tout comme moi à ce stade de ma carrière, vous avez entendu le jargon plusieurs fois mais vous n’avez pas encore expérimenté cela. Cliquez! où écrire un CSS efficace prend tout son sens. Espérons que nous trouverons ce clic aujourd'hui.
Sass @extend
Ne panique pas. Nous allons parler d'un pré-processeur. Ne vous inquiétez pas, je ne vais pas exiger que vous en utilisiez un ou que vous transformiez tout ce document en tutoriel Sass plutôt qu'en tutoriel CSS. Nous allons apprendre à écrire de vieux CSS simples de manière plus efficace.
? Ne panique pas. Nous allons parler d'un pré-processeur.Cela étant dit, Sass, malgré toutes ses complexités, utilise l'héritage de sélecteur d'une manière beaucoup plus facile à comprendre que CSS. C'est un processus très simple et linéaire qui rend le concept de ne pas vous répéter incroyablement facile à comprendre. Nous allons jeter un coup d'oeil.
Trois boîtes
Pour voir comment cela fonctionne, imaginez que vous ayez trois classes très similaires mais toujours distinctes. Voici un exemple avec la classe? Box ,? ?grosse boite,? et? smallbox? (J'espère que vos noms de classe sont un peu plus spécifiques).
Comme vous pouvez le constater, les trois boîtes nécessitent les mêmes styles de base, mais leur taille étant différente, nous avons donc besoin de trois classes distinctes. Pourtant, toute cette redondance n'est pas bonne.
Alors, comment pouvons-nous SÉCHER cela? C’est là que la fonctionnalité Sass @extend entre en jeu. Découvrez-la:
Vous voyez ce qui s'est passé ici? Même si vous ne connaissez rien de Sass, ce code est assez facile à comprendre. Essentiellement, plutôt que d'écrire les mêmes propriétés encore et encore avec les mêmes valeurs, nous pouvons utiliser @extend pour dire «Hé, saisissez simplement le code de la classe box». Nous continuons ensuite et ne définissons que les propriétés qui nécessitent une modification.
Le code résultant est plus court et plus concis tout en ne sacrifiant pas la lisibilité. Malheureusement, il s’agit de Sass et la fonctionnalité @extend n’existe pas dans un vieux CSS clair.
Apprendre de la sortie sass
Alors, quel était l'intérêt de la grande leçon Sass si nous ne pouvons pas utiliser @extend en CSS? Ce qu'il faut retenir, c'est que le produit final de Sass, de LESS et de tout autre préprocesseur est le simple Jane CSS. Donc, si Sass utilise effectivement une magie dans la sortie réelle, nous devrions pouvoir la repérer.
Voyons comment cela s'est passé en transformant ces @extends en CSS:
Aha! Ce code est beaucoup plus concis que notre concept original et pourtant il reste du pur CSS. La fonctionnalité @extend est en fait assez intelligente pour générer du CSS maigre grâce à l'utilisation de sélecteurs groupés, séparés par des virgules.
À travers @extend, nous avons signalé à Sass les redondances de notre code et les a toutes regroupées en une seule règle. Après cela, nous avons défini les autres classes en utilisant uniquement le code qui devait être différencié.
Sauter Sass
La grande leçon à tirer ici est que vous n’avez pas besoin d’un préprocesseur pour effectuer tout ce travail à votre place. Vous pouvez ignorer complètement Sass et simplement écrire du code propre et concis (bien que je pense toujours que Sass est les genoux des abeilles). Cela n’est peut-être pas aussi intuitif, mais une fois que vous avez découvert la redondance, cela devient une tâche assez facile.
La leçon importante pour moi était que je ne réalisais pas nécessairement que je codais de manière négligente alors que je testais différentes idées dans mon code, et ce n'est pas grave! Le codage de ce type depuis le début est quelque chose qui vient avec l'expérience. En attendant, veillez simplement à vous rappeler un principe simple: vous n’avez pas terminé, tout simplement parce que tout fonctionne!
"Obtenez un principe simple dans votre tête: vous n'êtes pas fini simplement parce que tout fonctionne!"Vous pouvez passer des heures à jouer avec un design ou une mise en page géniale, et lorsque tout finit par se mettre en place, vous poussez un soupir de soulagement et passez à autre chose. Mais tu n'as pas fini! La prochaine étape consiste à examiner tout le code que vous avez écrit avec frustration et à trouver un moyen de le simplifier.
Un exemple réel
Pour voir à quoi ce processus ressemble, examinons un exemple concret que j'ai codé pour un tutoriel précédent. En gros, l’effet que je cherchais est une pile de cartes.
Pour le retirer, j'ai créé un élément avec un style de base, puis utilisé: before et: after pour dupliquer l'élément. Le résultat était une pile de trois cartes d'une même classe. Voici la partie de code qui en résulte:
Je rencontre ce problème tout le temps en utilisant: before et: after. Je construis chaque élément individuellement, je fais un pas en arrière, puis je réalise que je viens d'écrire le même code trois fois!
Tout ce que nous avons à faire pour nettoyer cela est quelque chose que tout écolier peut faire: repérer la répétition. Dans le code ci-dessus, chaque carte a les mêmes hauteur, largeur, ombre, dégradé et rayon de bordure. Tout ce code ne devrait être écrit qu'une fois. Nous pouvons regrouper cela comme suit:
Cela prend en charge les propriétés et les valeurs qui se répètent sur les trois cartes, mais il existe également une certaine redondance qui n'existe qu'entre les pseudo-éléments. Prenons soin de cela ensuite.
Maintenant que nous avons regroupé tout ce contenu, nous pouvons le supprimer des autres sections où il a été répété. Voici le bloc de code coupé complet:
Comme vous pouvez le constater, nous avons découpé près de vingt lignes de code dans un petit exemple! Réfléchissez à l’impact de ces principes sur l’ensemble d’un site Web.
Entretien facile
Trop souvent, des principes comme ceux que nous apprenons aujourd'hui sont présentés comme des règles à suivre simplement parce que c'est la devrait être le faire. Pour la plupart des gens, cet argument n'est pas vraiment convaincant. Qui se soucie des pratiques communes et du plus grand bien? Qu'est-ce qu'il y a pour moi?
"Vous économisez beaucoup de temps et de problèmes en utilisant ces techniques."La bonne nouvelle est qu’il est beaucoup plus facile de maintenir et de filtrer les CSS plus minces à long terme. En utilisant ces techniques, vous économisez beaucoup de temps et de problèmes. Par exemple, imaginons que vous ayez écrit le code d'origine de l'exemple ci-dessus, puis que vous souhaitiez modifier les couleurs du dégradé. Il vous faudrait parcourir et mettre à jour dix-huit lignes de code pour ce simple changement!
Maintenant, imaginez que vous deviez faire la même chose sur notre exemple concis. Ici, il vous suffit de mettre à jour six lignes de code. Certes, la syntaxe du dégradé et le préfixe du navigateur sont encore très pénibles, mais six, c'est mieux que dix-huit.
Repenser la structure de votre code
Avant de conclure, il est intéressant de noter qu’il existe une multitude de façons d’améliorer votre CSS. Il s'agit d'une vaste catégorie de discussion qui ne se limite certainement pas aux techniques ci-dessus.
Par exemple, de nombreux codeurs ont développé des systèmes dans lesquels vous séparez intentionnellement différents types de code si votre CSS est au nom de l'efficacité. Une façon de faire cela dans notre exemple de boîte d'origine pourrait être de séparer le style visuel arbitraire du CSS structurel. En suivant cette route, notre code ressemblerait plus à ceci:
Ici, nous avons développé une base? Box? classe qui serait appliquée à plusieurs éléments HTML, chacun d'entre eux étant ensuite associé à une classe structurelle qui définit la forme, le positionnement, l'ordre de pile, etc. de la boîte. Quasiment tout ce qui n’est pas extravagant.
De toute évidence, le compromis ici sera un petit supplément. Vous constaterez que les codeurs diffèrent farouchement du point de savoir s'il est acceptable d'ajouter même un seul caractère de balisage supplémentaire au nom d'un code CSS plus efficace.
Écoles populaires de pensée
Actuellement, il existe deux idées ou méthodes très populaires dans cette perspective de repenser la structure de nos feuilles de style: OOCSS (CSS orientée objet) et SMACSS (Architecture modulaire et évolutive pour CSS).
Bien qu'effectivement bien distinctes, ces méthodologies sont assez similaires sur le plan conceptuel et visent toutes deux à vous aider à créer un code CSS plus efficace, maintenable et même réutilisable. Je vous recommande fortement de regarder les deux de plus près pour voir ce que vous pensez.
Comment écrivez-vous CSS maigre?
Dans les exemples ci-dessus, nous avons appris comment Sass utilise une fonctionnalité magique appelée @extend pour vous aider à écrire du code simplifié avec très peu d'effort et comment nous pouvons utiliser les principes à l'œuvre dans cette fonctionnalité pour effectuer ces exploits en utilisant du vieux CSS pur. Nous avons également brièvement discuté de la réévaluation complète de la structure de votre code afin de créer quelque chose de plus modulaire et facile à gérer.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez de ces méthodes. Utilisez-vous Sass? À quelle fréquence regroupez-vous les sélecteurs pour réduire la redondance? Que pensez-vous de OOCSS et SMACSS? Ce qui est mieux?