Normalmente, un proyecto tendrá un conjunto de tamaños de fuente predeterminados, generalmente como variables nombradas de tal manera que busque cierta apariencia de orden y consistencia. Cualquier proyecto de tamaño considerable puede usar algo así. Siempre hay encabezados, párrafos, listas, etc. Puede establecer tamaños de fuente explícita y directamente en todas partes (por ejemplo, font-size: 18px). CSS crudo, por así decirlo. Veo eso ocasionalmente, mezclando no solo tamaños sino también unidades como px, rem y em en un caos sin sentido.
Es por eso que el CSS de un proyecto generalmente usa variables o mixins: buscamos estructura, mantenibilidad y, en última instancia, consistencia. Todos sabemos que nombrar es difícil y no hace falta buscar mucho más que nombrar variables de tamaño de fuente para ver por qué. ¿Cómo deberíamos nombrar una variable de tamaño de fuente pequeño para que quede claro que es más pequeña que una variable de tamaño de fuente grande? ¿Y qué sucede si necesitamos insertar una nueva variable entre ellos? ¿Se nombra de una manera que explique 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, en realidad, el problema se extiende más allá de los tamaños de fuente a cualquier tipo de valor de tamaño o longitud. Piense en rellenos, márgenes, anchos, altos, radios de borde, etc. ¡Estas cosas también necesitan estructura y consistencia!
¿Cómo defines los tamaños de fuente en tu proyecto? ¿Se ve algo como esto 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) podría tener variables para $small, $medium, y $large tamaños de fuente
Multa. Después de un tiempo, digamos que el diseñador agrega un nuevo <h1> dirigiéndose a una sección de héroe. Y es muy grande. Más grande que cualquier cosa que tengas en el proyecto. No hay problema, respondes. agregas un $xlarge al proyecto, y continuar con su día.
Al día siguiente, el diseñador crea una bonita 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 mediano.
Aquí vamos.
¿Cómo deberías llamarlo? $small-medium? $small-2? $smedium? Lo llames como lo llames, no estarás contento con él. Porque no hay palabra para eso.
¿O tal vez deberías refactorizarlo? Crear un nuevo $xsmally cambiar todas las instancias de $small a $xsmall? Y luego puedes usar $small para la etiqueta del formulario? Existe un pequeño riesgo de que te olvides de cambiar algo y, oye, listo: un error. ¿Qué sucede la próxima vez, cuando se introduce algo que tiene un tamaño mayor que el $medium ¿valor variable? ¿Tenemos que refactorizar? $large y $xlarge ¿también?
Sugiero adherirse a una escala, siempre. Una solución fácil sería una mayor abstracción, tal vez descartando números y tamaños a favor de nombres funcionales, como $form-label en vez 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;Esa es una balanza rota. Es un concepto de tamaño y un concepto de componente mezclados. Plantea preguntas. ¿Debería permitirse el uso de una alerta o un botón? $form-label? Qué asco.
Tal vez tengas algo griego, nombrando las variables $alpha, $beta, $gamma? Déjame preguntarte entonces, ¿qué es entonces más grande que $alpha? $alpha-large? O espera, es $alpha el pequeño?
También he visto nombres como $button-font-size, $label-font-size, $blockquote-font-size. Me parece que se usa una variable por elemento, en lugar de una escala, y parece que podría ser una gran cantidad de código duplicado si se usa el mismo valor en varios lugares, pero con nombres diferentes.
¿Quizás está trabajando solo con un tamaño de fuente base y porcentajes? Claro, pero diría que necesitas variables para los porcentajes. Así es como Geoff maneja el tamaño de fuente e incluso él admite que la configuración levanta sus propias cejas. Los cálculos con variables nombradas subjetivamente pueden ser claros para usted, pero parecen locos y complicados para cualquier otra persona que se involucre en el 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 quitar cosas constantemente es la forma en que queremos trabajar. Este es el desarrollo moderno: MVP, Agile y todas las demás palabras de moda.
Lo que necesitamos es una sintaxis de escala que permita cambios. Agregar un nuevo tamaño a la escala debería ser fácil sin introducir cambios importantes. Estoy pensando en una especie de escala que es a la vez flexible y infinito. Debe ser más sofisticado que $small, $medium y $large.
deberia ser tambien descriptivo y intuitivo. Preferiblemente, no debería tener que buscar los nombres de las 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 $sigma. ¿Vos si?
Uso de sistemas existentes
Antes de intentar inventar algo nuevo, ¿hay alguna sintaxis o sistema existente que podamos aprovechar? Aquí hay algunos que he encontrado.
Sistema Internacional de Unidades
Seguramente, está 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 un $centi funciona el tamaño de fuente? 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 tradicionales de tamaño de punto
Mucho antes de las computadoras y la autoedición, los libros y periódicos se imprimían con tipos de plomo. Los tipógrafos tenían diferentes nombres para diferentes tamaños. Los tamaños tienen una referencia a un tamaño de punto (pt) y podría, en teoría, usarse para tamaños de píxeles (px).
Los tamaños de letra en este sistema se denominan “Nonpareil”, “Pica”, “Cicero” y “Great Primer”, 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 en cierto modo porque sería como rendir homenaje a una antigua artesanía de tiempos pasados. Pero los nombres son tan extraños y están diseñados específicamente para el tamaño de letra, que se siente como una exageración usarlos para cosas como puntos de interrupción y espaciado.
Colocar objetos cotidianos en una balanza
¿Qué tal usar cosas de nuestra vida cotidiana? Di chiles.
Hay muchos tipos de chiles. El $habanero, es más caliente que el $cayenne, que es más caliente que el $jalapeno. Eso sería divertido, ¿sí?
Pero por mucho que disfruto la idea de escribir font-size: $tabasco, veo dos problemas. Si no te gustan los pimientos, no puedes saber qué pimiento es más picante que otro, por lo que no es universalmente intuitivo. Además, el pimiento morrón es 0 en la escala Scoville, y nada está por debajo de eso. Carolina Reaper es el pimiento más picante del mundo, por lo que la escala es finita.
Y sí, los pimientos en escala no son más grandes o más pequeños, son más picantes. Mal concepto. ¿Quizás algo más común, como tipos de bolas?
Hay una gran variedad de diferentes tipos de bolas. Tiene balones de balonmano, fútbol, voleibol, etc. ¿Necesita algo más grande que un balón medicinal? Usar $beach. ¿Algo más pequeño que una pelota de tenis? Usar $pingpong. Esto es muy intuitivo, ya que me imagino que todos han jugado con todo tipo de pelotas en algún momento, o al menos están familiarizados con ellas por los deportes.
Pero, ¿una pelota de ping pong es más grande que una pelota de golf? ¿Quién sabe? Además, una pelota de bolos y una pelota de fútbol son en realidad del mismo tamaño. Así que… de nuevo, no perfecto.
Ampliar la escala a los planetas podría funcionar, pero tendrías que tener conocimientos de astronomía.
¿Qué hay de los números directos? No podemos usar números solos porque herramientas como stylelinter protestarán. Pero algo como esto funcionaría:
$font-14: 14px;
$font-16: 16px;
$font-24: 24px;Bueno, es infinito ya que siempre hay espacio para nuevas incorporaciones. Pero también es increíblemente específico, y hay algunas desventajas de que el valor real sea parte del nombre de esa manera. Supongamos que $font-18 se usa en muchos lugares. Y ahora, dicen, todos los lugares con 18px debe ser cambiado a 19px (por razones). Ahora tenemos que cambiar el nombre de la variable de $font-18 a $font-19 luego cambie el valor de $font-19 desde 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 sin formato. Puntuación baja en mantenibilidad.
¿Qué pasa con el reino animal?
La madre naturaleza ha proporcionado una miríada de especies en esta tierra, lo que viene muy bien en esta situación. Imagina algo como esto:
$mouse: 12px;
$dog: 16px;
$hippo: 24px;¿Necesita algo más pequeño que un ratón? Usar $bee, $ant o $flea. ¿Más grande que un oso? Tratar $moose o $hippo. ¿Más grande que un elefante? Bueno, tienes la $whale, o diablos, podemos ir a la prehistoria y usar $t-rex. Siempre hay un animal para exprimir aquí. Muy versátil, muy intuitiva, también infinita (casi). Y divertido, también, no me importaría hacer font-size: $squirrel. 🤩
Pero, de nuevo, incluso eso podría requerir la 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 gran cosa mientras se escale.
He pasado demasiado tiempo pensando en esto
¿O tengo yo? El código base es donde pasas tus horas de trabajo. Es su entorno de trabajo, al igual que las sillas y los monitores. Y el lugar de trabajo debe ser un lugar agradable.
¿Cómo maneja sus escalas de tamaño de fuente? ¿Tiene un sistema para las fuentes y otro para cosas como los márgenes? ¿Alguien puede saltar directamente a su código y entender cómo está todo organizado? ¡Cuéntalo en los comentarios!