Refatoração de CSS
Organize suas folhas de estilo com sucesso
Descrição do livro
Revisar seu código a fim de remover redundâncias e inconsistências – processo conhecido como refatoração – é uma prática comum quando usamos linguagens de programação. Com este guia prático, o autor Steve Lindstrom mostra não só como estruturar o CSS para construir sites responsivos e fáceis de usar, mas também como utilizar a refatoração e criar um CSS mais legível e possível de manter.
Um bom CSS é essencial para a aparência dos sites modernos – é tão importante quanto o HTML que determina a apresentação do site e o JavaScript que executa a aplicação. Não importa se você está iniciando seu primeiro projeto de CSS ou se está organizando um código existente, este livro apresenta estratégias para construir uma base de código CSS que esteja de acordo com os princípios de uma boa arquitetura.
Saiba o que é refatoração de código e como ela se relaciona com o CSS
Explore como os navegadores web usam a cascata para determinar os estilos a serem aplicados a cada elemento
Escreva um CSS previsível, extensível e possível de manter, além de possibilitar a reutilização de código
Classifique os estilos de CSS e utilize-os de acordo com seus propósitos
Faça a manutenção do CSS definindo quais navegadores e dispositivos devem ser testados
Conheça estratégias para organizar seus estilos, refatorando o CSS e avaliando o seu sucesso
Sumário
Sumário
- Prefácio
- Capítulo 1 ■ Refatoração e arquitetura
- O que é refatoração?
- O que é arquitetura de software?
- Arquiteturas boas são previsíveis
- Arquiteturas boas possibilitam reutilização de código
- Arquiteturas boas são extensíveis
- Arquiteturas boas permitem manutenção
- Arquitetura de software e refatoração
- Deficiências que levam à refatoração
- Mudança de requisitos
- Arquitetura com design precário
- Subestimar as dificuldades
- Ignorar as melhores práticas
- Quando o código deve ser refatorado?
- Quando o código NÃO deve ser refatorado?
- Tenho permissão para refatorar o meu próprio código?
- Exemplos de refatoração
- pela internet
- Exemplo de refatoração 2: um exemplo simples de refatoração de CSS
- Resumo do capítulo
- Capítulo 2 ■ Compreendendo a cascata
- O que é a cascata?
- Especificidade dos seletores
- Ordem dos conjuntos de regras
- CSS inline e especificidade
- Sobrescrevendo a cascata com a declaração !important
- Resumo do capítulo
- Capítulo 3 ■ Escrevendo um CSS melhor
- Use comentários
- Estruture os conjuntos de regras de forma consistente
- Organize as propriedades com prefixos de fornecedor
- Simplifique os seletores
- Seletores com bom desempenho
- Desacople CSS e JavaScript
- Utilize prefixos em classes e IDs usados pelo JavaScript
- Modifique estilos de elementos com classes
- Use classes
- Atribua nomes significativos às classes
- Evite classes supermodularizadas
- Construa uma caixa melhor
- box-sizing: content-box
- box-sizing: border-box
- content-box ou border-box?
- Resumo do capítulo
- Capítulo 4 ■ Classificando diferentes tipos de estilo
- A importância da classificação de estilos
- Estilos para normalização
- Estilos de base
- Definindo estilos de base
- Metadados de documento
- Elementos de seção
- Elementos associados a cabeçalhos e texto
- Tags de âncora
- Semântica textual
- Listas
- Elementos para agrupamento
- Tabelas
- Formulários
- Imagens
- Estilos de componentes
- Defina o comportamento a ser implementado
- Deixe que os estilos dos componentes sejam granulares
- Deixe o contêiner do componente sobrescrever os estilos visuais
- Delegue a atribuição das dimensões aos contêineres estruturais
- Estilos estruturais
- Estilos utilitários
- Estilos específicos de navegadores
- Resumo do capítulo
- Capítulo 5 ■ Testes
- Por que é difícil testar?
- Em quais navegadores é importante testar?
- Parcela de mercado dos navegadores
- Estatísticas de navegadores e resoluções de tela no Google Analytics
- Testando com vários navegadores
- Safari para iOS
- Android
- Testando com versões antigas de navegadores
- Internet Explorer e Microsoft Edge
- Firefox
- Safari e Safari para iOS
- Chrome
- Testando as inovações
- Serviços de testes oferecidos por terceiros
- Testando com ferramentas de desenvolvedor
- Emulando tamanhos de dispositivos
- O DOM e os estilos CSS
- Testes de regressão visuais
- Dicas para testes de regressão visuais
- Testes de regressão visuais com o Gemini
- Mantendo o seu código
- Padrões de codificação
- Bibliotecas de padrões
- Resumo do capítulo
- Capítulo 6 ■ Localização do código e estratégias de refatoração
- Organize o CSS dos estilos menos específicos para os mais específicos
- Estilos para normalização
- Estilos de base
- Estilos para componentes e seus contêineres
- Estilos estruturais
- Estilos utilitários
- Estilos específicos de navegadores
- Vários arquivos ou um único arquivo grande?
- Servindo o CSS
- Desenvolvendo com um único arquivo
- Desenvolvendo com vários arquivos
- Fazendo uma auditoria de seu CSS antes da refatoração
- Estratégias de refatoração
- Estruture os conjuntos de regras de forma consistente
- Remova códigos mortos
- Desacople CSS e JavaScript
- Separe os estilos de base
- Remova IDs redundantes
- Converta IDs em classes
- Separe os estilos utilitários
- Defina componentes reutilizáveis
- Remova CSS inline e classes supermodularizadas
- Separe hacks de CSS específicos para navegadores
- Avaliando o sucesso
- Seu site apresenta falhas?
- Número de bugs de UI
- Menos tempo necessário para desenvolvimento e testes
- Resumo do capítulo
- Apêndice A ■ normalize css
- Sobre o autor
- Colofão
Livros relacionados
Recursos
Opinião dos leitores
Diogo M de O
Livro com conteúdo ótimo, bem escrito e tem diversas dicas. Já utilizo no meu dia a dia e recomendo!
Dener P
Infelizmente o livro é bem fraco, ele se perde no assunto do foco "Refatoração", e acaba sendo uma introdução ao CSS reset.