Notas sobre o curso CSS for JS Developers do Josh W. Comeau

Inspirado por um colega de curso, Eric howeyh, resolvi montar esse vaso digital (?) com minhas notas sobre o curso. Eu já tinha visto a Maggie Appleton comentar sobre o conceito de Digital Garden (1 2). Achei interessante a ideia e quis fazer o meu também!

Eu comprei o curso CSS for JS Developers que o Josh Comeau lançou essa semana.

Já estava sentindo a necessidade de aprofundar o meu conhecimento em CSS e diminuir os momentos de "Não faço ideia do que está fazendo isso ficar desse jeito e não do jeito que eu quero". Além de, provavelmente, usar muito mais elementos do que deveria para fazer coisas simples, haja div.

Já tinha visto alguns posts dele, o site dele ser tão bom faz lembrar que os posts eram dele nessa multidão de conteúdo sobre tecnologia, e com a recomendação feita pelo Kent C. Dodds resolvi comprar.

Módulo 0 (Terminei)

Recapitulando alguns pontos chave do CSS e necessários para seguir com o curso (talvez preencher alguns gaps).

Uma regra CSS é formada por um seletor e declarações. O seletor pode ser uma tag HTML, uma classe CSS, um ID, entre outros tipos de seletores, isso dita em quais elementos as declarações serão aplicadas. Uma declaração é formada por uma propriedade, como color, por exemplo, e um valor, red, seguindo o exemplo de cor. Há diversas propriedades, bem como valores válidos para essas propriedades. Em algumas delas, o valor pode ser seguido de uma unidade de medida, como px (pixels), %, em. Por exemplo: margin: 5px ou width: 85%.

Media-Queries são uma espécie de if statement do CSS. É possível utilizar com várias propriedades, as mais comuns são min-width, max-width, min-height, max-height, width e height. Assim, utilizando algumas dessas propriedades, é possível condicional algumas regras a um certo tamanho de tela. Por exemplo,

Existem alguns tipos de seletores, como por exemplo: ID, classe CSS e tag HTML. Esses seletores podem ser usados com modificadores, conhecidos como pseudo-classes, combinados com outros seletores ou utilizados em grupo quando queremos aplicar algumas declarações idênticas a mais de um seletor.

Essas pseudo-classes alteram o seletor para que a regra seja aplicada apenas quando o elemento se encontra em determinado estado. Um exemplo é a pseudo-classe :hover. Quando utilizamos esse modificador, o estilo só é aplicado quando o elemento está sendo hovered (O mouse passando por cima dele). São várias as pseudo-classes, uma delas que merece destaque é a :focus. Essa pseudo-classe é bastante importante principalmente em termos de acessibilidade. Algumas vezes, as bordas que são adicionadas, por padrão, aos elementos quando focados fogem da identidade visual do site está sendo desenvolvido, e, por isso, as pessoas acabam removendo-as sem oferecer uma opção. Sendo que esse é um dos estilos essenciais para quem navega pelo site utilizando apenas o teclado ou voz, por exemplo.

A combinação de seletores é bem comum e facilita situações que queremos, por exemplo, selecionar apenas os links que estão dentro do menu de navegação: nav a. Mas pode ser que dentro desse menu tem mútiplos níveis e queremos dar um destaque especial para os links que estão no primeiro nível da tag nav, assim poderíamos utilizar algo como: nav > a.

Quando queremos utilizar as mesmas declarações para diferentes seletores, podemos usar a vírgula entre os seletores. Exemplo:

Copycopy code to clipboard
1button, a {
2  color: hsl(200deg, 100%, 50%)
3}

Assim, os textos dentro dos botões e dos links terão essa cor

Em relação à cores, há mais de uma forma de indicarmos uma cor. Uma das opções é pelo nome da cor, que apesar de ter 140 opções, é bastante limitado quando comparado com as nossas outras opções. Como Hex Color Codes, geralmente, em um formato #123123, são as cores representadas por números na base hexadecimal. Apesar de termos mais opções ao utilizarmos esse modo, ele não nos oferece uma boa navegação entre as cores (quando eu modifico um dos números, para qual cor estou indo?), nem a opção de adicionar transparência. Outra opção possível é o padrão RGB que é uma combinação de vermelho (red), verde(green) e azul(blue), que é possível utilizar transparência com rgba, e a não ser que você foi um ninja do guache nas misturas, bastante imprevisível também ao modificarmos os números. Por último, temos o HSL (Hue, Saturation and Light). Esse apresenta as partes boas dos outros, muitas opções de cores e é possível modificar a opacidade (passando um quarto valor para hsl em todos os browsers menos IE ou utilizando hlsa para funcionar em todos os browsers). E torna mais fácil a navegação dentro de um mesmo tom. Primeiro nós determinamos o tom (hue), com um valor entre 0° e 360°, acredito que não é nessa parte que está a fácil navegação. Mas uma vez que temos o tom que queremos, podemos modificar a saturação e a luz de forma mais previsível. Ou mesmo ao determinarmos uma variação dessa cor para aplicarmos durante o :hover, por exemplo.

Quando falamos sobre unidades de medida, a mais comum é pixels. Ela é a mais intuitiva e de certa forma previsível, seu uso em altura/largura/espaçamentos é o mais comum e mais apropriado. As unidades de medida rem e em são relativas ao font-size, do elemento raiz (html) no caso da primeira, e ao font-size do elemento atual no caso da segunda. A rem é utilizada principalmente para a tipografia por trazer benefícios referentes a acessibilidade. Utilizando rem como font-size respeita as escolhas do usuário quando esse utiliza um font-size diferente do padrão e é uma opção muito melhor do que o uso do zoom. O uso de em em larguras/alturas/espaçamentos acontece em casos raros. Por fim, há a porcentagem, para quando queremos alturas/larguras relativas é a melhor opção. Essas não são todas as unidades de medidas válidas em HTML, mas são as mais comuns.

Em relação à tipografia, há alguns tópicos a serem considerados. Na escolha da fonte, nós escolhemos uma font-family, é chamado de family porque, geralmente, é formado por um conjunto de fontes, com diferentes font-weight (negrito) e potencialmente algumas variantes (como itálico). Essas fontes são separadas em três grupos: *serif*, aquelas que tem traços nas pontas, o uso delas é mais comum em materiais impressos, já na web, geralmente, é utilizada para dar um aspecto de algo antigo. O outro grupo, o mais comum, é *sans-serif* que, basicamente, é sem a serifa, ou seja, sem os cantinhos. E por último, monospace que são as fontes que as letras ocupam o mesmo espaço em largura. Geralmente, essas fontes são as utlizadas ao mostrar código. É bem comum utilizar fontes que não são padrão na maioria dos sistemas operacionais e devem ser baixadas ao visitar o site, Google Fonts acredito que seja o principal serviço em hospedagem de fontes e bastante usado pelas pessoas desenvolvedoras.

Há diferentes opções para estilização de um texto, as mais comuns são negrito, itálico e sublinhado. Há diferentes formas de obtermos esses efeitos, o negrito, por exemplo, obtemos ao modificar a propriedade font-weight do elemento ou ao colocar o elemento dentro de uma tag strong. Apesar do efeito visual ser o mesmo, a semântica é diferente. strong deveria ser utilizado para informações críticas, que não devem ser ignoradas, o que não é o caso de títulos que apenas queremos destacar/deixar mais bonito. É importante levar isso em conta, e ser cuidadoso com o uso desses efeitos. O sublinhado, por exemplo, é históricamente vinculado a links, usar para algo que não é um link pode causar confusão.

As transformações de texto, como, por exemplo, exibir tudo como maiúscula, deve ser usado quando essa escolha é visual. É muito melhor editarmos uma linha de CSS para mudar nossos titúlos de maiúsculas para minúsculas do que ter que revisar o site inteiro quando o design muda.

Para o espaçamento do texto, há duas propriedades. line-height, referente ao espaçamento vertical entre as letras e letter-spacing referente ao espaço horizontal entre as letras. Por questões de acessibilidade, o valor mínimo indicado no uso de line-height é 1,5.

Dando uma olhada nop devtools, além de toda ajuda que o selector (aquele que quando fica azul te deixa escolher um elemento da tela e ver os detalhes dele, estilos e etc) pode trazer, gostei de saber que o Chrome (provavelmente o Firefox também) oferece um Constrast Ratio quando você clica nos detalhes de uma cor, para ser acessível tem que ser mantido acima de 4,5.

Módulo 1 (Rascunho do resumo em andamento)

O segundo módulo é sobre a lógica de renderização praticada pelos browsers.

Os browsers tem algumas configurações padrões de estilo, vale ressaltar que cada um tem a sua, então uma boa prática é resetar essas propriedades para mantermos nosso site consistente em diferentes browsers.

Alguns comportamentos que vale lembrar, é o de herança. Esse mecanismo pode gerar estranheza quando não esperamos que certo elemento apresente estilos que aplicamos a outro, termos em mente que isso acontece é bom porque acontece apenas por padrão apenas com algumas propriedades. Sabendo quais são essas propriedades e até mesmo sabendo aproveitar do mecanismo de inheritance pode nos poupar tempo e trabalho

O algoritmo Cascade é o que calcula quais serão os estilos aplicados a um elemento seguindo a especifidade das regras criadas (seja da seleção ou da declaração). Atualmente a especificidade aplicada segue a ordem: Declarações com !important > Estilos inline (tag style) > Regras aplicadas a seleção pelo ID > Regras aplicadas a seleção feito por classes > Regras aplicadas a seleção feita por tag > Declarações herdadas (properidades com valor inherit). As aplicações React que utilizam Styled Components não utilizam com muita frequencia CSS que se aproveita dessas regras já que o estilo está colado no componente, sem a necessidade de seleção, por exemplo.

A página web tem duas direções:

• Uma delas é a Block que é vertical, ou seja, uma coisa vai em cima da outra.
• E a outra é a Inline, onde uma coisa vai ao lado da outra.

Ser da esquerda para a direita e do topo para baixo são ditados pelo writing-mode. Em idiomas como o árabe, da direita para esquerda é o padrão, ao invés do nosso (da esquerda para a direita).

margin-block-start, margin-inline-start e margin-block-end, são alguns exemplos dos operadores chamados operadores lógicos, por conta dessa variação de direções, eles são úteis. Esses margins, há também paddings e borders, atuam de acordo com o writing-mode. Se o idioma é da direita para a esquerda, o margin-inline-start será a direita e vice-versa. Diferente dos operador margin-left, por exemplo, que sempre será a esquerda.

O chamado Box Model é formado pelo conteúdo, o padding, o border e o margin. Uma propriedade CSS bastante encontrada nos códigos para resetar o CSS dos browsers é a box-sizing. Essa propriedade diz ao browser se o padding e a border estão incluídos nas medidas (width e height) - no caso, quando seu valor é border-box - ou não - quando o seu valor é content-box (para saber mais). Normalmente, utilizamos border-box para todos elementos para facilitar a forma com que pensamos o tamanho dos elementos.

Outline é uma propriedade mostrada por fora da borda, mas ela não ocupa espaço, é como uma sombra. Essa propriedade é bastante importante para usuários que navegam pelo teclado, por exemplo. Apesar de ser muito comum as pessoas removerem essa propriedade (outline: none) por questões estéticas (sem colocar outra coisa no lugar para representar o foco no elemento), é uma péssima prática já que torna a aplicação menos acessível.

Existem diferentes tipos de Layout: Flow (default), Flexbox (Flexible Box) e Grid (CSS Grid).

Todo elemento HTML tem um display intrínseco, seja ele block, inline ou inline-block. No Flow, os elementos inline são dispostos na direção inline (horizonal, no nosso caso), enquanto os elementos block são dispostos na direção vertical.

Se você já tentou adicionar uma propriedade referente ao posicionamento ou as medidas dos elementos inline, você deve ter percebido que simplesmente não funciona. Você pode até manipular através de margin, mas você não consegue alterar a largura ou a altura. Apesar de ser possível adicionar padding a elementos inline, tem que ser cuidadoso porque os efeitos podem ser inesperados.

Alguns elementos são tipo uma subcategoria, os replaced elements (img, video, canvas), apesar de todos serem tecnicamente inline, eles podem afetar como os elementos do tipo block se comportam. A outra exceção são os buttons, eles também podem receber a algura e largura.

Quando você coloca um elemento do tipo block na página, ele ocupa todo o espaço horizontal disponível.

E o inline-block é a junção que vem pra pertimir que você coloque um elemento block em um contexto inline. Podemos, por exemplo, adicionar largura e altura para um elemento strong.

Width pode receber dois tipos de valores, medidas (px, rem, %) ou keywords (auto, fit-content, min-content, max-content). Os elementos do tipo block, por exemplo, tem width como auto, por padrão. Ou seja, o elemento ocupa o máximo de espaço possível horizontalmente.

Já no caso de Height, o padrão é ter o menor valor possível. Podemos considerar que height é mais dinâmico que width e dificilmente queremos determinar uma altura fixa para um elemento (evitando problemas).

Cuidado com uso de porcentagens em altura, como, na maioria dos casos, a altura é dinâmica. O elemento pai terá a altura determinada por quanto os elementos filhos vão ocupar, se usarmos % nas alturas dos filhos vamos chegar a uma situação impossível. Que a altura do pai depende da dos filhos e a dos filhos depende da do pai.

Use 100% height no html e no body (e evite usar em elementos dentro do wrapper) ao invés de vh para evitar situações bizarras no mobile.

Copycopy code to clipboard
1html, body {
2  height: 100%;
3}
4
5.wrapper {
6  display: flex;
7  flex-direction: column;
8  min-height: 100%;
9}
10
11footer {
12  border: solid hotpink;
13  padding: 8px;
14  margin-top: auto;
15}

Módulo 2

Comecei!

Módulo 3

Não comecei

Módulo 4

Não comecei