Normalement, un projet aura un ensemble de tailles de polices prédéterminées, généralement comme des variables nommées d'une manière qui cherche un semblant d'ordre et de cohérence. Tout projet de taille considérable peut utiliser quelque chose comme ça. Il y a toujours des titres, des paragraphes, des listes, etc. Vous pouvez définir des tailles de police explicitement et directement partout (par exemple, la taille de la police: 18px). CSS brut, pour ainsi dire. Je vois cela occasionnellement - mélangeant non seulement des tailles mais aussi des unités comme PX, Rem et Em dans le chaos insensé.

C'est pourquoi le CSS d'un projet utilise généralement des variables ou des mixins - nous tirons pour la structure, la maintenabilité et, en fin de compte, la cohérence. Nous savons tous que la dénomination est difficile et il ne faut pas chercher beaucoup plus loin que les variables de taille de police de nommer pourquoi. Comment devrions-nous nommer une petite variable de taille de police afin qu'il soit clair qu'il est plus petit qu'une grande variable de taille de police? Et que se passe-t-il si nous devons insérer une nouvelle variable entre eux - est-ce que celui nommé d'une manière qui explique clairement sa relation avec les autres variables de taille?

Nous continuerons à parler des variables de taille de police dans ce post. Mais, vraiment, le problème s'étend au-delà des tailles de police à toute sorte de taille ou de longueur. Pensez aux pôles, marges, largeurs, hauteurs, rayons de bordure, etc. Ces choses ont également besoin de structure et de cohérence!

Comment définissez-vous les tailles de police dans votre projet? Est-ce que cela ressemble à ceci avec des variables personnalisées:

:root {
  /* Font size variables */
  --small: 12px;
  --medium: 16px;
  --large: 24px;
}

ou peut-être dans SASS (c'est ce que nous utiliserons tout au long de cet article), vous pourriez avoir des variables pour $ small, $ medium et $ grande tailles de police.

Bien. Après un certain temps, disons que le concepteur ajoute une nouvelle tête

pour une section de héros. Et c'est très grand. Plus grand que tout ce que vous avez dans le projet. Pas de problème, vous répondez. Vous ajoutez un $ xlarge au projet et passez votre journée.

Le lendemain, le concepteur fait une belle étiquette de formulaire, qui a à nouveau une nouvelle taille de police. Cette nouvelle taille, cependant, est plus grande que petite, mais plus petite que moyenne.

On y va.

Comment devriez-vous l'appeler? $ petit-médium? $ small-2? $ smedium? Quoi que vous l'appelez, vous n'enrez pas de vous en être satisfait. Parce qu'il n'y a pas de mot pour ça.

ou devriez-vous peut-être le refacter? Créez un nouveau $ xsmall et modifiez toutes les instances de $ small à $ xsmall? Et puis vous pouvez utiliser $ petit pour l'étiquette de formulaire? Il y a un petit risque que vous oublierez de changer quelque part et, hé, Presto: un bug. Que se passe-t-il la prochaine fois, lorsque quelque chose est introduit qui a une taille plus grande que la valeur de variable moyenne $? Faut-il aussi refactor $ grand et $ xlarge?

Je suggère d'adhérer à une échelle, toujours. Une solution facile serait de poursuivre l'abstraction, peut-être abandonner les nombres et les tailles en faveur de noms fonctionnels, comme $ form-tabel au lieu de $ small-2 ou $ xsmall.

mais imaginez avoir un ensemble de tailles de police comme ceci:

$small: 12px;
$form-label: 14px;
$medium: 16px;
$large: 24px;

qui est une échelle cassée. C'est un concept de taille et un concept de composant mélangé. Cela soulève des questions. Une alerte ou un bouton devrait-il être autorisé à utiliser $ Form-label? Beurk.

Peut-être que vous avez une chose grecque en cours, nommant les variables $ alpha, $ bêta, $ gamma? Permettez-moi de vous demander alors, qu'est-ce qui est alors plus grand que $ alpha? $ alpha-grand? Ou attendez, $ alpha le petit un?

J'ai également vu des noms comme $ Button-Font-Size, $ Label-Size, $ BlockQuote-Font-Size. Cela me semble être une variable par élément utilisé, au lieu d'une échelle, et il semble que cela pourrait être beaucoup de code dupliqué si la même valeur est utilisée à plusieurs endroits, mais avec des noms différents.

Peut-être que vous travaillez avec une seule taille de base et des pourcentages uniquement? Bien sûr, mais je dirais que vous avez besoin de variables pour les pourcentages. C’est ainsi que Geoff gère le dimensionnement des polices et même il admet que la configuration lève ses propres sourcils. Les calculs avec des variables subjectivement nommés peuvent être clairs pour vous, mais d'apparence folle et compliquée pour quiconque saute dans le projet.

h1 {
  font-size: clamp(var(--text-size-large), calc(var(--text-size-base) * var(--text-size-scaler)), var(--text-size-huge));
}

Nous avons besoin d'un meilleur système

Ajouter et supprimer des trucs constamment est la façon dont nous voulons que fonctionne. Il s'agit du développement moderne - MVP , agile, et tous les autres mots à la mode chauds.

Ce dont nous avons besoin, c'est d'une syntaxe à l'échelle qui permet des modifications. L'ajout d'une nouvelle taille à l'échelle doit être facile sans introduire de changements de rupture. Je pense à une sorte d'échelle qui est à la fois flexible et infinite . Il doit être plus sophistiqué que $ petit, $ moyen et $ grand.

il devrait être également descriptif et intuitif . De préférence, vous ne devriez pas avoir à rechercher les noms de variables dans le fichier de paramètres ou la configuration, ou partout où vous stockez ces choses. Je n'ai pas le moindre indice si $ epsilon vient avant ou après $ Sigma. Est-ce que tu?

en utilisant des systèmes existants

Avant d'essayer d'inventer quelque chose de nouveau, y a-t-il une syntaxe ou un système existant que nous pouvons exploiter? En voici quelques-uns que j'ai rencontrés.

Système international d'unités

vous connaissez sûrement des termes comme «Kilobyte» et «MegaByte». Les Européens sont très habitués à «millimètre» et à «centimètre». Les autres exemples sont «Giga», «Tera» et «Peta». Ces préfixes peuvent être utilisés pour la longueur, le poids, le volume et plus encore. Une taille de police $ pourrait-elle fonctionner? Il est intuitif dans une certaine mesure, c'est-à-dire si vous connaissez le système métrique. Il s'agit d'une échelle finie. Et il n'y a pas de place pour ajouter de nouvelles tailles car elles sont déjà définies.

Noms de taille ponctuelle traditionnels

Bien avant la publication des ordinateurs et des ordinateurs de bureau, les livres et les journaux étaient imprimés avec un type de lead. Les setters de type avaient des noms différents pour différentes tailles. Les tailles ont une référence à une taille ponctuelle (PT) et pourraient, en théorie, être utilisées pour les tailles de pixels (PX).

Les tailles de type dans ce système sont appelées «non-pareil», «pica», «cicéron» et «grand amorce», pour n'en nommer que quelques-uns. Les noms sont différents en fonction du continent et du pays. De plus, le même nom peut avoir des tailles différentes, donc… assez déroutant.

Cela dit, j'aime ce système d'une manière parce que ce serait comme rendre hommage à une vieille artisanat de temps passé. Mais les noms sont si bizarres et spécifiquement destinés au dimensionnement de type, que cela ressemble à un étirement à utiliser pour des choses comme les points d'arrêt et l'espacement.

placer des objets quotidiens sur une échelle

Que diriez-vous d'utiliser des choses de notre vie quotidienne? Dites des piments.

Il existe de nombreux types de piments. Le $ HABANERO, est plus chaud que le $ Cayenne, qui est plus chaud que le $ jalapeno. Ce serait amusant, ouais?

Mais autant que j'apprécie l'idée d'écrire des polices de taille: $ tabasco, je vois deux problèmes. Si vous n'êtes pas dans les poivrons, vous ne pouvez pas savoir quel poivre est plus chaud qu'un autre poivre - donc, ce n'est pas universellement intuitif. De plus, le poivron est 0 sur l'échelle Scoville, et rien n'est en dessous. Carolina Reaper est le poivre le plus chaud du monde, donc l'échelle est finie.

Et oui, les poivrons en termes d'échelle ne sont pas plus grands ou plus petits, ils sont plus chauds. Mauvais concept. Peut-être quelque chose de plus courant, comme des types de balles?

Il y a une large gamme de différents types de balles. Vous avez des balles de handball, des balles de football, des volleyball, etc. Besoin de quelque chose de plus grand qu'un ballon de médecine? Utilisez $ beach. Quelque chose de plus petit qu'une balle de tennis? Utilisez $ Pingpong. C'est très intuitif, car j'imagine que tout le monde a joué avec toutes sortes de balles à un moment donné, ou du moins les connaissent des sports.

Mais une balle de ping-pong est-elle plus grande qu'une balle de golf? Qui sait? De plus, une boule de bowling et un ballon de football sont en fait de la même taille. Alors… encore une fois, pas parfait.

La mise à l'échelle des planètes pourrait fonctionner, mais vous devriez être bien informé en astronomie.

Et les numéros droites? Nous ne pouvons pas utiliser les nombres seuls car des outils comme StyleLinter protesteront. Mais quelque chose comme ce travail:

$font-14: 14px;
$font-16: 16px;
$font-24: 24px;

Eh bien, c'est infini car il y a toujours de la place pour de nouveaux ajouts. Mais c'est aussi incroyablement spécifique, et il y a des inconvénients pour que la valeur réelle fasse partie du nom comme ça. Supposons que $ FONT-18 est utilisé dans de nombreux endroits. Et maintenant, disent-ils, tous les endroits avec 18px doivent être changés en 19px (parce que les raisons). Nous devons maintenant renommer la variable de $ FONT-18 à $ FONT-19, puis modifier la valeur de $ FONT-19 de 18px à 19px. Et c'est avant de mettre à jour finalement tous les endroits en utilisant $ FONT-18 à $ FONT-19. C'est presque comme l'utilisation de CSS bruts. Score faible pour la maintenabilité.

Qu'en est-il du règne animal?

Mère Nature a fourni une myriade d'espèces sur cette terre, qui est utile dans cette situation. Imaginez quelque chose comme ceci:

$mouse: 12px;
$dog: 16px;
$hippo: 24px;

Besoin de quelque chose de plus petit qu'une souris? Utilisez $ bee, $ ant ou $ flea. Plus grand qu'un ours? Essayez $ Moose ou $ Hippo. Plus grand qu'un éléphant? Eh bien, vous avez la baleine $, ou diable, nous pouvons aller préhistorique et utiliser $ t-rex. Il y a toujours un animal pour se faufiler ici. Très polyvalent, très intuitif, également infini (presque). Et amusant aussi - cela ne me dérangerait pas de faire de la taille de police: $ Squirrel. ?

Mais là encore, même cela pourrait nécessiter un besoin pour référencer les variables, à moins que nous sachions exactement quels animaux sont contenus dans notre zoo de tailles de police. Mais peut-être que ce n'est pas un gros problème tant qu'il évolue.

J'ai passé beaucoup trop de temps à réfléchir à ce

ou ai-je? La base de code est l'endroit où vous passez vos heures de travail. C'est votre environnement de travail, tout comme les chaises et les moniteurs. Et le lieu de travail devrait être un endroit agréable.

Comment gérez-vous vos échelles de taille de police? Avez-vous un système pour les polices et un autre pour des choses comme les marges? Quelqu'un peut-il sauter directement dans votre code et comprendre comment tout est organisé? Veuillez dire dans les commentaires!