Normalmente, un proyecto tendrá un conjunto de tamaños de fuentes predeterminados, generalmente como variables nombradas de tal manera que busca cierta apariencia de orden y consistencia. Cualquier proyecto de tamaño considerable puede usar algo así. Siempre hay encabezados, párrafos, listas, etc. Usted podría establecer los tamaños de fuentes explícitamente y directamente en todas partes (por ejemplo, tamaño de fuente: 18px). CSS crudo, por así decirlo. Veo eso ocasionalmente, mezcla no solo de tamaños sino también unidades como PX, REM y EM en el caos sin sentido.

es por eso que el CSS de un proyecto generalmente usa variables o mezclas: estamos disparando para la estructura, la mantenibilidad y, en última instancia, la consistencia. Todos sabemos que nombrar es difícil y no lleva mucho más lejos que las variables de tamaño de fuente de nombres para ver por qué. ¿Cómo debemos nombrar una pequeña variable de tamaño de fuente para que esté claro que es más pequeño que una gran variable de tamaño de fuente? ¿Y qué sucede si necesitamos insertar una nueva variable entre ellos? ¿Es esa nombrada de una manera que explica claramente su relación con las otras variables de tamaño?

Continuaremos hablando de nombrar variables de tamaño de fuente en esta publicación. Pero, realmente, el problema se extiende más allá de los tamaños de fuente a cualquier tipo de tamaño o valor de longitud. ¡Piense en lados, márgenes, anchos, alturas, radios de borde, etc. ¡Estas cosas también necesitan estructura y consistencia!

¿Cómo se define los tamaños de fuentes en su proyecto? ¿Se ve algo así con variables personalizadas:

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

o tal vez en sass (que es lo que usaremos a lo largo de este artículo) puede tener variables para $ pequeños, $ medios y $ grandes tamaños de fuentes.

Bien. Después de un tiempo, supongamos que el diseñador agrega un nuevo encabezado

para una sección de héroes. Y es muy grande. Más grande que cualquier cosa que tenga en el proyecto. No hay problema, respondes. Agrega un $ xlarge al proyecto y sigue tu día.

Al día siguiente, el diseñador hace una buena etiqueta de formulario, que nuevamente tiene un nuevo tamaño de fuente. Sin embargo, este nuevo tamaño es más grande que pequeño, pero más pequeño que el medio.

Aquí vamos.

¿cómo debería llamarlo? $ pequeño medio? $ pequeño-2? $ Smediium? Independientemente de que lo necesite, no estará contento con eso. Porque no hay palabra para eso.

¿o debería refactorizarlo? ¿Crear un nuevo $ xsmall y cambiar todas las instancias de $ pequeñas a $ xsmall? ¿Y luego puede usar $ Small para la etiqueta de formulario? Existe un pequeño riesgo de que se olvide de cambiar en algún lugar y, oye, Presto: un error. ¿Qué sucede la próxima vez, cuando se introduce algo que tiene un tamaño más grande que el valor variable $ medio? ¿Tenemos que refactorizar $ grande y $ xlarge también?

Sugiero adherirse a una escala, siempre. Una solución fácil sería una mayor abstracción, tal vez abandonando números y tamaños a favor de los nombres funcionales, como $ Form-Label en lugar de $ Small-2 o $ xsmall.

Pero imagine tener un conjunto de tamaños de fuente como este:

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

que es una escala rota. Es un concepto de tamaño y un concepto de componente mezclado. Plantea preguntas. ¿Debería permitirse que una alerta o un botón use $ Form-Label? Quitank.

¿Quizás tengas algo griego, nombrando las variables $ alfa, $ beta, $ gamma? Déjame preguntarte entonces, ¿qué es entonces más grande que $ Alpha? $ Alpha-Large? O esperar, ¿$ alfa el pequeño uno?

También he visto nombres como $ button-font-size, $ etiqueta-font-size, $ blockquote-font-size. Eso me parece como una variable por elemento utilizada, en lugar de una escala, y parece que podría ser mucho código duplicado si se usa el mismo valor en múltiples lugares, pero con diferentes nombres.

¿Quizás estás trabajando con un tamaño de fuente base y porcentajes solamente? Claro, pero diría que necesitas variables para los porcentajes. Así es como Geoff maneja el tamaño de la fuente e incluso él admite que la configuración levanta sus propias cejas. Los cálculos con variables con nombre subjetivamente pueden ser claros para usted, pero de aspecto loco y complicado para cualquier otra persona que salte al proyecto.

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

necesitamos un sistema mejor

Agregar y eliminar cosas constantemente es la forma en que queremos para que funcione. Este es el desarrollo moderno de los días: MVP , ágil, y todas las otras palabras de moda.

Lo que necesitamos es una sintaxis de escala que permite espacio para los cambios. Agregar un nuevo tamaño a la escala debería ser fácil sin introducir cambios de ruptura. Estoy pensando en un tipo de escala que es tanto flexible y infinite . Debe ser más sofisticado que $ pequeño, $ mediano y $ grande.

también debe ser descriptive y intuitive . Preferiblemente, no debería tener que buscar los nombres de variables en el archivo de configuración o la configuración, o donde sea que almacene estas cosas. No tengo la menor idea si $ Epsilon viene antes o después de $ Sigma. ¿Tú?

usando sistemas existentes

antes de intentar inventar algo nuevo, ¿hay una sintaxis o sistema existente que podamos aprovechar? Aquí hay algunos que he encontrado.

Sistema internacional de unidades

seguramente, estás familiarizado con términos como "kilobyte" y "megabyte". Los europeos están muy acostumbrados al "milímetro" y al "centímetro". Otros ejemplos son "Giga", "Tera" y "Peta". Estos prefijos se pueden usar para longitud, peso, volumen y más. ¿Podría funcionar un tamaño de fuente de $ centi? Es intuitivo hasta cierto punto, es decir, si está familiarizado con el sistema métrico. Esta es una escala finita. Y no hay espacio para agregar nuevos tamaños porque ya están configurados.

Nombres de tamaño de punto tradicional

mucho antes de que las computadoras y la publicación de escritorio, los libros y los periódicos se impriman con el tipo de plomo. Los tipos tenían diferentes nombres para diferentes tamaños. Los tamaños tienen una referencia a un tamaño de punto (PT) y podrían, en teoría, usarse para tamaños de píxeles (PX).

Los tamaños de tipos en este sistema se llaman "no Parteil", "pica", "cicero" y "gran imprimación", solo por nombrar algunos. Los nombres son diferentes según el continente y el país. Además, el mismo nombre puede tener diferentes tamaños, así que ... bastante confuso.

Dicho esto, me gusta este sistema de alguna manera porque sería como respetar a una vieja artesanía de tiempos pasados. Pero los nombres son tan raros y específicamente destinados al tamaño de los tipos, que se siente como un estiramiento de usar para cosas como los puntos de interrupción y el espacio.

colocando objetos cotidianos en una escala

¿Qué tal usar cosas de nuestra vida cotidiana? Di Chili Peppers.

Hay muchos tipos de chiles. El $ habanero es más caliente que el $ cayenne, que es más caliente que el $ jalapeño. Eso sería divertido, ¿sí?

Pero por mucho que disfrute de la idea de escribir el tamaño de la fuente: $ Tabasco, veo dos problemas. Si no te gustan los pimientos, no puedes saber qué pimienta está más caliente que otra pimienta, por lo que no es universalmente intuitivo. Además, el pimiento está 0 en la escala de Scoville, y nada está por debajo de eso. Carolina Reaper es la pimienta más popular del mundo, por lo que la escala es finita.

y sí, los pimientos en cuanto a escala no son más grandes o más pequeños, son más calientes. Mal concepto. ¿Quizás algo más común, como tipos de bolas?

hay una amplia gama de diferentes tipos de bolas. Tienes bolas de mano, pelotas de fútbol, ​​voleibolas, etc. ¿Necesitas algo más grande que una pelota de medicamentos? Use $ Beach. ¿Algo más pequeño que una pelota de tenis? Use $ Pingpong. Esto es muy intuitivo, ya que me imagino que todos han jugado con todo tipo de bolas en algún momento, o al menos son familiares de ellos por deportes.

pero ¿es una pelota de ping pong más grande que una pelota de golf? ¿Quién sabe? Además, una pelota de bolos y una bola de fútbol son en realidad del mismo tamaño. Entonces ... otra vez, no perfecto.

escalar a los planetas podría funcionar, pero tendría que tener conocimiento en la astronomía.

¿Qué hay de los números directos? No podemos usar números solos porque herramientas como Stylelinter protestará. Pero sería algo así como este trabajo:

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

Bueno, es infinito ya que siempre hay espacio para nuevas adiciones. Pero también es increíblemente específico, y hay algunas desventajas para que el valor real sea parte del nombre como ese. Supongamos que $ FONT-18 se usa en muchos lugares. Y ahora, dicen, todos los lugares con 18px deben cambiarse a 19px (por razones). Ahora necesitamos cambiar el nombre de la variable de $ font-18 a $ font-19 y luego cambiar el valor de $ font-19 de 18px a 19px. Y eso es antes de que finalmente actualicemos todos los lugares usando $ font-18 a $ font-19. Esto es casi como usar CSS crudo. Bajo puntaje para mantenibilidad.

¿Qué pasa con el reino animal?

La Madre Naturaleza ha proporcionado una miríada de especies en esta tierra, que es útil en esta situación. Imagina algo como esto:

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

¿necesitas algo más pequeño que un mouse? Use $ Bee, $ Ant o $ Flea. Más grande que un oso? Prueba $ Moose o $ Hippo. Más grande que un elefante? Bueno, tienes la ballena $, o diablos, podemos ir prehistóricos y usar $ T-Rex. Siempre hay un animal para exprimir aquí. Muy versátil, muy intuitivo, también infinito (casi). Y también divertido, no me importaría hacer el tamaño de una fuente: $ Squirrel. ?

Pero, de nuevo, incluso eso podría requerir necesidad de hacer referencia a las variables, a menos que sepamos exactamente qué animales están contenidos en nuestro zoológico de tamaños de fuente. Pero tal vez eso no sea un gran problema siempre que escalar.

He pasado demasiado tiempo reflexionando sobre esto

o tengo? La base del código es donde pasas las horas de trabajo. Es su entorno de trabajo, al igual que las sillas y los monitores. Y el lugar de trabajo debería ser un buen lugar.

¿Cómo manejas las escalas de tamaño de tu fuente? ¿Tiene un sistema para fuentes y otro para cosas como márgenes? ¿Alguien puede saltar directamente a su código y comprender cómo se organiza todo? ¡Por favor, dígale en los comentarios!