Apostila - Módulo 1 - Bootcamp Desenvolvedor(a) Front End

Prévia do material em texto

Design para Front End 
Rafaela Santos de Paula Marcolino 
 
 
 
 
 
 
 
2022 
 
 
 
2 
 
 
Design para Front End Bootcamp 
Bootcamp: Desenvolvedor(a) Front End 
Rafaela Santos de Paula Marcolino 
© Copyright do Instituto de Gestão e Tecnologia da Informação. 
Todos os direitos reservados. 
 
 
 
 
3 
Sumário 
Capítulo 1. HTML Semântico ...................................................................................... 7 
Elementos de Seção ...................................................................................................... 8 
Elementos de Agrupamento (ou de Nível de Parágrafo) ............................................ 10 
Elementos de Nível de Texto ...................................................................................... 11 
Capítulo 2. Abordagem (ou mindset) de desenvolvimento ..................................... 15 
Graceful Degradation .................................................................................................. 15 
Progressive Enhancement .......................................................................................... 15 
Progressive Enhancement VS Graceful Degradation .................................................. 16 
Capítulo 3. Acessibilidade (WCAG) ........................................................................... 19 
Aural StyleSheets ........................................................................................................ 21 
Por que se preocupar com acessibilidade? ................................................................ 23 
Capítulo 4. Metodologias CSS .................................................................................. 24 
OOCSS ......................................................................................................................... 24 
SMACSS ....................................................................................................................... 26 
BEM ............................................................................................................................. 28 
Outras metodologias .................................................................................................. 29 
Capítulo 5. Boas Práticas em Desenvolvimento ....................................................... 30 
Boas Práticas: HTML ................................................................................................... 30 
Boas Práticas: CSS ....................................................................................................... 31 
Boas Práticas: JavaScript ............................................................................................. 33 
Boas Práticas: Acessibilidade ...................................................................................... 34 
 
 
 
4 
Boas Práticas: Performance ........................................................................................ 36 
Capítulo 6. CSS Estilos .............................................................................................. 38 
Propriedades CSS ........................................................................................................ 38 
Modelo de Caixa CSS ................................................................................................... 39 
Seletores ..................................................................................................................... 40 
Funções ....................................................................................................................... 42 
Capítulo 7. CSS Pseudo atributos ............................................................................. 43 
Pseudo-classes ............................................................................................................ 43 
Pseudo-seletores ........................................................................................................ 44 
Pseudo-elementos ...................................................................................................... 45 
Capítulo 8. CSS Animações ....................................................................................... 46 
CSS Transform ............................................................................................................. 46 
CSS Animation ............................................................................................................. 47 
Exemplos de animação ............................................................................................... 50 
Capítulo 9. Noções de UI e UX.................................................................................. 53 
Design Systems ........................................................................................................... 58 
Atomic Design ............................................................................................................. 62 
Vantagens em usar o Atomic Design ...................................................................... 66 
Capítulo 10. CSS Layout .............................................................................................. 67 
Fluxo normal do CSS ................................................................................................... 67 
Os primórdios do layout web ..................................................................................... 68 
CSS Flexbox ................................................................................................................. 69 
CSS Grid ....................................................................................................................... 72 
 
 
 
5 
Capítulo 11. Técnicas de Design Responsivo.............................................................. 76 
Responsive Design ...................................................................................................... 76 
Adaptive Design .......................................................................................................... 77 
Responsive vs Adaptive Design ................................................................................... 78 
Capítulo 12. CSS User agent Styles ............................................................................. 79 
CSS Normalize ............................................................................................................. 79 
CSS Reset ..................................................................................................................... 80 
Normalize CSS & Reset CSS ......................................................................................... 81 
Capítulo 13. Framework CSS ...................................................................................... 82 
Bootstrap .................................................................................................................... 82 
Foundation .................................................................................................................. 83 
Materialize .................................................................................................................. 84 
Bulma .......................................................................................................................... 85 
Tailwind ....................................................................................................................... 85 
Capítulo 14. Pré-processadores CSS ........................................................................... 87 
SASS ............................................................................................................................. 88 
Outros pré-processadores .......................................................................................... 91 
Capítulo 15. CSS-in-JS ................................................................................................. 92 
Styled Components .....................................................................................................93 
Capítulo 16. Técnicas de Debugging .......................................................................... 96 
Conhecendo o Chrome DevTools ............................................................................... 96 
Elements ..................................................................................................................... 96 
Console ........................................................................................................................ 98 
 
 
 
6 
Sources ...................................................................................................................... 100 
Network .................................................................................................................... 102 
Capítulo 17. Sete passos para Debugging ................................................................104 
Etapa 1: Reproduzir o Código ................................................................................... 104 
Etapa 2: Acessar o Chrome DevTools ....................................................................... 105 
Etapa 3: Pausar o código com Breakpoints .............................................................. 105 
Etapa 4: Percorrer o código ...................................................................................... 108 
Etapa 5: Definir um ponto de interrupção da linha de código ................................. 109 
Etapa 6: Conferir valores das Variáveis .................................................................... 110 
Etapa 7: Aplicar uma correção .................................................................................. 114 
Referências 115 
 
 
 
 
 
 
 
 
 
7 
Capítulo 1. HTML Semântico 
A maioria dos sites segue convenções estruturais razoavelmente padronizadas; 
áreas típicas incluem um cabeçalho, um rodapé, uma barra lateral, uma barra de 
navegação e assim por diante. Como autores da web, vamos muitas vezes nomear os 
elementos div que usamos para designar mais claramente essas áreas (por exemplo, 
<div class="header">). No entanto, no que diz respeito ao próprio código, qualquer 
agente de usuário – e isso inclui um navegador da web, leitor de tela ou rastreador de 
mecanismo de pesquisa – que analisar esse conteúdo, não poderia dizer com certeza 
qual o propósito de cada um desses elementos div. HTML5 resolve esse problema com 
novos elementos semânticos. 
Em termos de especificação HTML, seus elementos se enquadram em um dos 
três grupos: 
 Elementos de seção, para os traços mais amplos em uma página HTML. Estes são 
os tipos de elementos a serem usados nas áreas de cabeçalho, rodapé e barra 
lateral. 
 Elementos de agrupamento (ou de nível de parágrafo), que são usados para 
agrupar elementos associados, como parágrafos, blockquotes e outros 
conteúdos dessa natureza. 
 Elementos em nível de texto, que são os elementos que usamos para designar 
áreas especiais (ênfase), como uma seção de texto ou código em negrito ou 
itálico. 
É de suma importância utilizar corretamente cada elemento para deixar claro 
o objetivo do conteúdo em si. 
 
 
 
 
 
 
 
8 
Elementos de Seção 
 <main>: 
o A tag <main> define o conteúdo principal da página; 
o A área de conteúdo principal de um documento inclui conteúdo 
exclusivo para aquele documento e exclui o conteúdo que se repete em 
um conjunto de documentos, como links de navegação, informações de 
direitos autorais, logotipos e banners do site; 
o Só pode haver um elemento <main> em um documento HTML e ele não 
deve ser usado como um elemento filho descendente de alguns dos 
outros elementos semânticos do HTML5. 
 <header>: 
o A tag <header> pode ser usada para a área principal do cabeçalho de um 
site, mas também como uma introdução a outro conteúdo, como uma 
seção de introdução em um elemento <article>, por exemplo; 
o É possível usá-lo quantas vezes forem necessárias na mesma página: 
poderia ter um <header> dentro de cada <seção> em sua página, por 
exemplo. 
 <footer>: 
o A tag <footer> pode ser usada para a área principal do rodapé de um 
site, mas também como um conteúdo complementar ao final de outro 
conteúdo principal, como uma seção de links ou de copyright em um 
elemento <article>, por exemplo; 
 
 
 
 
 
 
 
9 
o É possível usá-lo quantas vezes forem necessárias na mesma página: 
poderia ter um <footer> dentro de cada <seção> em sua página, por 
exemplo. 
 <aside>: 
o A tag <aside> é usada para conteúdo que está tangencialmente 
relacionado ao conteúdo ao seu redor; 
o Em termos práticos, é comumente usada para barras laterais ou 
conteúdo como uma “dica” sobre um assunto relacionado em uma 
postagem de blog. 
 <section>: 
o A tag <section> é usada para definir uma seção genérica de um 
documento ou aplicação; 
o É usado como o elemento que agrega um determinado componente 
visual, por exemplo: seção de contato, seção de feed etc. 
 <article>: 
o A tag <article> é usada para envolver uma parte independente do 
conteúdo, ou seja, o conteúdo que você pretende usar em uma tag 
<article> pode ser copiado e colado em um site diferente e ainda assim 
fazer todo o sentido. 
 <nav>: 
o A tag <nav> é usada para envolver os principais links de navegação para 
outras páginas ou partes da mesma página. 
 
 
 
 
 
 
 
10 
Elementos de Agrupamento (ou de Nível de Parágrafo) 
 <p>: 
o A tag <p> representa um parágrafo. 
 <blockquote>: 
o A tag <blockquote> representa uma seção que é citada de outra fonte. 
 <hr>: 
o A tag <hr> representa uma quebra temática de nível de parágrafo, por 
exemplo, uma mudança de cena em uma história ou uma transição para 
outro tópico dentro de uma seção de um livro de referência; 
o Ela não deve ser usada apenas como uma linha decorativa. 
 <ol>: 
o A tag <ol> representa uma lista ordenada; 
o Os itens da lista <li> são elementos filhos do elemento <ol> e possuem 
três atributos: reversed (lista descendente), start (inicia a contagem a 
partir de um determinado número) e type (especifica o tipo de marcador 
a ser usado na lista). 
 <ul>: 
o A tag <ul> representa uma lista não ordenada; 
o Os itens da lista <li> são elementos filhos do elemento <ul>. 
 
 
 
 
 
 
 
 
11 
 <dl>: 
o A tag <dl> representa uma lista de descrição consistindo em zero ou mais 
grupos nome-valor; 
o Um grupo nome-valor consiste em um ou mais nomes (<dt>) seguidos 
por um ou mais valores (<dd>); 
o Em um único <dl>, não deve haver mais de um <dt> para cada nome. 
 <figure>: 
o A tag <figure> representa algum conteúdo de fluxo (opcionalmente com 
uma legenda) que pode ser usada para fazer anotações em ilustrações, 
diagramas, fotos, listagens de código etc. 
 <figcaption>: 
o A tag <figcaption> representa uma legenda ou legenda para o resto do 
conteúdo do elemento pai <figure> do elemento <figcaption>. 
 <div>: 
o A tag <div> não tem um significado em especial, ele é usado para agrupar 
algo sem um significado especial. 
Elementos de Nível de Texto 
 <a>: 
o A tag <a> é usada para vincular o documento em que o usuário está para 
outro documento na internet, ou para vincular um ponto no mesmo 
documento. 
 
 
 
 
 
 
 
12 
 <em>: 
o A tag <em> é usada para definir um texto enfatizado. O conteúdo interno 
é normalmente exibido em itálico. 
 <strong>: 
o A tag <strong> é usada para definir texto com grande importância. O 
conteúdo interno é normalmente exibido em negrito. 
 <small>: 
o A tag <small> define texto menor (como direitos autorais e outros 
comentários). 
 <cite>: 
o A tag <cite> define o título de um trabalho criativo (por exemplo, um 
livro, um poema, uma música, um filme, uma pintura, uma escultura 
etc.); 
o O texto geralmente é renderizado em itálico. 
 <time>: 
o A tag <time> define uma hora específica (ou data e hora); 
o O atributo datetime desse elemento é usado para traduzir a hora em um 
formato legível por máquinapara que os navegadores possam se 
oferecer para adicionar lembretes de datas por meio do calendário do 
usuário e os mecanismos de pesquisa possam produzir resultados de 
pesquisa mais inteligentes. 
 
 
 
 
 
 
 
13 
 <sub>: 
o A tag <sub> define o texto subscrito. O texto subscrito aparece meio 
caractere abaixo da linha normal e, às vezes, é renderizado em uma 
fonte menor; 
o O texto subscrito pode ser usado para fórmulas químicas. 
 <sup>: 
o A tag <sup> define o texto sobrescrito. O texto sobrescrito aparece com 
meio caractere acima da linha normal e, às vezes, é renderizado em uma 
fonte menor; 
o Texto sobrescrito pode ser usado para notas de rodapé. 
 <i>: 
o A tag <i> define uma parte do texto em uma voz ou humor alternativo. 
O conteúdo interno é normalmente exibido em itálico; 
o É frequentemente usado para indicar um termo técnico, uma frase de 
outro idioma, um pensamento, um nome de navio etc. 
 <b>: 
o A tag <b> especifica o texto em negrito sem qualquer importância extra. 
De acordo com a especificação HTML5, ela deve ser usada como o 
ÚLTIMO recurso quando nenhuma outra tag é mais apropriada. 
 <span>: 
 
 
 
 
 
 
 
14 
o A tag <span> é um contêiner embutido usado para marcar uma parte de 
um texto ou uma parte de um documento; 
o É facilmente estilizado por CSS ou manipulado com JavaScript usando o 
atributo class ou id; 
o É muito parecido com o elemento <div>, mas <div> é um elemento de 
nível de bloco e <span> é um elemento embutido. 
 <br>: 
o A tag <br> insere uma única quebra de linha, é útil para escrever 
endereços ou poemas; 
o Não deve ser usada como linha para decoração da página. 
 
 
 
 
 
 
 
 
15 
Capítulo 2. Abordagem (ou mindset) de desenvolvimento 
Para qualquer tipo de desenvolvimento em programação, é necessário escolher 
uma abordagem que regerá as decisões de quais tecnologias serão usadas. Existem duas 
abordagens (ou mindset) de desenvolvimento: o Graceful Degradation e o Progressive 
Enhancement. 
Graceful Degradation 
Graceful Degradation foca nas tecnologias mais avançadas aceitas nos 
navegadores mais modernos. Isso não quer dizer que as aplicações não funcionarão em 
navegadores mais antigos, mas que a experiência nestes será mais simples, não 
comprometendo a usabilidade. 
Esta é uma abordagem descendente (top-bottom) em que você constrói o 
melhor site possível usando todos os recursos que deseja e, em seguida, ajusta-o para 
que funcione em navegadores mais antigos. Isso pode ser mais difícil de fazer e menos 
eficaz do que o aprimoramento progressivo, mas pode ser útil em alguns casos. Na 
prática, o desenvolvimento usando essa abordagem utiliza qualquer recurso disponível 
que melhor cumpra o objetivo do projeto. Para que ele se adapte a todos os 
navegadores, é possível usar media queries específicas para determinar o conteúdo em 
diferentes navegadores, assim como é possível detectar usando bibliotecas JavaScript 
ou usar feature detection (detecção de recurso). 
Progressive Enhancement 
Progressive Enhancement foca no desenvolvimento de funcionalidades e 
recursos que possam ser executadas em todos os tipos de navegadores, mesmo aqueles 
mais antigos, sem restrição. Novas tecnologias serão usadas gradualmente quando os 
navegadores começarem a suportar as novas tecnologias. 
 
 
 
 
 
 
 
16 
Esse mindset envolve o desenvolvimento de seu site em 'camadas', usando uma 
abordagem ascendente (bottom-top), começando com uma camada mais simples e 
melhorando os recursos do site em camadas sucessivas, cada uma usando mais 
recursos. Na prática, o desenvolvimento usando essa abordagem é regido da seguinte 
forma: começamos com as camadas mais simples usando recursos que todos os 
navegadores aceitam, depois construímos camadas com tecnologias mais novas usando 
polyfills e feature detection. 
Progressive Enhancement VS Graceful Degradation 
Graceful Degradation Progressive Enhancement 
É uma abordagem topdown que pode 
favorecer a criatividade nos projetos, uma 
vez que já começa do melhor dispositivo 
possível. 
É uma abordagem bottom-up que favorece 
mais o funcionamento da sua aplicação em 
diversos dispositivos. 
Surgiu antes, quando não havia suporte 
padronizado aos recursos mais básicos 
dentro do browser. 
Surgiu depois, quando sugiram também os 
polyfills e shims e quando a marcação 
semântica ganhava força. 
Enfrentou muitos bugs de CSS nos 
navegadores dominantes do mercado e 
falta de suporte a APIs do HTML5 e do 
JavaScript em geral. 
Conseguiu lidar melhor no nivelamento de 
recursos com polyfills e se favoreceu com 
os ciclos de atualização mais rápidos dos 
navegadores. 
Ênfase na degradação dos recursos. Entrega 
o conteúdo “feio”, se não houver outro 
jeito melhor. 
Ênfase no aprimoramento do conteúdo 
entregue, isso é, entrega o conteúdo 
“pelado” e acrescenta-se camadas para 
quem puder aproveitá-las. 
Trocou o browser sniffing (ou browser 
detection) pelo feature detection. 
Surgiu quando já existia o conceito de 
feature detection e continuou usando, 
somando-se a um cuidado especial com 
uma marcação com mais 
significado. 
Mais difícil de ser testado em diferentes 
ambientes, já que o desenvolvimento 
Mais fácil de ser testada em diferentes 
ambientes, já que podemos testar cada 
 
 
 
 
 
 
 
17 
começa com a tecnologia mais avançada. camada de desenvolvimento e verificar se 
algo se quebra ao implementar algo mais 
novo. 
O Progressive Enhancement é geralmente considerado uma boa prática, pois 
começa com o básico e vai aprimorando aos poucos. Como incia a partir do HTML, não 
só garante que o aplicativo funcionará em qualquer navegador, mas também que os 
mecanismos de pesquisa e leitores de tela o compreenderão. Ao projetar algo do zero, 
você deve pensar em termos de aprimoramento progressivo. 
Se você está tentando tornar um site existente mais acessível e cumprir os 
novos padrões, a situação é diferente. A menos que queira começar tudo de novo, a 
Graceful Degradation é o caminho a seguir neste caso. 
Em relação aos testes, é muito mais fácil testar o Progressive Enhancement do 
que a Graceful Degradation. Se trabalharmos do ponto de vista do Progressive 
Enhancement, podemos simplesmente começar desenvolvendo a versão básica e 
verificar se ela funciona corretamente. Em seguida, adicionamos mais uma camada e 
verificamos se tudo ainda funciona da maneira certa e assim por diante. Então, 
simplesmente, cada vez que adicionamos uma camada adicional, precisamos verificar 
se ela não quebra a versão básica. 
Por outro lado, precisamos de uma abordagem diferente ao usar a Graceful 
Degradation. Os recursos avançados já estão lá e podem ser testados. Para verificar se 
eles degradam normalmente, devemos desativar o suporte a esses recursos. Em alguns 
casos, você precisará testar em um navegador diferente, mas na maioria dos casos, você 
pode usar os recursos de acessibilidade do Opera, Web Developer Toolbar no Firefox ou 
Developer Tools do Chrome. 
 
 
 
 
 
 
 
18 
É possível usar as duas abordagens em diferentes momentos do projeto ou em 
partes específicas. O importante é você ter em mente se está construindo aquela peça 
de código como algo básico que será progressivamente aprimorado ou como algo 
avançado que será degradado de forma suave. 
 
 
 
 
 
 
 
 
19 
Capítulo 3. Acessibilidade (WCAG) 
Acessibilidade na web é a prática de tornar conteúdos e funcionalidades 
acessíveis a todos os usuários, sejam eles: 
 Deficientes (visual, auditivo, físicas, de fala, cognitivas e neurológicas etc.); 
 Usuários com restrições temporárias (operações, acidentes etc.); 
 Usuários idosos ou com pouco contato com tecnologia. 
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0 definem como 
fazer o conteúdo da Web mais acessível para todos os usuários. Para atender às 
necessidades de todos, existem diversas camadas de orientação, incluindoprincípios 
globais, diretrizes gerais, entre outros recursos. Neste capítulo, vamos focar nos 
princípios e as diretrizes. 
Princípio 1: Perceptível – “As informações e os componentes da interface do 
usuário devem ser apresentados em formas que possam ser percebidas pelo usuário” 
(WCAG, 2020). 
 Diretriz 1.1 Alternativas em Texto: É preciso ter alternativas de texto para 
qualquer conteúdo não-textual (imagens, gráficos, vídeos etc.) para que possa 
ser transformado em outros formatos de acordo com as necessidades do 
público. 
 Diretriz 1.2 Mídias com base em tempo: Dar alternativas para mídias baseadas 
em tempo, por exemplo: vídeos, áudios, entrevistas ao vivo etc. Alternativas 
como legendas, transcrição em texto etc. 
 
 
 
 
 
 
 
20 
 Diretriz 1.3 Adaptável: Fazer conteúdo que pode ser adaptado de diferentes 
formas sem perder seu significado. 
 Diretriz 1.4 Discernível: Separar o primeiro plano e o plano de fundo de forma a 
facilitar a audição e a visualização de conteúdo ao público. 
Princípio 2: Operável – “Os componentes de interface de usuário e a navegação 
devem ser operáveis” (WCAG, 2020). 
 Diretriz 2.1 Acessível por Teclado: Tornar toda funcionalidade disponível a partir 
de um teclado. 
 Diretriz 2.2 Tempo Suficiente: Dar ao público tempo o bastante para ler e usar o 
conteúdo. 
 Diretriz 2.3 Convulsões: Não criar materiais de uma forma conhecida por 
provocar convulsões. 
 Diretriz 2.4 Navegável: Dar maneiras de ajudar o público a navegar, encontrar 
conteúdos e escolher onde se encontram. 
Princípio 3: Compreensível – “A informação e a operação da interface de 
usuário devem ser compreensíveis” (WCAG, 2020). 
 Diretriz 3.1 Legível: Fazer com que o conteúdo seja fácil de entender e legível. 
 Diretriz 3.2 Previsível: Fazer com que o funcionamento das páginas web 
funcionem de modo previsível. 
 Diretriz 3.3 Assistência de Entrada: Auxiliar o público para encontrar e corrigir 
erros. 
 
 
 
 
 
 
 
21 
Princípio 4: Robusto – “O conteúdo deve ser robusto o suficiente para poder 
ser interpretado de forma confiável por uma ampla variedade de agentes de usuário, 
incluindo tecnologias assistivas” (WCAG, 2020). 
 Diretriz 4.1 Compatível: Fazer com que o conteúdo seja compatível aos atuais e 
futuros agentes de usuário, principalmente tecnologias assistivas. 
Aural StyleSheets 
Aural StyleShets (ou folhas de estilo auditivo) usam uma combinação de síntese 
de fala e efeitos sonoros para fazer o usuário ouvir as informações, em vez de ler as 
informações. A apresentação auditiva pode ser usada: 
 Por cegos; 
 Para ajudar os usuários a aprender a ler; 
 Para ajudar os usuários com problemas de leitura; 
 Para entretenimento doméstico; 
 No carro; 
 Por comunidades com problemas de entendimento de entonação. 
A apresentação auditiva converte o documento em texto simples e o alimenta 
em um leitor de tela (um programa que lê todos os caracteres na tela). 
 
 
 
 
 
 
 
22 
 
Fonte: W3School. 
Propriedade Descrição 
azimuth / elevation Define de onde o som deve vir. 
cue Define as propriedades da sugestão em 
uma declaração. 
cue-after Especifica um som a ser reproduzido depois 
de falar o conteúdo de um elemento. 
cue-before Especifica um som a ser reproduzido antes 
de falar o conteúdo de um elemento. 
pause Define as propriedades de pausa em uma 
declaração. 
pause-after Especifica uma pausa após falar o conteúdo 
de um elemento. 
pause-before Especifica uma pausa antes de falar o 
conteúdo de um elemento. 
pitch Especifica a voz falada. 
pitch-range Especifica a variação na voz falada. (Voz 
monótona ou voz animada?) 
play-during Especifica um som a ser reproduzido ao 
falar o conteúdo de um elemento. 
richness Especifica a riqueza da voz falada. (Voz 
grossa ou voz fina?) 
 
 
 
 
 
 
 
23 
speak Especifica se o conteúdo será renderizado 
auditivamente. 
speak-header Especifica como lidar com os cabeçalhos da 
tabela. Os cabeçalhos devem ser falados 
antes de cada célula ou apenas antes de 
uma célula com um cabeçalho diferente da 
célula anterior. 
speak-numeral Especifica como falar os números. 
speak-punctuation Especifica como falar os caracteres de 
pontuação. 
speech-rate Especifica a velocidade da fala. 
stress Especifica a "intensidade" na voz falada. 
voice-family Especifica a família de voz do falante. 
volume Especifica o volume da fala. 
 
Por que se preocupar com acessibilidade? 
Existem muitas vantagens em ter sites acessíveis, abaixo estão algumas delas: 
 Dar aos usuários a capacidade de acessar informações, serviços e 
entretenimento de forma independente; 
 Fator de ranqueamento que pode fortalecer ou comprometer o SEO; 
 Sites acessíveis, sendo mais fáceis de usar, geralmente requerem menos suporte 
para os usuários. 
 
 
 
 
 
 
 
24 
Capítulo 4. Metodologias CSS 
Metodologias CSS (ou arquitetura CSS) são padrões de nomenclatura para 
organizar códigos de CSS, ou seja, uma forma de escrever os nomes de ids e classes de 
forma lógica e de fácil entendimento no geral. Existem muitas metodologias CSS e neste 
capítulo aprenderemos sobre algumas delas. 
OOCSS 
Esta metodologia utiliza conceitos de design orientado a objetos a fim de 
fornecer estrutura para CSS, baseado na aparência do objeto em vez do conteúdo ou 
funcionalidade. 
 Separa estrutura da skin: 
o Propriedade de estrutura: refere-se ao tamanho e posição dos 
elementos (height, width, margin, padding, overflow etc.); 
o Propriedade de skin: refere-se ao aspecto visual dos elementos (color, 
border, box-shadow, font, opacity etc.). 
 Separa contêiner do conteúdo: estilos com base em atributos em vez de 
localização. Exemplo: todos os elementos com a classe de call-to-action terão a 
mesma aparência, independentemente da marca ou localização. 
Exemplo de HTML usando OOCSS: 
 
 
 
 
 
 
 
25 
 
Exemplo de CSS usando OOCSS: 
 
Vantagem: 
 Melhor consistência; 
 Facilidade de manutenção. 
 
 
 
 
 
 
 
26 
Desvantagem: 
 Documentação vaga; 
 Não há padrão de nomenclatura que diferencie classes de estruturação e de 
skins. 
SMACSS 
Esta metodologia se resume em um sistema de categorização para conjuntos 
de regras. 
Categorias: 
 Base: estabelecer os padrões para cada elemento (não utilizam seletores com 
classes ou IDs); 
 Layout: elementos agregadores, como header, footer e sidebar. Por padrão, usa-
se l- como prefixo nos IDs e classes; 
 Módulo: demais componentes da página, usando classes com nomes 
significativos à sua funcionalidade; 
 Estado: estado visualmente dentro dos componentes do design (visible/hidden, 
active/inactive etc.). Por padrão, usa-se is- como prefixo nos IDs e classes; 
 Tema: declarações que impactam na aparência de forma genérica (cores 
padrões, por exemplo). 
Exemplo de HTML usando SMACSS: 
 
 
 
 
 
 
 
27 
 
Exemplo de CSS usando SMACSS: 
 
 
 
 
 
 
 
 
28 
Vantagem: 
 Semântica clara para melhor entendimento; 
 Mais fácil de reestruturar, caso seja necessária uma mudança no HTML. 
Desvantagem: 
 Não nomeia elementos descendentes, sendo difícil empregar em grandes 
aplicações. 
BEM 
BEM (Block, Element, Modifier) é uma abordagem baseada em componentes 
para desenvolvimento web. A ideia por trás disso é dividir a interface do usuário em 
blocos independentes. Isso torna o desenvolvimento fácil e rápido, mesmo com uma 
interface de usuário complexa, e permite a reutilização do código existente sem copiar 
e colar. 
 Block: componente de página logicamente e funcionalmente independente, 
podendo ser o mais alto nível de abstração (header, footer) ou em nível de 
componente (graph, tabs); 
 Element: parte constituinte de um bloco que não pode ser usada fora dele; 
 Modifier: define a aparência e o comportamento de um bloco ou elemento. 
 
 
 
 
 
 
 
29 
 
Outras metodologias 
Mais algumas metodologias: 
 SuitCSS: usa característicascomuns do OOCSS, SMACSS e BEM. Convenciona 3 
categorias de classes: utilitárias (estruturas de baixo nível), componentes e 
estado (usando prefixo is- para IDs e classes). 
 Atomic CSS: abordagem à arquitetura CSS que favorece pequenas classes de 
propósito único com nomes baseados em função visual. 
 Inverted Triangle CSS (ITCSS): tenta abordar a especificidade do seletor usando 
a prioridade natural do CSS. As folhas de estilo são transferidas para camadas 10 
com base em sua finalidade. 
Existem muitas outras metodologias (Semantic CSS, Point North, TitleCSS, 
IdiomaticCSS, KickoffCSS, DRY CSS, entre outras), você pode pesquisar para ver qual se 
enquadra melhor no seu estilo de programação e no seu projeto. 
 
 
 
 
 
 
 
 
30 
Capítulo 5. Boas Práticas em Desenvolvimento 
Boas práticas são padrões de código e melhores práticas para um 
desenvolvimento mais limpo, consistência, fácil de entender e reutilizável. Não existe 
uma regra absoluta para boas práticas, por isso, aqui será mostrado regras gerais de 
vários artigos e depoimento de programadores. 
No Lighthouse da Google, é possível ver uma pontuação se o seu site está de 
acordo com boas práticas no geral, em acessibilidade e de performance: 
 
Boas Práticas: HTML 
 Sempre use o HTML com doctype (<!DOCTYPE html>); 
 Use <blockquote> e <dl> (lista de definição) quando apropriado; 
 
 
 
 
 
 
 
31 
 Listas devem ser criadas por uma tag <ul>, <ol>, ou <dl>, nunca por um conjunto 
de <div> ou <p>; 
 Use a tag <label> para rotular cada campo de um formulário. O atributo “for” 
deve conectar o rótulo ao campo, para que os usuários possam clicar no rótulo 
e assim ser direcionado ao campo associado; 
 Não use o atributo “size” diretamente nos campos, em vez disso, use a 
propriedade width do CSS; 
 Comente o fechamento de <div> mostrando que o elemento está sendo fechado 
(id ou class do elemento). Isso ajuda quando tem muita indentação e muitos 
elementos aninhados; 
 Tabelas não devem ser utilizadas para layouts de página; 
 Em tabelas, use os elementos <thead>, <tbody> e <th> apropriadamente; 
 Use iniciais em caixa alta para títulos e cabeçalhos; 
 Na marcação de títulos, nunca use apenas caixa alta ou baixa. O correto é usar a 
propriedade CSS text-transform: uppercase/lowercase para isso. 
Boas Práticas: CSS 
 Carregue seu CSS através de arquivos externos, condensando-os para ter o 
menor número possível. Coloque a importação dentro do elemento <head> da 
página; 
 Nunca use @import para o importar, use sempre o elemento <link>; 
 
 
 
 
 
 
 
32 
 Não faça estilos elementos <style> ou em linha (inline) no documento. É difícil 
para manutenção e para rastrear os estilos; 
 Para equalizar as diferenças entre browsers, use CSS reset ou similares; 
 Use classes e ID da forma correta: ID para elementos que ocorrem uma única vez 
dentro de um documento e classes para elementos que se repetem; 
 Nunca use !important. Entenda os princípios de estilo em cascata e 
especificidade de seletores para colocar os estilos da maneira certa; 
 Evite seletores “caros” (como o seletor curinga - *), pois eles não são otimizados 
para performance; 
 Evite qualificar seletores de ID como “div#myid”, ou seletores de classe como 
“table.results”. Isso prejudica na performance das páginas web porque pode 
haver milhares de elementos DOM carregados com isso; 
 Aprenda sobre o modelo de caixa do navegador, é essencial para entender o 
layouts CSS; 
 Seletores CSS devem estar em uma linha e cada propriedade em sua própria 
linha abaixo dele. As declarações devem ser indentadas com 2 a 4 espaços; 
 Use aninhamento (nesting) para melhor compreensão do código. Insira um 
reforço com 2 ou 4 espaços para estilos filhos; 
 Deve ser evitado CSS em uma única linha por causar problemas com o controle 
de versão do arquivo e compreensão do mesmo; 
 Use metodologias CSS para organizar a nomenclatura de ids, classes e seletores 
em geral; 
 
 
 
 
 
 
 
33 
 Use abreviação do CSS em casos como margin e padding; 
 Você nunca deve usar imagens para criar espaços em branco; 
 Defina um estilo padrão para títulos (h1-h6), incluindo cabeçalhos com links. 
Para esses elementos de base, é importante declará-los no topo do seu 
documento CSS e manter a consistência do estilo do site; 
 Use h1-h6 de forma coerente, considerando a hierarquia dos elementos; 
 Estilos para links devem ser declarados diferentes estilos para o estado hover, 
active, link e visited. Eles devem ser diferentes do texto padrão. 
Boas Práticas: JavaScript 
 A maior parte do código deve estar em arquivos externos. Para melhor 
performance, eles devem ser incluídos no fim da tag body; 
 Faça a detecção usando recursos adequados, não confie apenas na string user-
agent; 
 Não utilize document.write(); 
 Todas as variáveis booleanas devem começar com "is"; 
 Nomeie variáveis e funções de forma lógica. Por exemplo: popUpAdIGTI, em vez 
de myPopup; 
 Variáveis devem ter nomes com significado de sua utilização, por isso, não faça 
reduções exageradas ao nomear variáveis; 
 Variáveis de configuração e constantes devem ficam no começo do arquivo; 
 
 
 
 
 
 
 
34 
 Faça com que seu código seja facilmente reutilizável, esforce-se para criar 
funções que possam ser generalizadas, ter parâmetros e valores de retorno; 
 Comente o código de forma que ele seja facilmente entendido por qualquer 
programador; 
 Use comentários de linha inteira. Usar <!-- --> prejudica a leitura do código; 
 Quanto menos variáveis globais, melhor; 
 O uso de espaços deve seguir convenções de leitura inglesa (por exemplo: 
colocar espaço depois de :); 
 As variáveis JavaScript têm que ser escritas em letras minúsculas ou camelCase; 
 Todo ID e declarações de classes em CSS devem ser escritas usando apenas letras 
minúsculas. Não use traços, nem sublinhados; 
 Converta número com parseInt(). 
Boas Práticas: Acessibilidade 
 Marcação e semântica coerente; 
 Correto uso semântico das tags, atributos e descrições; 
 Conteúdo textual para todo conteúdo não-textual (atributo “alt” em imagens, 
gráficos e outros conteúdos não-textuais); 
 Escreva um resumo do conteúdo para serem usados por leitores de tela (screen-
readers); 
 
 
 
 
 
 
 
35 
 Use um fundo claro com um texto escuro ou vice-versa para dar leitura com alto 
contraste. Opção: colocar opções de cores light/dark no site; 
 Todas as imagens devem ter descrição (alt); 
 Não usar captcha (letras distorcidas); 
 Não usar teclado virtual; 
 Não ter conteúdo sobreposto (popups); 
 Ter atalhos no teclado (principalmente tab); 
 Botões com frase em imagem (texto alternativo); 
 Não use vermelho e verde juntos para fazer distinções entre funcionalidades 
chaves - uma porcentagem de pessoas não serão capazes de distingui-los. 
 
 
 
 
 
 
 
36 
 
Boas Práticas: Performance 
 Veja a performance do site pelo Lighthouse do Google ou GTMetrix, eles dão 
boas sugestões de como melhorar o site; 
 
 
 
 
 
 
 
37 
 
 Configure apropriadamente o cache dos cabeçalhos; 
 Reduza o tamanho das imagens com otimizadores (smush it, por exemplo); 
 CSS e JavaScript devem ser minificados (minified) no lado do servidor; 
 Servir CSS e JavaScript usando gzip; 
 CSS devem ser concatenados juntos para reduzir o número de conexões HTTP 
com dependências ao longo do carregamento da página; 
 JavaScript deve ser concatenado; 
 Não use blocos <script> em linha no HTML, pois eles bloqueiam a renderização 
e oneram o tempo de carregamento de página. 
 
 
 
 
 
 
 
38 
Capítulo 6. CSS Estilos 
Aqui estudaremos resumidamente o CSS - Cascating Style Sheet (ou Folha de 
Estilo em Cascata). A sintaxe do CSS é composta por um seletor e um bloco de 
declaração: 
 
Fonte: W3School. 
Propriedades CSS 
Existem muitas propriedades CSS para modificar os elementos HTML de várias 
formas.Podemos resumi-las em 6 categorias: 
 Tamanho: font-size, width, height, margin, padding etc. 
 Cor: color, background-color etc. 
 Variações: font-weight, text-decoration, shadow, border, cursor etc. 
 Posicionamento: position, align, flex, grid, float etc. 
 Conteúdo: background-image, content, @import, @media etc. 
 Animação: animation, transform, transition etc. 
 
 
 
 
 
 
 
 
39 
Modelo de Caixa CSS 
Todos os elementos HTML podem ser considerados caixas. Em CSS, o termo 
"modelo de caixa" é usado quando se fala em design e layout. Ele é essencialmente uma 
caixa que envolve todos os elementos HTML. Consiste em: margens, bordas, 
preenchimento e o conteúdo real. A imagem abaixo ilustra o modelo da caixa: 
 
Fonte: https://www.w3schools.com/css/css_boxmodel.asp. 
Explicação das diferentes partes: 
 Content (Conteúdo) - o conteúdo da caixa, onde o texto e as imagens aparecem; 
 Padding (Margem interna) - limpa uma área ao redor do conteúdo. O 
preenchimento é transparente; 
 Border (Borda) - uma borda que circunda o preenchimento e o conteúdo; 
 Margin (Margem externa) - limpa uma área fora da borda. A margem é 
transparente. 
O modelo de caixa nos permite adicionar uma borda ao redor dos elementos e 
definir o espaço entre eles. 
https://www.w3schools.com/css/css_boxmodel.asp
 
 
 
 
 
 
 
40 
Para definir a largura (width) e a altura (height) de um elemento corretamente 
em todos os navegadores, você precisa saber como funciona o modelo de caixa. 
Importante ressaltar que, ao definir as propriedades de largura e altura de um elemento 
com CSS, você apenas define a largura e a altura da área de conteúdo. Para calcular o 
tamanho total de um elemento, você também deve adicionar preenchimento, bordas e 
margens. 
Seletores 
Os seletores CSS são usados para "encontrar" (ou selecionar) os elementos 
HTML que você deseja estilizar. Podemos dividir os seletores CSS em cinco categorias: 
 Seletores simples (selecione os elementos com base no nome, id, classe). 
Seletor Descrição 
* Seletor universal. 
E Elemento do tipo E (obs.: um elemento 
herda a formatação dos 
ancestrais). 
E,F,G Elementos dos tipos E, F e G. 
.c Elementos da classe c. 
E.c Elementos do tipo E da classe C. 
#i Elementos com atributo id igual a i. 
 Seletores combinadores (selecione os elementos com base em uma relação 
específica entre eles). 
 
Seletor Descrição 
 
 
 
 
 
 
 
41 
E F Elemento F, descendente de E. 
E > F Elemento F, filho de E. 
E + F Elemento F, imediatamente precedido de E. 
E ~ F Elemento F, precedido de E (isto é, irmão). 
E:not(S) Elemento E que não seja S. 
 Seletores de pseudo-classe (selecione os elementos com base em um 
determinado estado). 
 Seletores de pseudo-elementos (selecione e estilize uma parte de um elemento). 
 Seletores de atributos (selecione os elementos com base em um atributo ou 
valor de atributo). 
Seletor Descrição 
E[foo] Elemento que contenha o atributo “foo”. 
E[foo=”bar”] Elemento com o atributo “foo” que tenha 
exatamente o valor “bar”. 
E[foo~=”bar”] Elemento com o atributo “foo” que tenha o 
valor “bar” em uma 
lista separada por espaços. 
E[foo^=”bar”] Elemento com o atributo “foo” que comece 
com o valor “bar”. 
E[foo$=”bar”] Elemento com o atributo “foo” que termina 
com o valor “bar”. 
E[foo*=”bar”] Elemento com o atributo “foo” com valor 
que contenha a substring “bar”. 
E[foo|=”pt”] Elemento com o atributo “foo” contendo 
uma lista de valores separadas por hífen 
 
 
 
 
 
 
 
42 
que comece com “pt”. 
Funções 
As funções CSS são usadas como um valor para várias propriedades CSS. 
Função Descrição 
attr() Retorna o valor de um atributo do 
elemento selecionado. 
calc() Permite que você execute cálculos para 
determinar os valores das propriedades 
CSS. 
cubic-bezier() Define uma curva de Bézier cúbica. 
hsl() Define as cores usando o modelo Hue-
Saturation-Lightness (HSL). 
hsla() Define cores usando o modelo Hue-
Saturation-Lightness-Alpha (HSLA). 
linear-gradient() Define um gradiente linear como imagem 
de fundo. Defina pelo menos duas cores (de 
cima para baixo). 
radial-gradient() Define um gradiente radial como imagem 
de fundo. Defina pelo menos duas cores 
(centro para as bordas). 
repeating-linear-gradient() Repete um gradiente linear. 
repeating-radial-gradient() Repete um gradiente radial. 
rgb() Define cores usando o modelo Red-Green-
Blue (RGB). 
rgba() Define cores usando o modelo Red-Green-
Blue-Alpha (RGBA). 
var() Insere o valor de uma propriedade 
personalizada. 
 
 
 
 
 
 
 
43 
Capítulo 7. CSS Pseudo atributos 
Pseudo atributos são atributos especiais adicionados aos elementos 
dependendo de uma ação ou de uma condição específica. Existem 3 tipos de “pseudo” 
em CSS: 
 Pseudo-classe é usada para definir um estado especial de certo elemento; 
 Pseudo-seletor (que faz parte das pseudo-classes) é usado para modificar um 
elemento especificado que está em determinada posição (filho) de outro 
elemento; 
 Pseudo-elemento CSS é usado para estilizar partes específicas de um elemento. 
Pseudo-classes 
 :active - Elemento ativo (link); 
 :visited - Elemento (link) que já foi clicado (visitado); 
 :hover - Elemento em que o mouse está sobre; 
 :link - Todos os links não visitados; 
 :checked - Elemento marcado (<input>); 
 :disabled - Elemento desativado (<input>); 
 :empty - Elemento que não tem filhos; 
 :enabled - Elemento ativado (<input>); 
 :focus - Elemento que está em foco; 
 
 
 
 
 
 
 
44 
 :in-range - Elementos com um valor dentro de um intervalo especificado 
(<input>); 
 :invalid - Elemento inválido (<input>); 
 :not(selector) - Elemento que não é o seletor; 
 :optional - Elementos sem atributo "required" (<input>); 
 :out-of-range - Elementos com um valor fora de um intervalo especificado 
(<input>); 
 :read-only - Elementos com um atributo "read-only" especificado (<input>); 
 :read-write - Elementos sem um atributo "read-only" especificado (<input>); 
 :required - Elementos com atributo "required" (<input>); 
 :root - Elemento raiz do documento; 
 :target - O elemento #news ativo atual (clicado em um URL contendo o elemento 
âncora); 
 :valid - Elementos com um valor válido (<input>). 
Pseudo-seletores 
 :first-child - Seleciona cada elemento que é o primeiro filho de seu pai; 
 :first-of-type - Seleciona o primeiro elemento de seu pai que satisfaz a condição 
de tipo; 
 :last-child - Seleciona todos os elementos que são os últimos filhos de seu pai; 
 
 
 
 
 
 
 
45 
 :last-of-type - Seleciona último elemento de seu pai que satisfaz a condição; 
 :nth-child(n) - Seleciona o elemento de seu pai na posição n que satisfaz a 
condição; 
 :nth-last-child(n) - Seleciona último elemento de seu pai que satisfaz a condição; 
 :nth-last-of-type(n) - Seleciona cada elemento que satisfaz a condição de posição 
como filho de seu pai, contando a partir do último filho; 
 :nth-of-type(n) - Seleciona cada elemento que satisfaz a condição de tipo e de 
posição como filho de seu pai; 
 :only-of-type - Seleciona cada elemento que é o único elemento de seu pai; 
 :only-child - Seleciona cada elemento que é o único filho de seu pai. 
Pseudo-elementos 
 ::after - Pode ser usado para inserir algum conteúdo depois do conteúdo de um 
elemento; 
 ::before - Pode ser usado para inserir algum conteúdo antes do conteúdo de um 
elemento; 
 ::first-letter - Usado para adicionar um estilo especial à primeira letra de um 
texto; 
 ::first-line - Usado para adicionar um estilo especial à primeira linha de um texto; 
::selection - Corresponde à parte de um elemento que é selecionado por um 
usuário. 
 
 
 
 
 
 
 
46 
Capítulo 8. CSS Animações 
Uma animação permite que um elemento mude gradualmente de um estilo 
para outro. Você pode alterar quantas propriedades CSS quiser, quantas vezes quiser. 
As animações são muito usadascom o CSS transform. 
CSS Transform 
É possível animar os elementos de diversas formas e um atributo muito usado 
é o CSS transform, que permite mover, girar, redimensionar e inclinar elementos. 
Resumo das propriedades: 
Propriedade Descrição 
translate(x,y) Define uma translação 2D, movendo o elemento ao longo dos 
eixos X e Y. 
translateX(x) Define uma tradução 2D, movendo o elemento ao longo do 
eixo X. 
translateY(y) Define uma tradução 2D, movendo o elemento ao longo do 
eixo Y. 
rotate(angle) Define uma rotação 2D, o ângulo é especificado no 
parâmetro. 
scale(x,y) Define uma transformação de escala 2D, alterando a largura e 
altura dos elementos. 
scaleX(x) Define uma transformação de escala 2D, alterando a largura 
do elemento. 
scaleY(x) Define uma transformação de escala 2D, alterando a altura do 
elemento. 
skew(x,y) Define uma transformação de inclinação 2D ao longo dos 
eixos X e Y. 
skewX() Define uma transformação de inclinação 2D ao longo do eixo 
 
 
 
 
 
 
 
47 
X. 
skewY() Define uma transformação de inclinação 2D ao longo do eixo 
Y. 
matrix(n,n,n,n,n,n) Define uma transformação 2D, usando uma matriz de seis 
valores. 
CSS Animation 
Para usar o CSS animation, você deve primeiro especificar alguns quadros-
chave (@keyframes) para a animação. Os keyframes contêm os estilos que o elemento 
terá em determinados momentos. Para fazer uma animação funcionar, você deve 
vincular a animação a um elemento adicionando as seguintes propriedades: 
 animation-name: nome da animação. Deve ser adicionado ao elemento que fará 
a animação; 
 animation-duration: duração da animação. Se ela não for especificada, a 
animação não funciona. A duração pode ser em segundos, milisegundos, 
porcentagem; 
 animation-timing-function (opcional): estabelece curvas de aceleração 
predefinidas, como ease ou linear. A propriedade animation-timing-function 
pode ter os seguintes valores: 
o ease - especifica uma animação com um início lento, depois rápido e, a 
seguir, termina lentamente (este é o padrão); 
o linear - especifica uma animação com a mesma velocidade do início ao 
fim; 
o easy-in - especifica uma animação com um início lento; 
 
 
 
 
 
 
 
48 
o ease-out - especifica uma animação com um final lento; 
o easy-in-out - especifica uma animação com início e fim lentos; 
o cubic-bezier (n, n, n, n) - permite definir seus próprios valores em uma 
função cubic-bezier. 
 animation-delay (opcional): o tempo entre o elemento sendo carregado e o início 
da sequência de animação. Valores negativos também são permitidos, e se usar 
valores negativos, a animação começará como se já tivesse sido reproduzida por 
X segundos; 
 animation-direction (opcional): define se uma animação deve ser reproduzida 
para frente, para trás ou em ciclos alternados. A propriedade animation-
direction pode ter os seguintes valores: 
o normal - a animação é reproduzida normalmente (para frente). Este é o 
padrão; 
o reverse - a animação é reproduzida na direção reversa (para trás); 
o alternate - a animação é reproduzida primeiro para a frente e depois 
para trás; 
o alternate-reverse - a animação é reproduzida primeiro para trás e depois 
para a frente. 
 animation-iteration-count (opcional): o número de vezes que a animação deve 
ser executada. É possível usar o valor infinite para fazer a animação continuar 
para sempre. 
 
 
 
 
 
 
 
49 
 animation-fill-mode (opcional): essa propriedade especifica um estilo para o 
elemento de destino quando a animação não está sendo reproduzida (antes de 
começar, depois de terminar ou ambos). A propriedade animation-fill-mode 
pode ter os seguintes valores: 
o none - valor padrão. A animação não aplicará nenhum estilo ao elemento 
antes ou depois de sua execução; 
o forwards - o elemento manterá os valores de estilo definidos pelo último 
quadro-chave (depende da direção e da contagem da iteração da 
animação); 
o backwards - o elemento obterá os valores de estilo definidos pelo 
primeiro quadro-chave (depende da direção da animação) e os manterá 
durante o período de atraso da animação; 
o both - a animação seguirá as regras para frente e para trás, estendendo 
suas propriedades em ambas as direções. 
 animation-play-state (opcional): pausa/reproduz a animação. 
As animações também podem ser escritas de forma abreviada com as seguintes 
propriedades: animation-name, animation-duration, animation-timing-function, 
animation-delay, animation-iteration-count e animation-direction. 
Resumo das propriedades de animação: 
Propriedade Valores da propriedade 
animation-name nome 
animation-duration Xs, Xms, % 
 
 
 
 
 
 
 
50 
animation-timing-function ease, ease-out, ease-in, ease-in-out, linear, cubic-
bezier(x1, y1, x2, y2) 
animation-delay Xs, Xms 
animation-direction normal, reverse, alternate, alternate-reverse 
animation-iteration-count X, infinite 
animation-fill-mode forwards, backwards, both, none 
animation-play-state paused, running 
Exemplos de animação 
1. Animação com delay de 2 segundos e duração de 5 segundos, onde a div se move 
para diferentes posições e muda a cor de fundo. Ela acontece infinitamente e 
anima para frente e para trás de forma alternada: 
div { 
 width: 100px; 
 height: 100px; 
 background-color: red; 
 position: relative; 
 animation-name: example; 
 animation-duration: 5s; 
 animation-timing-function: linear; 
 animation-delay: 2s; 
 animation-iteration-count: infinite; 
 animation-direction: alternate; 
 } 
 
@keyframes example { 
 0% {background-color:red; left:0px; top:0px;} 
 25% {background-color:yellow; left:200px; top:0px;} 
 50% {background-color:blue; left:200px; top:200px;} 
 75% {background-color:green; left:0px; top:200px;} 
 100% {background-color:red; left:0px; top:0px;} 
 } 
2. Animação que roda automaticamente, onde a div começa com a cor vermelha, 
com 0.3 do seu tamanho e em formato circular (border-radius: 100%), e termina 
 
 
 
 
 
 
 
51 
com a cor amarela, com 1.5 do seu tamanho e em formato quadrado. Ela 
acontece infinitamente e anima para frente e para trás de forma alternada: 
#animation-2 { 
 height: 100px; 
 width: 100px; 
 margin: 0 auto; 
 background-color: red; 
 animation-name: animation2; 
 animation-duration: 1.5s; 
 animation-timing-function: ease-out; 
 animation-delay: 0; 
 animation-direction: alternate; 
 animation-iteration-count: infinite; 
 animation-fill-mode: none; 
 animation-play-state: running; 
 } 
 
 @keyframes animation2 { 
 0% { 
 transform: scale(.3); 
 background-color: red; 
 border-radius: 100%; 
 } 
 50% { 
 background-color: orange; 
 } 
 100% { 
 transform: scale(1.5); 
 background-color: yellow; 
 } 
 } 
 
 
 
 
 
 
 
 
52 
3. Animação dupla: 
a. Pulse: mudança de cor contínua (vermelho para laranja); 
b. Segunda: mudança de posição em dois estágios: em 50%, depois 80% e 
finaliza na posição inicial. 
#animation-3 { 
 height: 100px; 
 width: 100px; 
 margin: 0 auto; 
 background-color: red; 
 animation: 
 pulse 3s ease infinite alternate, 
 nudge 5s linear infinite alternate; 
 border-radius: 100%; 
 } 
 
@keyframes pulse { 
 0%, 100% { 
 background-color: red; 
 } 
 50% { 
 background-color: orange; 
 } 
} 
 
@keyframes nudge { 
 0%, 100% { 
 transform: translate(0, 0); 
 } 
 
 50% { 
 transform: translate(150px, 0); 
 } 
 
 80% { 
 transform: translate(-150px, 0); 
 } 
} 
 
 
 
 
 
 
 
 
53 
Capítulo 9. Noções de UI e UX 
UX (user experience) Design é o processo de projetar produtos físicos ou 
digitais que são úteis, fáceis de usar e oferecem uma ótima experiência na interação 
com eles. No processo de criação de um produto, o UX Designer deve passar por várias 
etapas: 
 
Fonte: CANZIBA, 2018. 
1. Descoberta e Planejamento:é o primeiro estágio do processo de UX, onde 
primeiro tocamos/discutimos a ideia por trás de nosso produto. O objetivo dessa 
etapa é que a equipe tenha uma ideia clara sobre o produto que irá projetar e 
desenvolver. Discutimos a ideia do projeto e a visão do cliente, fazemos 
entrevistas, analisamos o orçamento e desenhamos o roteiro. 
2. Estratégia UX: é aqui que as equipes realizam pesquisas profundas relacionadas 
à ideia que foi fornecida por um cliente para criar a que queremos construir para 
nós mesmos. Nessa fase é onde entendemos o cliente, os competidores, os 
usuários, os objetivos do negócio, os stakeholders e fazemos medições. 
 
 
 
 
 
 
 
54 
3. Pesquisa UX: concentra-se em entender o produto em si, o comportamento do 
usuário com o ele, suas necessidades, dores e motivações para usar nossos 
produtos. Nessa etapa são realizadas pesquisas, a exploração do problema, 
testes e revisão do que foi feito. 
4. Análise UX: é nessa etapa que medimos a interação entre um usuário e a 
interface do usuário; muitas vezes, neste caso, pode ser um aplicativo, um 
produto digital ou até mesmo o próprio design. É onde são feitas análises de caso 
de uso, as personas e a estrutura de dados. 
5. Design: é nessa etapa que desenvolvemos o design do produto em si. Aqui são 
feitos os modelos no Sketch, a prototipagem, o design visual e os fluxos de 
interação. 
6. Produção: é nessa etapa, que pode começar com o design do processo de UX, 
especialmente quando o desenvolvimento do o produto se inicia, já que é a fase 
em que começa a dar feedback sobre um produto, que podemos ver, tocar e 
sentir visualmente. Nela são feitos testes, medições, feedback e 
aperfeiçoamento do produto. 
Para alcançar essa ótima experiência, Peter Morville desenvolveu a ferramenta 
UX Honeycomb, que explica as várias facetas do UX design: 
 
 
 
 
 
 
 
55 
 
Fonte: WESOLKO. 2016. 
Cada faceta do UX design pode ser definida por este diagrama como: 
 Utilizável (usable): o sistema no qual o produto ou serviço é entregue deve ser 
simples e fácil de usar. Os sistemas devem ser projetados de forma familiar e 
fácil de entender. A curva de aprendizado pela qual um usuário deve passar deve 
ser a mais curta e indolor possível. 
 Útil (useful): o produto ou serviço de uma empresa precisa ser útil e preencher 
uma necessidade. Se o produto ou serviço não for útil ou atender aos desejos ou 
necessidades do usuário, não há um propósito real para o produto em si. 
 Desejável (desirable): a estética visual do produto, serviço ou sistema precisa ser 
atraente e fácil de traduzir. O design deve ser mínimo e direto ao ponto. 
 
 
 
 
 
 
 
56 
 Localizável (findable): as informações precisam ser localizáveis e fáceis de 
navegar. Se o usuário tiver um problema, ele deve ser capaz de encontrar uma 
solução rapidamente. A estrutura de navegação também deve ser configurada 
de forma que faça sentido. 
 Acessível (accessible): o produto ou serviços devem ser projetados de forma que 
até mesmo pessoas com deficiência possam ter a mesma experiência de usuário 
que os outros. 
 Credível (credible): a empresa e seus produtos ou serviços precisam ser 
confiáveis. 
A partir dessas várias facetas é que temos o valor do produto, ou seja, uma 
ótima experiência do usuário. 
UI, por outro lado, é a parte em que projetamos interfaces de usuário para 
diferentes softwares de computador, aplicativos móveis, videogames e até mesmo para 
máquinas diferentes, como uma interface ATM, de máquina de lavar, de telas de carro 
ou qualquer interface física e digital que nosso usuário tenha que interagir. É nela onde 
projetamos algo mais direcionado para o produto em si, por exemplo: a forma dos 
botões, os campos de formulário, etc. 
As interfaces do usuário (user interface) são os pontos de acesso onde os 
usuários interagem com os designs. Eles vêm em três formatos: 
 Interfaces gráficas do usuário (GUIs) - os usuários interagem com representações 
visuais em painéis de controle digital. A área de trabalho de um computador é 
uma GUI. 
 
 
 
 
 
 
 
57 
 Interfaces controladas por voz (VUIs) - os usuários interagem com elas por meio 
de suas vozes. A maioria dos assistentes inteligentes - por exemplo, Siri no 
iPhone e Alexa nos dispositivos Amazon - são VUIs. 
 Interfaces baseadas em gestos - os usuários se envolvem com espaços de design 
3D por meio de movimentos corporais: por exemplo, em jogos de realidade 
virtual (VR). 
A grande diferença entre UI e UX é que UX analisa a experiência geral do 
produto, enquanto a UI se concentra mais na aparência, como fontes, cores, botões, 
layout e espaços. Observe o exemplo abaixo: 
 
Fonte: CANZIBA, 2018 
Para ter bons resultados na implementação da UI ao lado do front-end, deve 
haver uma grande colaboração entre a equipe de design e a equipe de front-end. Obter 
insights sobre o produto desde os estágios iniciais dará aos desenvolvedores front-end 
tempo para pesquisar diferentes tipos de estruturas que eles podem usar durante o 
processo de desenvolvimento, como Bootstrap, Bulma, Tailwind, Material Design ou 
Foundation. Eles também podem preparar facilmente o espaço de trabalho para esse 
 
 
 
 
 
 
 
58 
momento ao decidir sobre diferentes ferramentas, como CSS, pré-processadores, como 
SASS ou LESS, ferramentas de automação, como gulp ou grunt, e até mesmo frameworks 
JavaScript, como Angular, React ou Vue. 
Design Systems 
De acordo com HACQ (2019), Design Systems “é a única fonte de verdade que 
agrupa todos os elementos que permitirão às equipes projetar, realizar e desenvolver 
um produto” (tradução livre). Ele é um documento vivo que possui todos componentes 
de UI e padrões visuais de uma empresa, marca, produto ou experiência. Um bom design 
system é o que vai unir a identidade do produto com os princípios da empresa, as 
melhores práticas de usabilidade e acessibilidade para construir componentes e padrões 
visuais que atendam aos usuários. 
Mais que padrões visuais, o Design System expressa também a mensagem que 
a empresa ou produto quer passar para seu usuário final, e serve para facilitar a 
comunicação com os diferentes times (desenvolvimento, design, produto etc.). É um 
documento muito importante para manter a consistência visual e a experiência de uso 
como um todo, e isso fica fácil tendo os padrões bem definidos. 
Com o Design System, os desenvolvedores são capazes de entender qual 
sistema de grid foi usado no estágio de design sendo então mais fácil para eles decidirem 
se devem ir com alguns frameworks prontos, como Bootstrap, ou criar algo novo do 
zero. Além disso, o Design System também dará aos desenvolvedores mais insights, 
fazendo-os entender quais tipos de componentes de UI serão incluídos na interface do 
usuário, por exemplo, qualquer componente exclusivo em comparação com os padrão 
(botões, entradas, formulários, guias e assim por diante), qualquer layout exclusivo ou 
se há componentes de design extras para os próximos recursos. 
 
 
 
 
 
 
 
59 
 
Fonte: HACQ, 2019. 
Não existe uma estrutura padrão em relação ao que um Design Systems deve 
ter, isso depende da necessidade da equipe e do tipo de projeto. De uma forma geral, 
um Design Systems possui a seguinte estrutura: 
 
 
 
 
 
 
 
60 
 
Fonte: SERRADAS, 2018. 
Como é possível ver pela imagem, a estrutura é dividida em 4 grandes blocos: 
 Blocos de construção (building blocks): é onde se encontra a paleta de cor, a 
tipografia, definição de grid, iconografia etc. Ou seja, é o bloco onde são 
definidos os padrões básicos de design. 
 Biblioteca de Padrões (Pattern Library): é uma “subclasse no sistema de design, 
é o conjunto de padrões de design para uso em uma empresa” (SERRADAS, 
2018). Ou seja, é onde se encontram os templates, módulos, componentes e 
elementos que serão usados por padrão. Essa parte pode ser construída apenas 
a parte visual oujá ter os códigos de cada elemento para implementação. 
 Regras (rules): onde se encontram as regras de design, diretrizes de 
implementação e diretrizes editoriais. Ou seja, é onde são definidos as regras de 
o que deve ser implementado, onde e de qual forma. 
 
 
 
 
 
 
 
61 
 Guia de estilos (style guide): é “uma documentação que descreve o próprio 
sistema de design: como os produtos devem parecer e se comportar, padrões de 
interface do usuário como tamanho de fonte, cores, botões e etc.” (SERRADAS, 
2018). 
Muitas empresas possuem seu Design System disponível para o público, abaixo 
estão alguns exemplos para se ter como referência: 
Material Design - https://material.io/. 
 
Atlassian - https://atlassian.design/. 
 
https://material.io/
https://atlassian.design/
 
 
 
 
 
 
 
62 
Polaris - https://polaris.shopify.com/. 
 
Atomic Design 
O design atômico é uma metodologia composta por cinco estágios distintos 
trabalhando juntos para criar sistemas de design de interface de uma maneira mais 
deliberada e hierárquica. Os cinco estágios do projeto atômico são: 
 
Fonte: FROST, 2018. 
1. Átomos: servem como blocos de construção básicos que abrangem todas as 
nossas interfaces de usuário. Eles incluem elementos HTML básicos, como 
rótulos de formulários, entradas, botões e outros que não podem ser divididos, 
mas sem deixar de ser funcionais. 
https://polaris.shopify.com/
 
 
 
 
 
 
 
63 
2. Moléculas: são grupos relativamente simples de elementos de UI funcionando 
juntos como uma unidade. Por exemplo, um rótulo de formulário, entrada de 
pesquisa e botão podem ser unidos para criar uma molécula de formulário de 
pesquisa. 
 
Fonte: FROST, 2018. 
3. Organismos: são componentes UI relativamente complexos compostos por 
grupos de moléculas e/ou átomos e/ou outros organismos. Esses organismos 
formam seções distintas de uma interface. 
 
Fonte: FROST, 2018. 
Enquanto alguns organismos podem consistir em diferentes tipos de moléculas, 
outros organismos podem consistir na mesma molécula repetida continuamente. Por 
exemplo, em uma loja de roupas, podemos ter vários módulos de produtos dentro de 
um organismo. 
 
 
 
 
 
 
 
64 
4. Modelos (templates): são objetos de nível de página que colocam componentes 
em um layout e articulam a estrutura de conteúdo subjacente do design. 
 
Fonte: FROST, 2018. 
Esse modelo de página inicial exibe todos os componentes de página 
necessários funcionando juntos, o que fornece contexto para essas moléculas e 
organismos relativamente abstratos. Ao elaborar um sistema de design eficaz, é 
fundamental demonstrar como os componentes se parecem e funcionam juntos no 
contexto de um layout para provar que as peças somam um todo que funciona bem. 
Outra característica importante dos modelos é que eles se concentram na 
estrutura de conteúdo subjacente da página e não no conteúdo final. 
 
 
 
 
 
 
 
65 
5. Páginas: são instâncias específicas de modelos que mostram a aparência de uma 
UI com conteúdo representativo real no local. Além de demonstrar a interface 
final como seus usuários a verão, as páginas são essenciais para testar a eficácia 
do sistema de design subjacente. É no estágio da página que podemos dar uma 
olhada em como todos esses padrões se mantêm quando o conteúdo real é 
aplicado ao sistema de design. 
 
Fonte: FROST, 2018. 
As páginas também fornecem um local para articular variações em modelos, o 
que é crucial para estabelecer sistemas de design robustos e confiáveis. 
 
 
 
 
 
 
 
66 
Vantagens em usar o Atomic Design 
 O design atômico se aplica a todas as interfaces de usuário, não apenas às 
baseadas na web. 
 Uma das maiores vantagens que o design atômico oferece é a capacidade de 
alternar rapidamente entre o abstrato e o concreto. 
 Com ele, temos a separação limpa entre estrutura e conteúdo. 
 
Fonte: FROST, 2018. 
 
 
 
 
 
 
 
67 
Capítulo 10. CSS Layout 
As técnicas de layout de página CSS nos permitem pegar os elementos contidos 
em uma página da web e controlar onde eles são posicionados, os outros elementos ao 
redor deles, seu contêiner pai e a janela/viewport principal. 
Fluxo normal do CSS 
Elementos em bloco (display: block): 
 Os elementos aparecem empilhados uns sobre os outros; 
 O conteúdo de um elemento de nível de bloco é 100% da largura de seu 
elemento pai e tem a mesma altura de seu conteúdo. 
Elementos em linha (display: inline): 
 Os elementos aparecem um ao lado do outro; 
 O conteúdo de um elemento de nível de linha tem a mesma altura e largura de 
seu conteúdo. 
Elementos em bloco e linha (display: inline-block): 
 É a junção dos comportamentos dos valores inline + block: é possível definir uma 
largura (width) e altura (height) como no display: block e é possível deixar um 
elemento do lado do outro, da mesma forma que fazemos com o display: inline. 
 
 
 
 
 
 
 
68 
 
Fonte: http://devfuria.com.br/html-css/display/. 
Os primórdios do layout web 
 Layout de tabela (legado) 
Antes mesmo de CSS básico ser suportado de forma confiável em navegadores, 
os desenvolvedores web também costumavam usar tabelas para layouts de páginas da 
web inteiras, colocando seus cabeçalhos, rodapés, colunas diferentes etc. em várias 
linhas e colunas da tabela. 
Problemas ao usar o layout de tabela: são inflexíveis, muito pesados na 
marcação, difíceis de depurar e semanticamente errados (por exemplo, usuários de 
leitores de tela têm problemas para navegar nos layouts de tabelas). 
 
Fonte: https://www.pngwing.com/pt/free-png-tcyby. 
 
http://devfuria.com.br/html-css/display/
https://www.pngwing.com/pt/free-png-tcyby
 
 
 
 
 
 
 
69 
 Float (legado): 
Float tem sido comumente usado para criar layouts de sites inteiros com várias 
colunas de informações flutuantes para que fiquem lado a lado. A manipulação dos 
elementos com float é comumente usado junto com elementos de margem, borda, 
altura/largura etc. 
 
Fonte: https://css-tricks.com/almanac/properties/f/float/. 
CSS Flexbox 
O módulo Flexbox Layout (Caixa Flexível) visa fornecer uma forma mais 
eficiente de dispor, alinhar e distribuir o espaço entre os itens em um contêiner, mesmo 
quando seu tamanho é desconhecido e/ou dinâmico (daí a palavra “flex”). 
Características: 
 Foco no fluxo de conteúdo; 
 Usado para projetar layouts unidimensionais simplificados, com uma disposição 
em linha reta; 
 Define propriedades para o pai (contêiner) e seus filhos (itens); 
https://css-tricks.com/almanac/properties/f/float/
 
 
 
 
 
 
 
70 
 É mais indicado para os componentes de aplicativos e layouts em pequena 
escala. 
 
Fonte: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. 
Comandos de Flexbox: 
 Flex contêiner (pai): 
o display: flex; - Define o elemento como um flex contêiner, tornando os 
seus filhos flex-itens. 
o flex-direction: row | row-reverse | column | column-reverse; - Define a 
direção dos flex itens. 
o flex-wrap: wrap | nowrap | wrap-reverse; - Define se os itens devem 
quebrar ou não a linha. 
o flex-flow: <flex-direction> <flex-wrap>; - Atalho para as propriedades 
flex-direction e flex-wrap. 
o justify-content: flex-start | flex-end | center | space-between | space-
around | space-evenly; - Alinha os itens flex no contêiner de acordo com 
a direção. 
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
 
 
 
 
 
 
71 
o align-items: stretch | flex-start | flex-end | center | baseline; - Alinha os 
flex itens de acordo com o eixo do contêiner. 
o align-content: flex-start | flex-end | center | space-between | space-
around | space-evenly | stretch; - Alinha as linhas do contêiner em 
relação ao eixo vertical (só funciona se existir mais de uma linha de flex-
itens). 
 
 
 
 
 
 
 
 
72 
Fonte: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. 
 Flex itens (filhos): 
o order: 0; - Modifica a ordem dos flex itens.o flex-grow: 0; - Define a habilidade de um flex item crescer. 
o flex-shrink: 1; - Define a capacidade de redução de tamanho do item. 
o flex-basis; - Indica o tamanho inicial do flex item antes da distribuição do 
espaço restante. 
o align-self: auto; - serve para definirmos o alinhamento específico de um 
único flex item dentro do nosso contêiner. 
CSS Grid 
CSS Grid Layout (também conhecido como “Grid”), é um sistema de layout 
bidimensional, baseado em grade, que visa nada menos do que mudar completamente 
a maneira como projetamos interfaces de usuário baseadas em grade. 
Características: 
 Foco na posição de conteúdo; 
 Usado para criação de layouts bidimensionais de complexidade maior; 
 Define propriedades para linhas e colunas, como uma tabela; 
 É ideal para organizar a estrutura de um esquema com elementos de nível mais 
elevado, como cabeçalhos, rodapés, seções e sidebar. 
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
 
 
 
 
 
 
73 
 
Fonte: https://css-tricks.com/snippets/css/complete-guide-grid/. 
Comandos de Grid: 
 Grid contêiner (pai): 
o display: grid; - Define o elemento 
como um grid contêiner. 
o grid-template-column: (3, 1fr); - 
Define o número total de colunas 
que serão criadas no grid. 
o grid-template-rows: auto; - Define 
a quantidade de linhas no grid. 
https://css-tricks.com/snippets/css/complete-guide-grid/
 
 
 
 
 
 
 
74 
o grid-template-areas: “area area area”; - Define áreas específicas no grid. 
O ponto (.) é usado para criar áreas vazias. 
o gap: <grid-row-gap> <grid-column-gap>; - Define o gap (espaço) entre os 
elementos do grid (linhas e colunas). 
o grid-auto-columns: 1fr; - Define o tamanho 
das colunas do grid implícito que são 
geradas automaticamente quando um 
elemento é posicionado em uma coluna 
que não foi previamente definida. 
o grid-auto-rows: 1fr; - Define o tamanho das 
linhas do grid implícito que são geradas 
automaticamente quando um elemento é 
posicionado em uma linha que não foi 
definida. 
o place-items: <justify-items><align-items>; - Justifica os itens do grid em 
relação ao eixo x (horizontal) e ao eixo y (vertical). 
o place-content: <justify-content><align-content>; - Justifica o conteúdo 
dos itens do grid em relação ao eixo x (horizontal) e ao eixo y (vertical) 
em relação à célula. 
 
 
 
 
 
 
 
75 
 
 
Fonte: https://css-tricks.com/snippets/css/complete-guide-grid/. 
 Grid itens (filhos): 
o grid-column: 3 / span 2; - Define quais colunas serão ocupadas pelo grid 
item. 
o grid-row: 3 / 4; - Define quais linhas serão ocupadas pelo grid item. 
o grid-area: header; - Define a área do item do grid. 
o place-self: center stretch; - Justifica o item do grid em relação ao eixo x 
(horizontal) e ao eixo y (vertical) e em relação à célula. 
https://css-tricks.com/snippets/css/complete-guide-grid/
 
 
 
 
 
 
 
76 
Capítulo 11. Técnicas de Design Responsivo 
Durante a elaboração de um projeto, é importante pensar na responsividade 
da aplicação para diferentes dispositivos. Existem dois padrões que normalmente são 
usados: o Responsive Design e o Adaptive Design. 
Responsive Design 
Responsive Design (ou Design Responsivo) é fluido e se adapta ao tamanho da 
tela, independentemente do dispositivo de destino. Esse padrão usa media queries CSS 
para alterar estilos com base no dispositivo de destino, como tipo de exibição, largura, 
altura etc., e apenas um deles é necessário para que o site se adapte às telas diferentes. 
 
Fonte: http://www.cuellarstudio.com/hello-world/. 
O design responsivo não oferece tanto controle quanto o adaptativo, mas exige 
muito menos trabalho para construir e manter. Os layouts responsivos também são 
fluidos e, embora os adaptativos possam usar, e usam, porcentagens para dar uma 
http://www.cuellarstudio.com/hello-world/
 
 
 
 
 
 
 
77 
sensação mais fluida ao dimensionar, eles podem, novamente, causar um salto quando 
uma janela é redimensionada. 
Adaptive Design 
Adaptive Design (ou design adaptável) usa layouts estáticos baseados em 
pontos de interrupção que não respondem, uma vez que são carregados inicialmente. 
Adaptive funciona para detectar o tamanho da tela e carregar o layout apropriado para 
ele – geralmente é projetado um site adaptável para seis larguras de tela comuns: 
 320; 
 480; 
 760; 
 960; 
 1200; 
 1600. 
Este design é útil para adaptar um site existente a fim de torná-lo mais 
compatível com dispositivos móveis. Isso permite que você controle o design e 
desenvolva para viewports múltiplas e específicas. O número de viewports que será 
usado para programar as páginas depende inteiramente do programador. No entanto, 
ele oferece um certo controle (por exemplo, sobre o conteúdo e o layout) que não existe 
necessariamente com o design responsivo. 
 
 
 
 
 
 
 
 
78 
 
Fonte: http://www.cuellarstudio.com/hello-world/. 
Geralmente, você começaria projetando para uma janela de visualização de 
baixa resolução (mobile-first) e aumentaria para garantir que o design não fosse 
restringido pelo conteúdo. Como mencionado anteriormente, é padrão projetar para 
seis resoluções. No entanto, você pode tomar uma decisão mais informada, observando 
sua análise da web para os dispositivos mais comumente usados e, em seguida, 
projetando para essas janelas de visualização. 
Responsive vs Adaptive Design 
À primeira vista, parece que o adaptativo requer mais trabalho, pois você 
precisa projetar layouts para no mínimo seis larguras. No entanto, responsivo pode ser 
mais complexo, pois o uso indevido de consultas de mídia (ou mesmo não as usar) pode 
causar problemas de exibição e desempenho. O design responsivo é geralmente a 
técnica preferida apenas por causa do trabalho contínuo que o design adaptativo exige. 
Responsive design é mais usado por ser mais rápido em desenvolvimento e 
manutenção, mas Adaptive design é mais performático e tem uma melhor usabilidade 
em geral. Afinal, a escolha vai depender do orçamento do projeto e para quem o projeto 
é destinado (audiência). 
http://www.cuellarstudio.com/hello-world/
 
 
 
 
 
 
 
79 
Capítulo 12. CSS User agent Styles 
Quando um navegador renderiza uma página HTML, ele aplica estilos básicos 
antes mesmo de você escrever um único estilo. Por exemplo, as tags HTML de <h1> a 
<h6> em todos os navegadores diferem do texto normal: em geral, seus tamanhos de 
fonte são maiores, a espessura da fonte é negrito (espessura da fonte: negrito) e têm 
margens a parte superior e a inferior. 
 
Fonte: SHECHTER, 2019. 
Embora todos os navegadores apliquem seus estilos básicos, cada um tem seus 
estilos específicos, diferentes de outros navegadores, e isso, é claro, causa um problema 
de inconsistência. A tentativa de resolver o problema de inconsistência do navegador, 
produziu duas abordagens: a abordagem CSS Normalize e a abordagem CSS Reset. 
CSS Normalize 
Normalize.css é um pequeno arquivo CSS que fornece consistência entre 
navegadores no estilo padrão dos elementos HTML. Isso significa que se observarmos 
os padrões W3C dos estilos aplicados pelos navegadores e houver uma inconsistência 
em um dos navegadores, os estilos do normalize.css corrigirão o estilo do navegador 
que apresenta a diferença. 
 
 
 
 
 
 
 
80 
Mas, em alguns casos, não podemos consertar os navegadores com defeito de 
acordo com o padrão, geralmente por causa do IE ou EDGE. Assim sendo, as correções 
no Normalize aplicarão os estilos IE ou EDGE ao restante dos navegadores. 
Normalize.css é um projeto de código aberto, continuamente atualizado no 
Github, criado por Nicolas Gallagher. Link do repositório: 
https://github.com/necolas/normalize.css/blob/master/normalize.css. 
CSS Reset 
CSS Reset tem uma abordagem diferente e diz que não precisamos dos estilos 
padrão dos navegadores. Sejam quais forem os estilos de que precisarmos, definiremos 
no projeto de acordo com nossas