Pourquoi de grandes quantités de nombres magiques sont-elles acceptables en CSS et SVG?
Souvent, je vois des questions sur la liste Hot Network Questions comme this qui demandent essentiellement "comment dessiner cette forme arbitraire en CSS". Invariablement, la réponse est un couple de blocs de données CSS ou SVG avec un tas de valeurs codées en dur apparemment aléatoires qui forment la forme demandée.
Quand je regarde ça, je pense 'Beurk! Quel laid bloc de code. J'espère que je ne vois jamais ce genre de choses dans mon projet ". Cependant, je vois ces types de questions et réponses assez fréquemment et avec un nombre élevé de votes positifs, donc clairement la communauté ne pense pas qu'ils sont mauvais.
Mais pourquoi est-ce acceptable? Venant de mon expérience back-end, cela n'a aucun sens pour moi. Alors, pourquoi est-ce OK pour CSS/SVG?
Premièrement, les valeurs magiques sont évitées dans la programmation en utilisant des variables ou des constantes. CSS ne prend pas en charge les variables, donc même si les valeurs magiques étaient désapprouvées, vous n'avez pas beaucoup de choix (sauf en utilisant un préprocesseur comme SASS, mais vous ne le feriez pas pour un seul extrait).
Deuxièmement, les valeurs peuvent ne pas être aussi magiques dans un langage spécifique à un domaine comme CSS. En programmation, un nombre magique est un nombre dont la signification ou l'intention n'est pas évidente. Si une ligne dit:
x += 23;
Vous demanderez "pourquoi 23"? Quel est le raisonnement? Une variable pourrait clarifier l'intention:
x += defaultHttpTimeoutSeconds;
En effet, un nombre isolé peut signifier absolument n'importe quoi dans le code à usage général. Mais considérez CSS:
background-color: #ffffff;
font-size: 16px;
La hauteur et la couleur ne sont pas magiques, car le sens est parfaitement clair du contexte. Et la raison du choix de la valeur spécifique est simple car les concepteurs pensaient que cela aurait l'air bien. L'introduction d'une variable n'aiderait en rien, puisque vous la nommeriez simplement quelque chose comme "defaultBackgroundColor" et "defaultFontSize" de toute façon.
C'est acceptable car ces formats ne sont pas code, mais data. Si vous supprimiez tous les "nombres magiques", vous dupliqueriez essentiellement chaque étiquette, et vous vous retrouveriez avec des fichiers ridicules comme:
mainkite_width = 200px
...
.mainkite {
width: mainkite_width;
...
Chaque fois que vous devez modifier certaines données, vous devez regarder à deux endroits. Certes, il y a des situations où il est agréable d'éviter la duplication, comme si vous avez une couleur qui se répète fréquemment et que vous souhaiterez peut-être changer pour changer de thème. Il existe des préprocesseurs et des extensions proposées pour résoudre ces situations, mais en général, il est souhaitable d'avoir des nombres avec la structure dans un format de données.
L'interdiction des nombres magiques est la version primordiale de ce principe de conception:
Prenez des décisions en un seul endroit .
Mais ce ne sont pas des nombres magiques . Du moins, pas en ce qui concerne tout guide de style de codage que je connaisse.
largeur: 200 px;
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 pour avoir la même largeur et chacun codé en dur indépendamment leur largeur, je vous battrais 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 indirection .
Parce que CSS n'est pas un langage de programmation, c'est plutôt le fichier de configuration qui contient les données variables de votre programme.
Actuellement, CSS est si puissant que vous pouvez réellement le programmer, mais c'est d'ailleurs le point. En substance, c'est toujours un langage de feuille de style .
Prenons un peu de recul. Imaginez que nous ayons un langage de programmation qui puisse dessiner sur un écran. Imaginez 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 retraits, etc., etc.
jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)
Nous extrayons donc les nombres magiques et les mettons en haut 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 à partir d'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-le un peu.
margin_left 10em
table_width 500px
table_height 500px
font_size 12px
Mais vous savez, nous voulons étendre 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 et quoi de plus. Ajoutons des sélecteurs à notre fichier de configuration afin que nous puissions spécifier quel paragraphe doit avoir une police plus grande, ou une couleur de texte différente, peut-être que nous pouvons prendre en charge les é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 spécifique un dans quelques éléments imbriqués.
Vous vous sentez où cela va, finalement vous arrivez en tant que CSS. (Et un navigateur pour le rendre.)
Devrions-nous alors ajouter des fonctionnalités à notre fichier de configuration pour é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 ce même fichier de configuration déjà.
Mais ce n'est pas vrai bien sûr; votre fichier CSS grossit de plus en plus, et finalement vous rencontrez les mêmes problèmes qu'avec les nombres magiques originaux, le même nombre répété partout, parfois avec de petites transformations, etc.
Cependant, le CSS moderne permet de nombreuses façons d'éviter cette répétition. Vous pouvez utiliser des classes qui s'appliquent à de nombreux éléments, vous pouvez définir le style de tous les div, mais en remplacer une spécifiquement, et CSS 3 autorise même une sorte d'utilisation variable.
Cela ne signifie pas que vous devez commencer à utiliser la variable CSS dans tous les emplacements possibles. Utilisez-le là où cela a du sens et utilisez-le là où vous évitez la duplication ou là où d'autres techniques également disponibles échouent.
Au final, vous ne voulez pas non plus trop de nombres magiques dans votre fichier de configuration :-)
Pourquoi est-ce [un tas de valeurs codées en dur apparemment aléatoires] OK pour CSS/SVG?
Ce n'est pas OK. Il est possible d'écrire et de maintenir des fichiers ".css" simples, mais finalement des valeurs codées en dur aléatoires deviendront un fardeau répandu.
Pour tout 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, soit définir des styles via JavaScript.