Comment optimiser les CSS avec les guides de style de code

Lorsque les concepteurs parlent de guides de style, ils signifient généralement un manuel convenu sur le apparence cohérente d'un site Web ou d'une application, avec un bien conçu jeu de couleurs, typographie et interface utilisateur qui est utilisé dans tout le projet.

Il existe un autre type de guide de style que nous pouvons également utiliser dans le développement Web. Il est tout aussi important, mais beaucoup plus rarement discuté: guides de style pour le code lui-même. Les guides de style de code sont plutôt destinés aux développeurs qu'aux concepteurs, et leur objectif principal est d'optimiser le code CSS, ou un autre code..

La mise en place de guides de style de code appropriés nous fournit une base de code mieux organisée et cohérente, lisibilité améliorée du code et code plus facile à gérer. Ce n’est pas une coïncidence si les grandes entreprises technologiques, telles que Google, AirBnB ou Dropbox, en font bon usage..

Dans cet article, nous verrons comment optimiser intelligemment notre CSS à l'aide de guides de style de code CSS..

Guides de style de code et bibliothèques de modèles

Dans notre secteur, il existe un certain degré d'incertitude quant à ce que nous pouvons appeler un guide de style.. Une liste à part par exemple l’utilise comme synonyme du terme bibliothèque de motifs dans cet article, mais nous pouvons tomber sur ce genre de définition dans d'autres posts aussi.

D'autre part, il existe également des publications, telles que CSS Tricks ou le blog de Brad Frost, qui distinguent les guides de style de code des bibliothèques de modèles. Cette dernière approche nous rapproche probablement d’un site Web bien optimisé, cela nous permet de gérer le code et de concevoir séparément, nous allons donc l'utiliser dans ce post.

Les guides de style de code et les bibliothèques de modèles incluent une stratégie de style, mais un type différent. Les bibliothèques de modèles, telles que Bootstrap, Zurb Foundation, le langage Global Experience Language de BBC ou la bibliothèque de modèles de MailChimp, nous fournissent une interface utilisateur avec des classes CSS prédéfinies, une typographie, un jeu de couleurs, parfois un système de grille et d'autres modèles de conception..

Les guides de style de code CSS, tels que ceux d’Evernote ou de ThinkUp (ou ceux mentionnés dans l’intro) contiennent règles sur la façon d'écrire CSS y compris des choses comme conventions de dénomination, structure des fichiers, ordre des propriétés, formatage du code, et d'autres.

Notez que les générateurs de guides de style de vie, tels que KSS, Styledown ou Pattern Lab, générer des bibliothèques de modèles et ne pas guides de style de codage. Les bibliothèques de modèles sont également très utiles et améliorent le processus de développement Web, mais elles ne nous permettent pas d'optimiser le code lui-même..

Construisez votre guide de style de code CSS

L'objectif final d'un guide de style de code CSS est de nous assurer que nous pouvons travailler avec une base de code cohérente et facilement débogable écrite par des développeurs qui respectent les mêmes règles de style de code. La création d'un guide de style de code CSS peut prendre un peu de temps, mais cela en vaut la peine, car nous ne devons le faire qu'une seule fois. Ensuite, nous pouvons utiliser le même guide de style pour différents projets..

Il est important de noter que les meilleurs guides de style non seulement contient les règles de style elles-mêmes, mais aussi des exemples de bons et de mauvais usages, car les développeurs peuvent ainsi comprendre plus intuitivement les règles.

Par exemple, AirBnB montre de bons et de mauvais exemples aux développeurs de la manière suivante, facile à digérer:

Structure de fichier

Premièrement, nous devons trouver une logique selon laquelle nous allons organiser nos fichiers CSS. Pour les projets plus petits, un fichier CSS peut suffire, mais pour les plus gros, toujours mieux de casser le code, et concaténer les fichiers séparés plus tard en production.

Certains guides de style, tels que ThinkUp, nous avertissent également de ne pas utiliser de styles en ligne ou incorporés sauf si c'est inévitable; c'est aussi une règle utile qui vaut la peine d'être appliquée.

Nidification

L'imbrication est une fonctionnalité intéressante en CSS, mais elle peut parfois devenir incontrôlable. Personne ne se sent particulièrement heureux, en particulier au milieu d'un processus de débogage frustrant, se heurtant à des sélecteurs très longs comme celui-ci:

 .class_1 .class_2 # id_1 # id_2 li a span color: #bad; 

Donc c'est toujours bon de établir une limite de nidification raisonnable, Par exemple, GitHub a choisi trois niveaux dans son guide de style. En limitant l'imbrication, nous pouvons également nous forcer à écrire un code mieux structuré.

Règles de nommage

L'utilisation de règles de nommage cohérentes pour les sélecteurs CSS est cruciale si nous voulons comprendre notre code des mois, voire des années plus tard. Il existe de nombreuses solutions, et il n'y a qu'une seule règle stricte à suivre c'est-à-dire qu'un nom de sélecteur ne peut pas commencer par un numéro.

Les quatre styles communs utilisés pour nommer les sélecteurs sont .minuscule, .under_scores, .dash-es, et .LowerCamelCase. C'est bien de choisir n'importe lequel d'entre eux, mais nous devons suivre la même logique tout au long du projet..

En utilisant seulement des noms de sélecteur sémantique est également essentiel si nous voulons avoir un code significatif. Par exemple, au lieu de .bouton rouge (qui ne montre pas ce que le bouton fait) il vaut mieux utiliser le .bouton d'alerte name (qui dit ce qu’il fait), de cette façon, nous permettons aux développeurs (et à notre avenir) de comprendre ce que dit le bouton.

en outre si nous voulons changer sa couleur de rouge à autre chose dans le futur, nous pouvons facilement le faire sans tracas. Il existe également des conventions de nommage CSS prédéfinies, telles que la convention BEM (Block, Element, Modifier), qui aboutir à une structure de nommage cohérente avec des noms uniques et significatifs.

Règles de formatage

Le formatage du code comprend des éléments tels que l’utilisation d’espaces, de tabulations, d’indentation, d’espacement, de sauts de ligne, etc. Il n’existe pas de méthode de formatage universellement bonne ou mauvaise, la seule règle à suivre est la suivante: choisir des règles cohérentes qui donnent un code lisible, et suivez-les à travers.

Dropbox, par exemple, impose aux développeurs de placer des espaces après les deux points dans les déclarations de propriétés, tandis qu'Evernote utilise deux espaces pour l'indentation. Nous pouvons définir autant de règles de formatage que nous sommes à l'aise, mais jamais plus qu'il n'est possible de saisir.

Ordre de déclaration

Les choses commandées sont toujours plus faciles à voir à travers, et commander des déclarations CSS (propriétés avec leurs valeurs) selon une règle logique, il en résulte un code mieux organisé.

Jetez un coup d'œil aux règles de classement des propriétés de WordPress, par exemple, qui définissent la baseline suivante, logique mais logique, permettant de classer les propriétés en fonction de leur signification:

1. Afficher
2. Positionnement
3. Modèle de boîte
4. Couleurs et typographie
5. Autre

Unités et valeurs

Décider de la manière dont nous voulons utiliser les unités et les valeurs est non seulement important pour obtenir un look de code cohérent, mais si nous ne le faisons pas, nous pourrions nous retrouver avec quelque chose de bizarre.

Imaginez un site qui utilise alternativement px, em, et rem mesures de longueur. Cela ne va pas seulement mal paraître dans l'éditeur de code, mais il est fort probable que certains éléments seront étonnamment petits ou grands sur ce site..

Nous devons également prendre des décisions concernant les valeurs de couleur (hexadécimales, rgb ou hsl) et déterminer si nous voulons utiliser des propriétés abrégées et en fonction de quelles règles. Il y a une instruction qui est incluse dans chaque guide de style de code CSS dans lequel je suis tombé, c'est-à-dire. ne spécifiez pas les unités pour les valeurs 0 (vraiment, ne le fais pas).

.class // bonne marge: 0; // mauvaise marge: 0px; // mauvaise marge: 0em; // mauvaise marge: 0rem; 

Commentant

Le code de commentaire est essentiel dans toutes les langues, mais en CSS cela facilite non seulement le débogage et la documentation, mais divise également les règles CSS en groupes logiques. Nous pouvons utiliser soit le / *… * / ou la //… style de notation pour les commentaires en CSS, l’important est de rester cohérent avec des commentaires tout au long de notre projet.

Idiomatic CSS, par exemple, établit un système de commentaires significatif qui utilise même des illustrations ASCII de base et donne un code magnifiquement organisé: