CSS Protips

Uma coleção de dicas para aumentar as tuas habilidades no CSS.

Dá uma olhada em outras listas fantásticas mantidas por @sindresorhus.

Índice

• Protips
• Suporte
• Contribuições

Protips

1. Usa um Reset CSS
2. Herda o box-sizing
3. Use unset em vez de redefinir todas as propriedades
4. Usa :not() para Aplicar/Remover Bordas
5. Verifique se a fonte está instalada localmente
6. Define o line-height no body
7. Alinha Elementos Verticalmente
8. Definir :focus para elementos de formulário
9. Listas Separadas por Vírgula
10. Seleciona Itens Usando nth-child Negativo
11. Ícones SVG
12. Usa o Seletor "Lobotomized Owl"
13. Sliders em CSS com max-height
14. Tabelas com Células de Tamanho Igual
15. Esquece as "Margin Hacks", use Flexbox
16. Usa Seletores de Atributo em Links Vazios
17. Estiliza Links "Default"
18. Div com Proporção de Tela Fixa
19. Estiliza Imagens Quebradas
20. Usa rem para Definir Tamanhos Globais; Usa em para Definir Tamanhos Locais
21. Esconde Vídeos em Autoplay Que Não Estejam no modo Mudo
22. Usa :root para uma Tipografia Flexível
23. Defina font-size em Elementos de Formulário para uma Melhor Experiência Mobile
24. Use eventos de ponteiro para controlar eventos do mouse
25. Definir display: none em quebras de linha usadas como espaçamento

Usa um Reset CSS

Reiniciar o CSS vai ajudar te a manter a consistência de estilo em diferentes navegadores com um ponto de partida limpo para elementos de estilo. Tu podes usar a biblioteca de reset CSS como Normalize, ou se preferires,adota uma abordagem mais simplificada.:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Agora os elementos estão sem margens, preenchimento e box-sizing.Permitindo-te gerir o layout com o teu CSS.

Passeata

Nota: Se tu seguires o guia Herda o box-sizing abaixo, podes optar por não incluir a propriedade box-sizing na tua redefinição de CSS.

^{Regressar ao índice}

Herda o box-sizing

Faz com que o box-sizing seja herdado do html:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Assim fica mais fácil de alterar o box-sizing em plugins ou outros componentes que tenham um comportamento diferente.

Passeata

^{Regressar ao índice}

Use unset em vez de redefinir todas as propriedades

Ao redefinir as propriedades de um elemento, não é necessário redefinir cada propriedade individual:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

Você pode especificar todas as propriedades de um elemento usando a abreviação all. Definir o valor como unset altera as propriedades de um elemento para seus valores iniciais:

button {
  all: unset;
}

^{voltar ao índice}

Usa :not() para Aplicar/Retirar Bordas

Ao invés de colocar a borda…

/* adiciona a borda */
.nav li {
  border-right: 1px solid #666;
}

…para então retirar o último elemento…

/* retira a borda */
.nav li:last-child {
  border-right: none;
}

…utiliza a pseudo-class :not() para aplicar a borda apenas nos elementos corretos:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

O seletor CSS define a borda da maneira que um humano a descreveria.

Passeata

^{Regressar ao índice}

Verifique se a fonte está instalada localmente

Você pode verificar se uma fonte está instalada localmente antes de buscá-la remotamente, o que também é uma boa dica de desempenho.

@font-face {
  font-family: "Dank Mono";
  src:
    /* Full name */
    local("Dank Mono"),
    /* Postscript name */
    local("Dank-Mono"),
    /* Otherwise, download it! */
    url("//...a.server/fonts/DankMono.woff");
}

code {
  font-family: "Dank Mono", system-ui-monospace;
}

Dica de chapéu para Adam Argyle por compartilhar este protip e exemplo.

^{Regressar ao índice}

Define o line-height no body

Não precisas de adicionar o line-height para cada <p>, <h*>, et al. separadamente. Apenas adiciona ao body:

body {
  line-height: 1.5;
}

Desta forma elementos de texto vão herdar o line-height do body.

Passeata

^{Regressar ao índice}

Definir :focus para elementos de formulário

Os usuários de teclado com visão dependem do foco para determinar onde os eventos de teclado vão na página. Faça com que os elementos do formulário se foquem e sejam consistentes com a implementação padrão do navegador:

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

Passeata

^{Regressar ao índice}

Alinha Elementos Verticalmente

Que bruxaria é essa? Não é bruxaria!Tu realmente podes centralizar elementos verticalmente:

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

...e também com CSS Grid:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

Isto não resolveu o teu problema? O site CSS-Tricks tem um guia completo em como centralizar elementos com CSS.

Passeata

^{Regressar ao índice}

Listas Separadas por Vírgula

Transforma listas normais em listas separadas por vírgula:

ul > li:not(:last-child)::after {
  content: ",";
}

Utilize a pseudo-class :not() para evitar que a vírgula seja adicionada depois do último item.

Aviso: Tendo em conta acessibilidade esta dica pode não ser ideal, especialmente para utilizadores de leitores de tela. Além disso, copiar e/ou colar não funciona em conteúdo criado com CSS. Procede com cautela.

^{Regressar ao índice}

Seleciona Itens Usando nth-child Negativo

Utilize nth-child negativo no CSS para selecionar itens de 1 a n.

li {
  display: none;
}

/* mostrar itens de 1 a 3 */
li:nth-child(-n+3) {
  display: block;
}

Já que aprendeste um bocadinho sobre como usar a pseudo-class using :not(), agora podes tentar:

/* seleciona todos os itens, exceto o primeiro 3 e exibe-os */
li:not(:nth-child(-n+3)) {
  display: none;
}

Mais fácil que isto não há.

Passeata

^{Regressar ao índice}

Ícones SVG

Não há motivo nenhum para não usares ícones em SVG:

.logo {
  background: url("logo.svg");
}

A vantagem da SVG é que o ícone fica bom em qualquer resolução, além de ter suporte amplo em todos os browsers desde o IE9. Agora podes desfazer-te dos teus arquivos .png, .jpg, ou ainda .gif-jif-qissomano.

Aviso: Se tens botões feitos apenas com ícones SVG, a dica a seguir ajudará-te a manter a acessibilidade:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

^{Regressar ao índice}

Usa o Seletor "Lobotomized Owl"

O nome é super estranho (traduzido literalmente para:"coruja lobotomizada"), mas o seu uso do seletor universal (*) com o seletor adjacente (+) pode ser muito útil:

* + * {
  margin-top: 1.5em;
}

Neste exemplo, todos os elementos acompanhados de outros elementos recebem margin-top: 1.5em.

Para mais exemplos utilizando o seletor "lobotomized owl", lê o artigo escrito por Heydon Pickering no site A List Apart.

Passeata

^{Regressar ao índice}

Sliders em CSS com max-height

Cria sliders usando apenas CSS com max-height e overflow-y: hidden:

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

O elemento expandirá-se ao valor definido no max-height no hover e terás um slider devido ao uso do overflow.

^{Regressar ao índice}

Tabelas com Células de Tamanho Igual

Não há nada mais chato do que trabalhar com tabelas, mas agora podes usar table-layout: fixed para manter as células do mesmo tamanho:

.calendar {
  table-layout: fixed;
}

Tabelas sem dores de cabeça.

Passeata

^{Regressar ao índice}

Esquece as "Margin Hacks", usa a Flexbox

Quando definires o espaçamento entre as colunas,deixa os seletores nth-, first-, e last-child de lado e usa a propriedade space-between do flexbox:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Assim as colunas ficam espaçadas uniformemente.

^{Regressar ao índice}

Usa Seletores de Atributo em Links Vazios

Mostra links para <a> tags vazias que possuem o atributo href:

a[href^="http"]:empty::before {
  content: attr(href);
}

Mão na roda.

Passeata

^{Regressar ao índice}

Estiliza Links "Default"

Define estilos para links "default":

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Desta forma, links que foram inseridos por CMS – que normalmente não possuem o atributo class – vão ser estilizados sem comprometer outros links.

^{Regressar ao índice}

Div com Proporção de Tela Fixa

Para criar uma div com proporção de tela fixa, tudo que você precisa fazer é adicionar padding (top ou bottom) a div pai:

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Se usares 20% no padding a altura da div vai ser igual a 20% de sua largura. Independente da largura do viewport, a div filho vai sempre manter a proporção de tela (100% / 20% = 5:1).

Passeata

^{Regressar ao índice}

Estiliza Imagens Quebradas

Faz com que imagens quebradas fiquem esteticamente mais agradáveis com um pouquinho de CSS:

img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Agora adiciona regras com pseudo-elements para mostrar uma mensagem e a URL da imagem quebrada:

img::before {
  content: "Desculpe, a imagem abaixo não pode ser carregada :(";
  display: block;
  margin-bottom: 10px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

Lê mais um pouco sobre como estilizar imagens quebradas no artigo original por Ire Aderinokun.

^{Regressar ao índice}

Usa rem para Definir Tamanhos Globais; Usa em para Definir Tamanhos Locais

Depois de definires o tamanho de fonte base na raíz (html { font-size: 100%; }), define o tamanho de fonte para elementos de texto utilizando em:

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Então define o tamanho da fonte de módulos utilizando rem:

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

Assim fica mais fácil de estilizar e manter cada módulo, além de ser flexível.

^{Regressar ao índice}

Esconde Vídeos em Autoplay Que Não Estejam no Mudo

Ótima dica para uma stylesheet personalizada. Evita sobrecarregar o utilizador com sons de vídeos em autoplay. Se o som não estiver no mudo, esconde o vídeo:

video[autoplay]:not([muted]) {
  display: none;
}

E aqui está mais uma entre as muitas vantagens de usar a pseudo-class :not().

^{Regressar ao índice}

Usa :root para uma Typografia Flexível

O tamanho de fonte de um site responsive deverá ser ajustável de acordo com cada viewport.Podes calcular o tamanho da fonte baseando-te na largura e na altura do viewport usando :root:

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

Desta forma,podes utilizar a unidade de medida root em baseada no valor calculado por :root:

body {
  font: 1rem/1.6 sans-serif;
}

Passeata

^{Regressar ao índice}

Defina font-size em Elementos de Formulário para uma Melhor Experiência Mobile

Para evitar zoom indesejado em elementos de formulários de navegadores mobile (iOS Safari, et al) quando um <select> é selecionado, adicione font-size no seletor:

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

💃

^{Regressar ao índice}

Usa eventos de ponteiro para controlar eventos do mouse

Eventos de ponteiro permitem que você especifique como o mouse interage com o elemento que está tocando. Para desativar o evento de ponteiro padrão em um botão, por exemplo:

button:disabled {
  opacity: .5;
  pointer-events: none;
}

É simples assim.

^{Regressar ao índice}

Definir display: none em quebras de linha usadas como espaçamento

Como Harry Roberts apontou, isso pode ajudar a impedir que os usuários do CMS usem quebras de linha extras para espaçamento:

br + br {
  display: none;
}

^{Regressar ao índice}

Suporte

Versões atuais do Chrome, Firefox, Safari, e Edge.