Normalmente, um projeto terá um conjunto de tamanhos de fonte pré-determinados, geralmente como variáveis ​​nomeadas de tal maneira que busca alguma aparência de ordem e consistência. Qualquer projeto de tamanho considerável pode usar algo assim. Sempre existem títulos, parágrafos, listas, etc. Você poderia definir tamanhos de fonte explícita e diretamente em todos os lugares (por exemplo, tamanho da fonte: 18px). CSS cru, por assim dizer. Eu vejo isso ocasionalmente - misturando não apenas tamanhos, mas também unidades como PX, REM e EM em caos irracional.

É por isso que o CSS de um projeto normalmente usa variáveis ​​ou mixins - estamos filmando para estrutura, manutenção e, finalmente, consistência. Todos sabemos que a nomeação é difícil e não é preciso olhar muito além do nome das variáveis ​​de tamanho da fonte para ver o porquê. Como devemos citar uma pequena variável de tamanho de fonte, para que fique claro que é menor que uma grande variável de tamanho de fonte? E o que acontece se precisarmos inserir uma nova variável entre eles - esse é nomeado de uma maneira que explica claramente seu relacionamento com as outras variáveis ​​de tamanho?

continuaremos falando sobre nomear variáveis ​​de tamanho da fonte nesta postagem. Mas, na verdade, o problema se estende além dos tamanhos das fontes a qualquer tipo de tamanho ou valor de comprimento. Pense em padrões, margens, larguras, alturas, raios de borda, etc. Essas coisas também precisam de estrutura e consistência!

Como você define tamanhos de fonte em seu projeto? Parece algo assim com variáveis ​​personalizadas:

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

ou talvez em Sass (que é o que usaremos ao longo deste artigo), você pode ter variáveis ​​para $ pequeno, $ médio e $ grandes tamanhos de fontes.

Multar. Depois de um tempo, digamos que o designer adiciona um novo

indo para uma seção de heróis. E é muito grande. Maior do que qualquer coisa que você tenha no projeto. Não tem problema, você responde. Você adiciona um $ xlarge ao projeto e segue o seu dia.

No dia seguinte, o designer é uma boa etiqueta de formulário, que novamente possui um novo tamanho de fonte. Esse novo tamanho, no entanto, é maior que pequeno, mas menor que o meio.

aqui vamos nós.

como você deve chamar? $ pequeno-médio? $ small-2? $ smedium? O que quer que você nomeie, você não ficará feliz com isso. Porque não há palavra para isso.

ou talvez você deva refatorá -lo? Crie um novo $ xsmall e altere todas as instâncias de $ pequeno para $ xsmall? E então você pode usar $ pequeno para o rótulo do formulário? Há um pequeno risco de você esquecer de mudar em algum lugar e, ei, Presto: um bug. O que acontece da próxima vez, quando é introduzido algo que tem um tamanho maior que o valor variável de $ Medium? Temos que refatorar $ grande e $ xlarge também?

sugiro aderir a uma escala, sempre. Uma correção fácil seria ainda mais a abstração, talvez distribuindo números e tamanhos em favor de nomes funcionais, como $ form-label em vez de $ small-2 ou $ xsmall.

Mas imagine ter um conjunto de tamanhos de fonte como este:

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

essa é uma escala quebrada. É um conceito de tamanho e um conceito de componente misturado. Levanta questões. Um alerta ou um botão deve usar $ form-label? Yuck.

talvez você tenha uma coisa grega acontecendo, nomeando as variáveis ​​$ alpha, $ beta, $ gamma? Deixe -me perguntar então, o que é maior que $ alpha? $ Alpha-Large? Ou espere, $ alpha é o pequeno um?

Eu também vi nomes como $ Button-Font-Size, $ Label-Fonte-Size, $ blockquote-font-size. Isso me parece uma variável por elemento usada, em vez de uma escala, e parece que pode ser um monte de código duplicado se o mesmo valor estiver sendo usado em vários lugares, mas com nomes diferentes.

talvez você esteja trabalhando apenas com um tamanho de fonte e porcentagens de base? Claro, mas eu diria que você precisa de variáveis ​​para as porcentagens. É assim que Geoff lida com o tamanho das fontes e até ele admite que a configuração levanta suas próprias sobrancelhas. Os cálculos com variáveis ​​de nome subjetivo podem ser claras para você, mas de aparência louca e complicada para qualquer outra pessoa que entra no projeto.

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

precisamos de um sistema melhor

Adicionando e removendo o material constantemente é a maneira como queremos para trabalhar. Este é o desenvolvimento moderno - MVP , ágil, e todas as outras palavras -palavras quentes.

O que precisamos é uma sintaxe de escala que permite espaço para alterações. Adicionar um novo tamanho à escala deve ser fácil sem introduzir mudanças de ruptura. Estou pensando em um tipo de escala que é flexível e infinita . Deve ser mais sofisticado que $ pequeno, $ médio e $ grande.

também deve ser descritivo e intuitive . De preferência, você não deve procurar os nomes de variáveis ​​no arquivo de configurações ou na configuração, ou onde quer que você armazene essas coisas. Eu não tenho a menor pista se o $ epsilon vier antes ou depois do $ Sigma. Você?

usando sistemas existentes

Antes de tentar inventar algo novo, existe uma sintaxe ou sistema existente que podemos aproveitar? Aqui estão alguns que eu encontrei.

Sistema Internacional de Unidades

Certamente, você está familiarizado com termos como "Kilobyte" e "Megabyte". Os europeus estão muito acostumados a "milímetro" e "centímetro". Outros exemplos são "Giga", "Tera" e "PETA". Esses prefixos podem ser usados ​​para comprimento, peso, volume e muito mais. Um tamanho de fonte de $ Centi poderia funcionar? É intuitivo até certo ponto, ou seja, se você estiver familiarizado com o sistema métrico. Esta é uma escala finita. E não há espaço para adicionar novos tamanhos porque eles já estão definidos.

nomes tradicionais do tamanho de pontos

muito antes da publicação de computadores e desktop, livros e jornais foram impressos com o tipo de chumbo. Os setters de tipo tinham nomes diferentes para tamanhos diferentes. Os tamanhos têm uma referência a um tamanho de ponto (pt) e, em teoria, podem ser usados ​​para tamanhos de pixel (px).

Os tamanhos do tipo neste sistema são chamados de "não -pareil", "pica", "cicero" e "Great Primer", só para citar alguns. Os nomes são diferentes, dependendo do continente e do país. Além disso, o mesmo nome pode ter tamanhos diferentes, então ... bastante confuso.

Dito isso, eu gosto desse sistema de certa forma, porque seria como prestar respeito a um artesanato antigo desde os tempos passados. Mas os nomes são tão estranhos e especificamente destinados ao dimensionamento do tipo, que parece um trecho para usar para coisas como pontos de interrupção e espaçamento.

colocando objetos diários em uma escala

Que tal usar coisas da nossa vida cotidiana? Diga Chili Peppers.

Existem muitos tipos de pimenta. O $ habanero, é mais quente que o $ Cayenne, que é mais quente que o $ jalapeno. Isso seria divertido, sim?

Mas, por mais que eu goste da idéia de escrever-size: $ tabasco, vejo dois problemas. Se você não gosta de pimenta, não pode saber qual pimenta é mais quente que outra pimenta - então, não é universalmente intuitiva. Além disso, o pimentão está 0 na escala de Scoville, e nada está abaixo disso. Carolina Reaper é a pimenta mais quente do mundo, então a escala é finita.

e sim, os pimentões em termos de escala não são maiores ou menores, eles são mais quentes. Conceito ruim. Talvez algo mais comum, como tipos de bolas?

Há uma grande variedade de tipos diferentes de bolas. Você tem handebolas, bolas de futebol, vôlei, etc. Precisa de algo maior que uma bola medicinal? Use $ praia. Algo menor que uma bola de tênis? Use $ pingpong. Isso é muito intuitivo, pois eu imagino que todo mundo jogou com todos os tipos de bolas em algum momento, ou pelo menos estão familiarizados com eles do esporte.

Mas uma bola de pingue -pongue é maior que uma bola de golfe? Quem sabe? Além disso, uma bola de boliche e uma bola de futebol são realmente do mesmo tamanho. Então ... de novo, não perfeito.

Escalando os planetas pode funcionar, mas você teria que ter conhecimento em astronomia.

que tal números diretos? Não podemos usar números sozinhos, porque ferramentas como Stylelinter protestam. Mas algo como este funcionaria:

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

Bem, é infinito, pois sempre há espaço para novas adições. Mas também é incrivelmente específico, e há algumas desvantagens para que o valor real faça parte do nome como esse. Vamos supor que o $ font-18 seja usado em muitos lugares. E agora, eles dizem, todos os lugares com 18px devem ser alterados para 19px (porque razões). Agora, precisamos renomear a variável de $ font-18 para $ font-19 e alterar o valor de $ font-19 de 18px para 19px. E isso é antes de finalmente atualizar todos os lugares usando $ font-18 para $ font-19. É quase como usar CSS bruto. Pontuação baixa para manutenção.

e o reino animal?

A Mãe Natureza forneceu uma infinidade de espécies nesta terra, que é útil nessa situação. Imagine algo assim:

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

precisa de algo menor que um mouse? Use $ bee, $ Ant ou $ FLEA. Maior que um urso? Experimente $ Moose ou $ hippo. Maior que um elefante? Bem, você tem a baleia $, ou diabos, podemos ir pré-históricos e usar $ t-rex. Sempre há um animal para se espremer aqui. Muito versátil, muito intuitivo, também infinito (quase). E divertido também-eu não me importaria de fazer o tamanho de fonte: $ SQUIRREL. ?

Mas, novamente, mesmo isso pode exigir a necessidade de fazer referência às variáveis, a menos que saibamos exatamente quais animais estão contidos em nosso zoológico de tamanhos de fonte. Mas talvez isso não seja um grande negócio, desde que escalar.

gastei muito tempo ponderando isso

ou eu? A base de código é onde você passa seu horário de trabalho. É o seu ambiente de trabalho, assim como cadeiras e monitores. E o local de trabalho deve ser um lugar agradável.

Como você lida com as escalas de tamanho da fonte? Você tem um sistema para fontes e outro para coisas como margens? Alguém pode pular direto no seu código e entender como tudo está organizado? Por favor, diga nos comentários!