Anotações sobre CSS

00_css.md

01_boas_praticas.md

Boas Práticas

1. Escrever as propriedades em ordem alfabetica, a fim de padronizar o projeto.

2. Ao selecionar multi seletores, colocar um por linha.

3. Separar cada bloco do outro por uma linha em branco.

4. Declarar clases em lowcase.

5. Quando usar o 0px, manter apenas 0.

6. Usar arquitetura BEM.

7. Não usar id's para aplicar as propriedades. É uma boa prática deixar os id's para o javascript.

8. Adicionar as cores em variáveis, seja via javascript no caso de styled-componentes ou o --var();

9. Não usar as tags para aplicar as propriedades diretamente, pois pode gerar conflitos. Sempre estilize pela classe.

10. Ao usar media-query, de preferencia ao mobile first e quando for o caso, prefira usar o max para não ter que sobrescrever uma propriedade padrão. Exemplo:

❌ Não faça, pois estamos mudando uma propriedade e depois voltando ao seu estado inicial sem necessidade.

.profile__name--active {
  position: absolute.
  
  @media (min-width: 767px) {
    position: static;
  }
}

✔️ Prefira, pois assim vamos mudar essa propriedade apenas em um intervá-lo especifico, sem necessidade de sobrescreve-la.

.profile__name--active {  
  @media (max-width: 767px) {
    position: absolute;
  }
}

9. Evite o !important a todo custo, pois isso atrapalha a organização do código. O "natural" é que as propriedades sejam declaradas de cima para baixo. Ao usar o !important, estamos permitindo que, mesmo que voce "mande" uma propriedade mudar, ela não vai "obedecer", pois o !important sempre terá prevalencia.

10. Prefira sempre dar nome a algo pela natureza do que é, ao invés do que ele parece.

11. Preferir usar o flex para organizar os elementos.

12. Preferir fazer o alinhamento sempre de pai para filho.

13. É uma boa prática referenciar o elemento pai com uma classe.

14. O CSS deve ser carregado primeiro para que o usuário tenha uma boa experiencia. Caso contrário, ele verá todo o html sem estilo enquanto outros recursos estão sendo carregados e depois desse processo o layout aparece bruscamente.

15. O javascript deve ser carregado depois, porque é ele quem manipula o html e css. Ou seja, para fazer isso, essas partes precisam ter sido carregadas anteriormente.

16. Cuidado com comentários que na realidade não nos diz o que o código faz.

17. Cuidado para não declarar classes que realizam a mesma coisa.

18. Não use ID's para aplicar o css, pois eles devem ser unicos e consequentemente esse estilo não poderá ser reutilizado.

19. Cuidado com o amontoado de classes para aplicar um estilo (especificidade).

20. Pense que o código css deve ser reutilizável. Podemos pensar nele como peças de lego.

21. Evite sobrescrever as propriedades css, para não gerar o repaint.

22. Magic numbers são um mal sinal de que o layout não foi construido da melhor forma.

23. Tente minimizar ao máximo a manipulação do DOM para, consequentemente, diminuir o consumo de CPU.

24. Use unidades flexiveis como em para textos e porcentagem para containers.

25. De preferencia para imagens do tipo png.

03_flex.md

Flex

display serve para declarar um elemento como flex. Ao fazer isso, todos os seus elementos filhos passam a ser flex-items.

Quando um flex-item assume a propriedade flex: 1, ele passa a tomar todo o espaço preenchido pelo elemento pai, sem contar no espaço preenchido pelos seus irmãos.

flex-break serve para determinar se os elementos filhos poderão preencher várias linhas de um elemento pai quando este estiver com uma largura limitada.

flex-direction serve para determinar a direção em que os elementos filhos estarão posicionados (linha ou coluna).

flex flow serve para declarar as propriedades flow-direction e flow-break em uma única propriedade.

flex-wrap determina se haverá quebra de elementos filhos dentro do elemento pai.

CSS Grid e FlexBox podem e devem ser usados juntos, mesmo resolvendo questões parecidas, cada uma tem sua especificidade de uso.

• Normalmente, os browsers especificam o tamanho default da fonte do elemento root como 16px.

04_libs.md

Libs e Frameworks CSS

Segue abaixo uma lista de bibliotecas e frameworks que podem nos ajudar a desenvolver o layout de forma mais rápida e dinamica:

⭐ Bootstrap

⭐ Antd

⭐ Materialize

Frameworks ou css puro?

• O uso de framework é uma boa prática quando estamos montando um dashboard interno.

• Os frameworks já são desenvolvidos com a preocupação com a questão da compatibilidade entre diferentes tipos de navegadores, então, ao utilizá-los, não precisamos nos preocupar com essa questão como acontece ao utilizarmos as propriedades do css.

• Alguns parametros de css mais novas não são compativeis com os browsers mais antigos.

• Ao usar um framework, não precisamos "reinventar a roda"

05_responsive.md

• A maioria dos dispositivos moveis se adequam entre 320px a 480px.

• O primeiro passo para se começar a trabalhar com designs responsivos é fazer a transição de elementos fixos - de dimensões fixadas em px - para elementos fluídos - que se baseiam em porcentagens e em ou rem.

• A conversão de tamanhos fixos para fuídos é feita com base em uma fórmula bastante simples: "tamanho fixo" / "contexto" = "tamanho fluído"

• Medias query não funcionam para carregar imagens resposivas.

• No mundo real priorizamos o suporte para o máximo ou minimo possivel dentro dos critérios de aceite do projeto. Por exemplo: em um projeto interno de uma empresa que só pode ser acessado via VPN, será que faz sentido nos preocuparmos tanto com a versão mobile deste projeto?

06_animations.md

• Passando a responsabilidade de todo o trabalho pesado para os navegadores, conseguimos efeitos de maior qualidade com uma taxa menor de bugs.

• Caso voce precise trabalhar com navegadores sem suporte, sempre teste suas páginas sem os efeitos de transform para confirmar que elas continuam funcionais.

• transitioned: é um evendo disparado após a finalização de transição de uma propriedade css.

Transform: transformando posição e forma de elementos

• translate: move um elemento nos eixos x e y;

• scale: altera a proporção de tamanho de um elemento, podendo dobrar de tamanho ou diminuir pela metade, por exemplo;

• skew: permite torcer ou esticar um elemento;

• rotate: permite rotacionar um elemento; Recebe um valor em graus; Passando um valor negativo podemos rotacionar no sentido anti-horário, enquanto valores positivos são para o sentido horário;

• matriz:

Transition: transformando estilos

Esta propriedade permite adicionar efeitos de transformação enquanto uma propriedade é mudada de estado. Esta propriedade recebe as seguintes definições:

• transition-property:

• transition-duration:

• transition-timing-functions:

• transition-delay:

Para usar os propriedades rotate e translate juntos:

transform: translate(-50%, -50%), rotate(45deg);

07_about.md

Box Shadow

• Contém duas sombras bastante distintas - a primeira é uma sombra interna (atente-se ao inset) para clarear um pouco o topo do botão. A segunda, em volta do elemento, para demonstrar um certo brilho ao seu redor.

08_pseudo_elements.md

Propriedade	Quando acionado	HTML
:hover	ao passar o mouser por cima
:active
:visited
:disabled	é definido via código	button, a, input

09_unidades.md

Unidades de Medidas

PX

Apresenta uma medida absoluta que não muda conforme outras medidas. É ruim utilizá-la quando queremos um layout mais fluido. É bom usar quando vamos delimitar um tamanho que já conhecemos e não irá mudar.

Points (pt)

É uma medida absoluta bastante conhecida pelos designers pois é usada em tipografia e folha de estilos para impressão, apenas de não ser muito aplicada hoje em dia. Não utilizar em estilizações em tela. São medidas mais precisas. Medidas parecidas com essa são o centímetro e milímetro (cm/mm).

Paica (pc)

É uma medida absoluta herdada da tipografia mas pouco utilizada.

Ems (em)

É uma medida relativa suportada em browsers antigos como o IE. Ela muda o tamanho do filho em relação ao pai:

Como o em funciona baseado no elemento pai:

.pai { font-size: 10px; }
.filho { font-size: .8rem; } /* Terá 8px */
.irmao { font-size: 1.2rem; } /* Terá 12px */

Se o tamanho do pai mudar, os filhos mudam automaticamente, sem necessidade de alteração:

.pai { font-size: 20px; }
.filho { font-size: .8rem; } /* Terá 16px */
.irmao { font-size: 1.2rem; } /* Terá 24px */

Rems (rem, "root em")

É uma medida relativa que é mais suportada em browsers modernos e tem o funcionamento bem parecido com o em.

Porcentagem (%)

Não é uma medida, mas permite com que controlemos o tamanho dos elementos. Por exemplo, podemos dizer que um elemento terá 50% de largura.

Ex

O uso dessa unidade está mais presente em ajustes tipográficos, nos dando um controle mais preciso quando o padrão definido para algumas tags não se adéqua corretamente ao nosso layout.

Ch (character unit)

Vw (viewport width)

Viewport é a área visível de uma página web para o usuário que varia conforme o disposítivo, sendo menor em celulares e maior em desktops. Essa unidade se relaciona diretamente com a largura da viewport, onde 1vw representa 1% do tamanho da largura dessa área visível. A diferença entre vw e a % é bem semelhante a diferença entre em e rem, onde a % é relativa ao contexto local do elemento e o vw é relativo ao tamanho total da largura da viewport do usuário.

Vh (viewport height)

Item ao descrito acima, mas para altura.

Vmin (viewport minimun)

Diferente das 2 medidas citadas acima, o vmin utilizará como base a menor dimensão da viewport (altura x largura). Exemplo:

Imagine que estamos trabalhando com uma viewport de 1600px de altura e 900px de largura. Nesse caso, 1vmin terá o valor de 9px (1% da menor dimensão), caso tenhamos 100vmin, esse será igual a 900px. Se a menor dimensão passar a ser a altura, com 300px e 1400px de largura, nosso valor de referencia seria o 300px.

Vmax (viewport maximum)

Seguindo a mesma base lógica da unidade anterior, o vmax terá como valor de referencia a maior dimensão da viewport.

⚠️ Na versão 9.0 do IE, o vmin foi implmentado com um nome diferenciado (vm). Algumas versões do IE ainda não oferecem suporte para o vmax, nas novas versões isso foi corrigido.

10_position.md

O posicionamento padrão de todo elemento é estático, ou seja, static.

Atributo	Descrição
static	ignora as coordenadas
fixed	o elemento não se move com scroll, permanece fixo na tela
sticky	o elemento permanece fixo em relação ao scroll da página
relative	posiciona o elemento usando ele mesmo como referença
absolute	posiciona o elemento usando o elemento pai mais próximo que possua o relative ou absolute

11_clones.md

Landpages legais para clonar :)

⭐ Selena Gomez website home page

⭐ WE ARE PINK - Victoria Secret

⭐ Starbucks rewards

⭐ Nike

⭐ Playboy

⭐ HEINEKEN

⭐ Justin Bieber website tuor

⭐ Fitdance Store

⭐ Tinder

⭐ Nubank

⭐ Olist

⭐ Tim

⭐ Quora

⭐ DEGREED

⭐ Chillibeans - Marca

⭐ RD Station

12_switch.md

---

Switch

O código original para gerar esse switch está página do Catalin. Fiz algumas adaptações para usarmos menos "magic numbers".

HTML

<input type="checkbox" id="switch" />
<label for="switch"></label>

CSS

/* Esconde campo de checkbox */
input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  /* Medidas absolutas */
  width: 200px;
  height: 100px;
  background-color: yellow;
  display: block;
  border-radius: 100px;
  position: relative;
}

/* Circulo */
label:after {
  content: "";
  position: absolute;
  top: 5%;
  left: 2.5%;
  width: 45%;
  height: 90%;
  background-color: red;
  border-radius: 50%;
  transition: 0.3s;
}

/* Seleciona irmão quando o input for checked */
input:checked + label {
  background-color: palevioletred;
}

/* Seleciona pseudo elemento do 
irmão quando input for checked */
input:checked + label:after {
  left: calc(100% - 2.5%);
  transform: translateX(-100%);
}

/* Seleciona pseudo elemento quando pressionarmos
o label, gerando um efeito de estique */
label:active:after {
  width: 65%;
}

Calculos

1. Medidas fixas

2. Medidas em porcentagem

Altura do Circulo como o pseudo elemento ::after tem uma posição relativa ao label, podemos calcular sua altura como sendo 90px / 100px => 0.9 = 90%

Largura do Circulo: considerando o mesmo cenário anterior, a largura deve ser calculada usando como referencia a largura total do label, ou seja, 90px / 200px => 0.45 = 45%

Espaçamento interno superior: considerando a altura do label, podemos ter 5px / 100px = 0.05 = 5%

Espaçamento interno à esquerda: considerando a largura do label, podemos ter 5px / 200px = 0.025 = 2.5%

3. Deslocamento do circulo

Ao clicar no switch, esperamos que o label se desloque e mude de cor para indicar esse evento. Para deixar a bolinha com a mesma distancia à direita que tinhamos à esquerda, podemos usar como referencia a largura total do label, ou seja, 100% - 2.5% (espaçamento à esquerda) = 97.5%

Resultado

Considerações

🌟 A vantagem de evitar os magic numbers é que ao mudar alguma medida fixa, mas que seja absoluta, todos os elementos filhos manterão a proporção, o que ajuda a manter o layout responsivo com mais facilidade e sem dor de cabeça de ficar reajustando os valores em pixel.

🌟 Foi possivel calcular a largura do circulo como sendo 45%, mas, se mudarmos a largura absoluta do switch (de 200px para 300px por exemplo), ele passará a ficar desproporcial, porque na realidade não queremos isso. Esse seria um valor que seria interessante deixar fixo dependendo do contexto, e o mesmo vale para a altura, como consequentemente.

random.md

• Colisão de estilos é a maior causa de problemas quando trabalhamos com CSS em grandes projetos

• É importante levar em conta a performance dos seletores em diferentes browsers na hora de escrever o código.

• 80% da performance depende do frontend e ela deve ser uma preocupação desde o scopo do projeto. Existem muitas decisões de UX que podem influenciar nisso.

• Selecionando apenas links seguros:

a[href='https://']

• Performance é fundamental, mas não se esqueça que um código que não tem foco em manutenção e escalabilidade pode gerar gambiarras que automaticament não interferir na performance.

• Um seletor .header .nav li a é ruim para performance e te deixa travado. Já colocar uma classe .nav-link no a e referenciar diretamente no css faz mais sentido

Mostrando mensagens de um formulário a medida com que vamos selecionando os campos apenas com css:

.message {
  display: none;
}

input:focus + .message, textarea:focus + .message {
  display: inline-block;
}

Devido a problemas de compatibilidades, navegadores diferentes dão um nome diferente para o mesmo seletor, então precisamos especificar todos eles.

-webskit /* safari e google chrome */
-moz e -ms /* mozilla firefox e internet explorer */

Estilizando scroll

**:: - webkit-scrollbar** a barra de rolagem.
**:: - webkit-scrollbar-button** os botões da barra de rolagem (setas apontando para cima e para baixo).
**:: - webkit-scrollbar-thumb** a alça de rolagem arrastável.
**:: - webkit-scrollbar-rastreia** a trilha (barra de progresso) da barra de rolagem.
**:: - webkit-scrollbar-track-piece** a trilha (barra de progresso) NÃO coberta pela alça.
**:: - webkit-scrollbar-corner** o canto inferior da barra de rolagem, onde ambas as barras de rolagem horizontal e vertical se encontram.
**:: - webkit-resizer** a alça de redimensionamento arrastável que aparece no canto inferior de alguns elementos.

Conseguimos verificar o suporte de algumas coisas com o próprio js e adicionar funcionalidades para o caso de algo não ser suportado em determinado browser.

Blurry Rendering: dispositivos de baixa resolução.

min(601px, 100%) [O que isso significa afinal?]

Processo de construção da arvore de estilos

1. O browser monta o DOM (árvore) a partir do html.

2. O browser monta o CSSOM (árvore) a partir do css.

3. O browser une as árvores DOM e CSSOM formando como resultado o Render Tree.

4. É calculado a geometria dos elementos e os posiciona na tela.

5. É realizado o processo de paint, fornecendo cor aos elementos.

É possivel usar o devtools para monitar esse processo e evitar gargalos.

Reflow

Quando o browser precisa reposicionar um elemento do DOM por conta de uma ação do usuário ou execução do javascript, é consumido mais CPU pois muda a estrutura do documento.

Repaint

Quando o browser precisa pintar ou desenhar novamente um elemento, sem considerar sua posição.

---

• Tamanho da tela (viewport), tamanho da imagem, dimensões do arquivo, densidade da tela (com ou sem retina) são fatores que vão determinar qual a melhor imagem a ser usada na aplicação.

• Não podemos esquecer que nos celular as pessoas não dispoem de muita CPU, memória, banda de dados para carregar imagens com alta resolução.

• O navegador é muito mais inteligente que voce, então deixe que ele faça seu trabalho.

• Sempre usar a tag img com o atributo src, pois caso os atributos mais novos como sizes, scrset não funcionem em algum navegador, este poderá colocar a imagem definida em src.

Shorthand

É o nome dado para propriedades que podem ser escritas de forma abreviada.

Exemplo para fontes:

font-style: italic;
font-weight: bold;
font-size: 8rem;
line-height: 1.2;
font-family: Arial, sans-serif;

Podemos escrever de forma abreviada:

font: font-style font-weight font-size/line-height font-family;

font: italic bold 8rem/1.2 Arial, sans-serif;

Para capturar o primeiro filho a partir do pai, sem capturar todos os primeiros filhos dos filhos:

& > div {...}

drag (arrastar), drop (soltar)

Efeito typewritter (máquina de escrever)

Overflow

Ao colocarmos a propriedade overflow: hidden garantimos que nosso conteúdo, ou seja, as letras do texto não serão mostradas todas de uma vez e esperarão a animação ocorrer.

White-Space

Utilizando a propriedade white-space: nowrap garantimos que a linha não quebre.