“Outside In” - Classement des propriétés CSS par importance

Cet article traite de la structure du code CSS, en particulier d’une méthode que j’utilise depuis quelques années pour apporter de la logique et de la cohérence à l’ordre dans lequel j’écris mon code CSS. C'est une méthode que j'appelle “Outside In”.

Ordre de déclaration?

J'ai déjà entendu parler de différentes méthodes d'écriture de CSS. Certaines personnes n'utilisent aucun ordre particulier, d'autres alphabétisent les déclarations en fonction du nom de la propriété. J'ai même entendu parler d'une poignée de cas où certains les ordonnent visuellement en fonction de la longueur de chaque valeur de la propriété paire! 

Un sondage précédent sur CSS-Tricks a posé cette question avec un résultat que j'ai trouvé assez surprenant: 39% des plus de 11 000 personnes n'ont pas de plan spécifique en matière de commande de CSS..

Comment commandez-vous vos propriétés CSS? Total des votants: 11.093

Le regroupement par type pourrait suggérer la taille être à côté de largeur. Alphabétiquement verrait les déclarations listées de Contexte à travers z-index, par exemple.

J'utilise la méthode de regroupement des propriétés par type - bien que j'utilise même un ordre spécifique pour la commande par groupe!

À l’exception de la «méthode aléatoire», il existe un certain degré d’ordre dans toutes les autres approches. Mais cet ordre ne correspond pas nécessairement à quelque chose de particulièrement utile en ce qui concerne le style des sites Web.. 

Si vous collectiez des données sur la taille des élèves dans une classe, leur classement par mesure de longueur a du sens. Si vous catégorisez une collection de DVD, l'ordre alphabétique peut avoir un sens. Mais les propriétés CSS ordonnées de cette manière auraient-elles quelque chose à voir avec leur ordre de importance quand ces styles sont peints par le navigateur? 

Si vous commandez par ordre alphabétique, est un élément Couleur plus important que son largeur? Est un élément style de bordure plus important que de savoir si c'est dans le flux normal du document? Je dirais pas.

Dehors dans

La méthode qui m'est venue d'aimer ordonne aux propriétés CSS de déterminer leur impact sur les éléments sélectionnés ou les autres éléments qui les entourent. L’essentiel de la technique consiste à commencer par les propriétés de la grande image qui ont un impact sur les éléments extérieurs à l’élément et à travailler dans les moindres détails. C’est pourquoi je l’appelle la méthode «Outside In».

position et flotte les déclarations suppriment des éléments de leur flux normal et ont un impact énorme sur les autres éléments les entourant. C’est quelque chose d’important et j’estime que cela devrait être clairement précisé au début d’un bloc CSS.. 

Contrôler des choses comme le le curseur ou débordement d'un élément sont (généralement) moins importants et par conséquent, j'ai tendance à laisser de telles choses à la fin. 

L'ordre que j'utilise est le suivant: 

• Propriétés de la mise en page (position, flotte, clair, afficher)
• Propriétés du modèle de boîte (largeur, la taille, marge, rembourrage)
• Propriétés visuelles (Couleur, Contexte, frontière, boîte ombre)
• Propriétés de la typographie (taille de police, famille de polices, aligner le texte, transformation de texte)
• Propriétés diverses (le curseur, débordement, z-index)

je le sais frontière est une propriété de modèle de boîte et z-index est liée à la position, mais cette commande fonctionne pour moi. Même si je n'aime pas l'ordre alphabétique, il y a quelque chose qui semble juste à propos de mettre z-index à la fin…

Exemple pratique

Prenons l'exemple du style d'un module de bouton. 

Commençons par un nom de classe agréable et significatif comme .bouton. Personnellement, je n'aime pas les noms contractés comme .btn et ont tendance à privilégier les noms de classe longs et descriptifs dans la mesure du possible - ce n'est qu'une préférence personnelle, YMMV :)

/ * Commandez maintenant → * / .button 

Nous voulons être en mesure de manipuler l’espacement vertical autour du bouton, nous devrons donc changer la afficher de en ligne (valeur par défaut pour les liens d'ancrage) à bloc en ligne. 

Pour permettre au bouton de grossir en fonction du contenu du texte, bloc en ligne est un choix plus flexible que flotte avec un largeur ensemble.

.bouton display: inline-block; 

Ensuite, nous devrons ajouter des caractéristiques de modèle de boîte telles que la marge et le remplissage. La marge sort des sentiers battus alors, en allant à l'extérieur, cela devrait venir en premier.

.bouton display: inline-block; marge: 1em 0; rembourrage: 1em 4em; 

Les prochaines choses à ajouter sont les couleurs. Pour séparer chaque groupe de types de propriétés, j'aime bien laisser une ligne vide - cela rend chaque section plus visible..

.bouton display: inline-block; marge: 1em 0; rembourrage: 0.5em 3em; couleur: #fff; arrière-plan: # 196e76; 

Ensuite, nous pouvons ajouter des bordures et des ombres pour fournir une certaine profondeur, suivies des propriétés de typographie, à nouveau séparées par une ligne vierge..

.bouton display: inline-block; marge: 1em 0; rembourrage: 1em 4em; couleur: #fff; arrière-plan: # 196e76; bordure: solide 0,25em # 196e76; encadré: incrustation 0,25em 0,25em 0,5em rgba (0,0,0,0,3), 0,5em 0,5em 0 # 444; taille de police: 3em; famille de polices: Avenir, Helvetica, Arial, sans-serif; text-align: center; text-transform: majuscule; texte-décoration: aucun; 

Lecture du code

L’avantage d’un tel système est qu’il évite de trop penser une fois mis en œuvre. Si je lis mon code et que je veux changer quelque chose de grand comme un élément largeur ou position, Je sais que je regarderai vers le haut d'une règle. Si je veux ajuster quelque chose comme transformation de texte ou style de liste, Je vais regarder vers le bas du bloc.

Avoir le code structuré comme ceci est aussi très pratique pour les autres lecteurs du CSS; Si le code est organisé de la sorte, il est très facile de voir tous les composants composant un module de boutons. Lors de la rédaction de code, il est important que les autres développeurs puissent le lire aussi facilement que possible. cela rend le code plus facile à comprendre et à maintenir.

Préprocesseurs

J'ai utilisé le langage CSS vanille pour expliquer mes méthodes ici, mais vous pouvez appliquer l'approche «Outside In» de manière tout aussi efficace dans vos Sass, LESS et Stylus..

Conclusion

Le codage peut être une chose très personnelle. Si vous utilisez une méthode différente pour organiser votre CSS, ce serait bien d'en entendre parler! Laisse un commentaire pour continuer la discussion.