Filosofia CSS

Olá pessoal! Chegou a hora de anunciar que planejamos lançar um novo livro de CSS antes do final de fevereiro, recomendado para todos que já dominaram o MacFarland (enquanto ainda estiver disponível, planejamos fazer a próxima sobrepressão em janeiro).

Hoje você está convidado a traduzir um artigo de Keith Grant (publicado em junho), no qual o autor expõe seu ponto de vista sobre CSS e explica realmente o que ele queria falar em seu livro. Nós lemos e comentamos!



Passei muito tempo pensando no que é o pensamento orientado para CSS. Parece que alguns conseguem "aprender", enquanto outros não. Eu acho que se eu pudesse articular claramente qual é essa visão de mundo, talvez o próprio CSS se torne mais compreensível para quem trabalha com eles. É em parte por isso que me sentei e escrevi o livro CSS for Professionals.

Hoje eu quero abordar esse problema mais uma vez. Considere três recursos principais de CSS que distinguem essa linguagem das linguagens de programação tradicionais. CSS é persistente, declarativo e contextual. Eu acho que entender esses aspectos da linguagem é um pré-requisito essencial para se tornar um mestre de CSS.

Resistente a CSS

Se você excluir acidentalmente um pedaço de código em um arquivo JavaScript, o aplicativo ou página da web em que é usado quase certamente trava ou congela, e o script (ou até a página inteira) falha. Se você fizer o mesmo em CSS, poderá não notar nada. Quase todos os outros códigos, exceto o fragmento excluído, continuarão funcionando como deveriam.

Essa propriedade é chamada resiliência. HTML e CSS são projetados especialmente com a expectativa de tolerância a falhas. Se ocorrer um problema, o navegador emitirá um erro; caso contrário, simplesmente ignora essa parte do código e vai além.

Do ponto de vista da depuração, isso pode parecer absurdo: se um programa não gera erros, como podemos descobrir que algo deu errado? Mas este é o aspecto mais importante do dispositivo CSS. É tecido no tecido da própria língua. Eu admito, leva tempo para se acostumar. No entanto, assim que você entender isso, poderá prosseguir com segurança usando os recursos que não são suportados em todos os navegadores. É assim que o desenvolvimento progressivo de um site ou aplicativo é garantido.

Considere este exemplo com um layout de malha. Ele funciona tanto em navegadores que suportam a grade quanto em navegadores que não suportam a grade. Nos navegadores em que a grade não é suportada, o layout ficará um pouco irregular (os tamanhos exatos dos elementos podem variar), mas a página ainda será organizada aproximadamente como deveria:

.portfolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .portfolio__item { display: inline-block; max-width: 600px; } 

Um navegador que não entende as duas declarações da grade irá ignorá-las e será possível concluir o trabalho graças a outras regras. Por sua vez, o navegador que entende a grade usa o layout da grade e ignora a declaração de bloco embutido (pois é assim que a grade é projetada para funcionar). Jen Simmons, brincando, chama esse fenômeno de " CSS quântico ". Você usa alguma capacidade de CSS e “usa e não usa ao mesmo tempo. Mas funciona simultaneamente e não funciona. ”

Esse fenômeno do comportamento de "segurança" é parte integrante do trabalho com CSS, mas é estranho à maioria das linguagens de programação tradicionais.

CSS declarativo

Em JavaScript, escrevemos instruções passo a passo específicas descrevendo como o programa deve chegar a algum resultado. Em CSS, você diz ao navegador exatamente o que deseja ver na tela, e o navegador encontra uma maneira de fazer isso. Compreender isso é muito importante. Se você aprender isso, o CSS fará todo o trabalho duro por você e, se não aprender, terá a essência do CSS e ficará desapontado várias vezes.

Ao escrever CSS, você está realmente configurando um sistema de restrição. Não indicamos ao navegador onde cada elemento específico deve estar na página, mas informamos qual deve ser o recuo entre eles, após o qual o próprio navegador coloca tudo em seu lugar. Você não diz ao navegador (pelo menos não deve indicar) qual altura o contêiner deve ter. Você permite que o navegador determine isso durante a exibição em si, quando conhece o conteúdo do contêiner, sabe quais outros estilos são usados ​​nesse contexto e qual é a largura disponível da viewport.

Você precisa considerar muitas variáveis. A essência do CSS é organizar o processo para que você não precise se preocupar com todas essas variáveis. Defina um sistema de restrições. A própria linguagem cuida dos detalhes.

Exemplo simples

Vejamos um exemplo de CSS: font-size: 2em . O que esse código faz? "Aumenta o tamanho da fonte", você diz. Mas isso não é tudo. Ele também corrige a hifenização das linhas de texto dentro do contêiner, já que agora menos palavras cabem em cada linha. Consequentemente, isso geralmente aumenta o número de linhas de texto e também aumenta a altura do contêiner, para que essas novas linhas se encaixem nele. Quando você altera a altura do contêiner, todo o texto localizado na página abaixo desse contêiner será alterado de acordo. Finalmente, o código acima também define o valor local em . Os valores de todas as outras propriedades usadas para determinar as unidades terão que ser recalculados.

Somente este anúncio gera uma série de mudanças na página. E todos eles são projetados para atingir exatamente o que você deve buscar: o conteúdo sempre se encaixa na página, os elementos não se sobrepõem e todas as propriedades que dependem do tamanho da fonte são corrigidas (por exemplo, recuo). Você não precisa pensar em todos esses detalhes. O próprio navegador executa todos os cálculos acima e faz isso por padrão.

Se você deseja que nada disso aconteça, também pode fazê-lo. Você pode limitar severamente a altura de um contêiner com as propriedades max-height e overflow: auto . Você pode redefinir as margens internas para que sejam medidas em unidades de rem ou px , ou seja, não sejam recontadas após o tamanho da fonte. Isso revela um aspecto interessante do trabalho com CSS: às vezes você não diz ao navegador o que deve fazer, mas, de fato, o proíbe de fazer qualquer coisa.

Vantagens da rede

No entanto, existem novos recursos em CSS que são ainda mais legais. Os exemplos mais comuns são Flexbox e Grid. Apenas alguns anúncios - e você tem um layout de malha excepcionalmente flexível que simplesmente funciona. Não há necessidade de se preocupar com vários casos especiais. Na verdade, você diz ao navegador: "empilhe esses blocos em colunas de 400 pixels de largura cada" e o navegador fará isso por você. Tudo sobre tudo requer cerca de três linhas de código.

Se você tentasse fazer isso imperativamente, teria que lidar com muitos cenários estranhos. E se um dos blocos receber uma palavra muito longa? E se a janela de exibição for muito estreita? E se for muito largo? E se houver uma folha inteira de conteúdo em um elemento e apenas algumas palavras em outro? É verdade que, em CSS, você não precisa pensar nisso. Tudo já foi pensado para você e estabelecido nas especificações, e o navegador segue as regras para você. Este é o poder da linguagem declarativa.

Claro, isso não é isento de compromissos. Se a linguagem declarativa não suportar nenhum dos recursos de que você precisa (por exemplo, "ponte"), resta contar com os truques do avô ou com o JavaScript. Além disso, o desenvolvimento do CSS tem sido amplamente dedicado à luta contra essas coisas há muitos anos. Felizmente, com o desenvolvimento do Flexbox e do Grid, podemos fazer muito mais e sem hacks (sim, elementos soltos são um hack). Se você ainda não tiver algo nessa situação, recomendo ler sobre CSS Houdini , que está começando a criar raízes nos navegadores.

CSS é sensível ao contexto

Na era React, adotamos uma abordagem extremamente prática: desenvolvimento modular baseado em componentes. Está em conformidade com as melhores práticas de CSS, juntamente com o BEM, SMACSS e CSS-in-JS. Não quero subestimar a importância de todos esses recursos, pois eles desempenham um papel fundamental na criação de aplicativos em larga escala. Mas acho que é igualmente importante reconhecer que o CSS não é 100% modular e não deveria ser.
Existem duas razões para isso. O primeiro e mais óbvio - o aplicativo deve ser projetado em estilos globais. Quase sempre, você precisa definir o tamanho do fone de ouvido e da fonte no nível da página, que será usado por padrão. Depois disso, esses valores serão herdados por todos os elementos descendentes que não os substituirão explicitamente. Você também precisa que alguns aspectos do seu design sejam aplicados sistematicamente em toda a página: tema de cores, raios de arredondamento para blocos, sombreamento de blocos e tamanhos gerais de margem. Estilos mais locais que atuam em partes da página são aplicados no contexto desses estilos globais.

O segundo motivo, mais sutil, é que o CSS e suas decisões de design dependem do contexto da página. Suponha que aplicemos os seguintes estilos CSS a um elemento em uma página:

 .the-thing { position: absolute; top: 10px; left: 10px; } 

O que esse código fará? Sem saber exatamente onde esse elemento está localizado no DOM e quais estilos são aplicados no restante da página, não podemos responder a essa pergunta. O posicionamento absoluto é feito em relação ao elemento ancestral mais próximo, e esse posicionamento será diferente dependendo do tipo de ancestral em questão e de que tipo de posicionamento foi aplicado a ele.

Além disso, sua capacidade (ou impossibilidade) de sobrepor elementos um ao outro dependerá em grande parte de onde esses dois elementos estão localizados no DOM. A reprodução aleatória de elementos no DOM pode afetar drasticamente o layout dos elementos e como eles se sobrepõem. É por isso que os contextos de fluxo e sobreposição de documentos são tópicos fundamentais (embora às vezes complexos).

A natureza contextual do CSS deve-se em parte ao fato de que é assim que o design funciona. Se um engenheiro projetar uma ponte, você não pode simplesmente olhar para o desenho e dizer: "está tudo bem, mas eu não gosto dessa viga; leve-a embora. " Se você remover uma viga, isso afetará a unidade estrutural de toda a ponte. Da mesma forma, basta alterar qualquer elemento de design - e todos os outros elementos na tela serão percebidos de maneira diferente. Muitas vezes, é necessário elaborar vários elementos ao mesmo tempo, em estreita união entre si.

Por exemplo, se você aumentar o título em um dos blocos, ele ficará mais aparente para o usuário e, por isso, outros elementos na tela parecerão menos importantes. Aqui as limitações não estão no plano da física, como na construção da ponte; estamos falando de leis mais "humanitárias" que afetam a percepção humana. Os elementos da página são refletidos na tela, que possui características físicas próprias e, ao trabalhar, é necessário levar em consideração as realidades do mundo físico e como nós o percebemos.

Como você sabe, a arquitetura do software está sujeita aos princípios de modularidade e encapsulamento . Essa abordagem é justificada no nível do código, pois o código é complexo e o método descrito permite que você divida o problema em fragmentos digeríveis. No entanto, deve-se ter em mente que essa abordagem é imperfeita. Em CSS, você nunca pode ignorar completamente o que está acontecendo em um módulo específico.

Sumário

Os três aspectos descritos distinguem o CSS das linguagens de programação tradicionais. Essas diferenças podem não se encaixar imediatamente na sua cabeça, mas são os aspectos mais poderosos do CSS. Atrevo-me a sugerir que os desenvolvedores que conseguirem entender e entender adequadamente esses princípios alcançarão alturas reais em CSS.