Pourquoi de grandes quantités de nombres magiques sont-elles acceptables dans les CSS et les SVG?

Souvent , je vois des questions sur la liste des questions Réseau Hot comme ce qui demande essentiellement « comment puis-je dessine cette forme arbitraire en CSS ». Invariablement, la réponse consiste en quelques blocs de données CSS ou SVG avec un ensemble de valeurs apparemment aléatoires codées en dur qui forment la forme demandée.

Quand je regarde ça, je me dis 'Beurk! Quel bloc de code moche. J'espère ne jamais voir ce genre de choses dans mon projet '. Cependant, je vois ces types de questions-réponses assez fréquemment et avec un grand nombre de votes positifs, de sorte que la communauté ne pense clairement pas qu'ils sont mauvais.

Mais pourquoi est-ce acceptable? Venant de mon expérience en arrière-plan, cela n’a aucun sens pour moi. Alors pourquoi est-ce OK pour CSS / SVG?

Tout d'abord, les valeurs magiques sont évitées dans la programmation en utilisant des variables ou des constantes. CSS ne supporte pas les variables, donc même si les valeurs magiques étaient mal vues, vous n'avez pas beaucoup de choix (sauf d'utiliser un pré-processeur comme SASS, mais vous ne le feriez pas pour un seul extrait de code).

Deuxièmement, les valeurs pourraient ne pas être aussi magiques dans un langage spécifique à un domaine tel que CSS. En programmation, un nombre magique est un nombre dont le sens ou l'intention n'est pas évident. Si une ligne dit:

x += 23;

Vous allez demander "pourquoi 23"? Quel est le raisonnement? Une variable pourrait clarifier l'intention:

x += defaultHttpTimeoutSeconds;

Cela est dû au fait qu'un nombre unique pourrait signifier absolument n'importe quoi dans un code d'usage général. Mais considérons CSS:

background-color: #ffffff;
font-size: 16px;

La hauteur et la couleur ne sont pas magiques, car la signification est parfaitement claire du contexte. Et la raison du choix de la valeur spécifique est simple car les concepteurs ont pensé que cela aurait l'air bien. Introduire une variable n’aiderait à rien, puisque vous l’appelleriez simplement comme " defaultBackgroundColor" et " defaultFontSize" de toute façon.

C'est acceptable car ces formats ne sont pas du code , mais des données . Si vous supprimiez tous les "nombres magiques", vous dupliqueriez essentiellement chaque étiquette et aboutiriez à des fichiers ridicules comme:

mainkite_width = 200px
...
.mainkite {
  width: mainkite_width;
  ...

Chaque fois que vous avez besoin de modifier certaines données, vous devez rechercher à deux endroits. Certes, il est bon d’éviter les doublons dans certaines situations, par exemple si une couleur est répétée fréquemment et que vous souhaitez peut-être changer afin de changer de thème. Il existe des pré-processeurs et des extensions proposées pour remédier à ces situations, mais en général, il est souhaitable que les nombres soient associés à la structure dans un format de données.

L'interdiction des nombres magiques est la version primordiale de ce principe de conception:

Prendre des décisions en un seul endroit .

Mais ce ne sont pas des nombres magiques . Du moins, pas en ce qui concerne les guides de style de codage que je connaisse.

largeur: 200px;
hauteur: 200px;

Ils sont clairement étiquetés. Bien sûr, les chiffres sont les mêmes. Mais la largeur est la largeur et la hauteur est la hauteur. Ils sont conçus pour varier indépendamment.

Maintenant , si vous avez 5 objets que tous avaient d'avoir la même largeur et chaque indépendamment de leur largeur codées en dur je vous battre avec le indirection bâton.

Je ne les appellerais pas des nombres magiques s'ils sont étiquetés, mais je vous battrais quand même avec le bâton d' indirection .

Comme CSS n’est pas un langage de programmation, c’est le fichier de configuration qui contient les données variables de votre programme.

Actuellement, le CSS est si puissant que vous pouvez réellement le programmer, mais c’est d’autre chose. En substance, c'est toujours un langage de feuille de style .

Faisons un pas en arrière. Imaginez que nous ayons un langage de programmation capable de dessiner sur un écran. Imaginons que nous voulions le programmer pour peindre une page Web.

Au début, nous entrions des tonnes de nombres magiques dans notre code. La largeur de la marge, la hauteur du texte, les indentations, etc., etc.

jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)

Nous extrayons donc les nombres magiques et les plaçons au-dessus de notre fichier.

int margin = 100
int table = 500
int text_size = 12
jump(margin) // The margin
drawTable(table, table)
writeText("Hello World", text_size)

Maintenant c'est un peu moche. Nous lisons plutôt nos nombres variables dans un fichier de configuration.

margin 100
table 500
text size 12

Mm, c'est un peu flou ... Que signifient ces chiffres? Que signifient ces noms? Formalisons cela un peu.

margin_left 10em
table_width 500px
table_height 500px
font_size 12px

Mais vous savez, nous voulons élargir un peu notre programme. Nous voulons également qu’il dessine des pages avec plusieurs tableaux, des pages sans tableaux, des pages avec des paragraphes ou des boutons, entre autres choses. Ajoutons des sélecteurs à notre fichier de configuration afin de pouvoir spécifier le paragraphe qui doit avoir une police plus grande ou une couleur de texte différente, peut-être que nous pouvons prendre en charge des éléments imbriqués, peut-être que nous pouvons utiliser une propriété générale dans notre fichier de configuration, puis la remplacer par un paramètre spécifique. un dans quelques éléments imbriqués.

Vous sentez où cela se passe, vous finissez par arriver en CSS. (Et un navigateur pour le rendre.)

Devrions-nous alors ajouter des fonctionnalités à notre fichier de configuration afin d’éviter à nouveau les nombres magiques? Ajouter des variables? Ajouter un fichier de configuration pour notre fichier CSS? Cela semble un peu inutile si vous vous souvenez que notre fichier CSS est déjà le même fichier de configuration.

Mais ce n'est pas vrai bien sûr; votre fichier CSS grossit de plus en plus, et vous rencontrez finalement les mêmes problèmes que pour les nombres magiques d'origine, le même nombre répété partout, parfois avec de petites transformations, etc.

Le CSS moderne permet cependant plusieurs façons d’éviter cette répétition. Vous pouvez utiliser des classes qui s'appliquent à de nombreux éléments, vous pouvez définir un style pour tous les divobjets, mais en substituer un en particulier, et CSS 3 autorise même un type d'utilisation variable.

Cela ne signifie pas que vous devez commencer à utiliser des variables CSS dans tous les emplacements possibles. Utilisez-le là où cela vous semble utile et évitez la duplication ou d'autres techniques également disponibles.

En fin de compte, vous ne voulez pas trop de nombres magiques dans votre fichier de configuration :-)

Pourquoi est-il [un tas de valeurs apparemment aléatoires codées en dur] OK pour CSS / SVG?

Ce n'est pas OK Il est possible d'écrire et de gérer des fichiers ".css" simples, mais des valeurs aléatoires codées de manière définitive deviendront un fardeau dominant.

Pour toute autre chose que des pages Web extrêmement simples, vous devrez soit développer une stratégie disciplinée de "recherche et remplacement", soit utiliser un pré-processeur CSS avec des variables, ou définir des styles via JavaScript.