Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
README.md

README.md

light bulb icon

CSS Protips Awesome

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

Dê uma olhada em mais algumas listas fantásticas mantidas por @sindresorhus.

Índice

Protips

  1. Use um Reset CSS
  2. Herde o box-sizing
  3. Use unset em vez de redefinir todas as propriedades
  4. Use :not() para Aplicar/Remover Bordas
  5. Defina o line-height no body
  6. Alinhe Elementos Verticalmente
  7. Listas Separadas por Vírgula
  8. Selecione Itens Usando nth-child Negativo
  9. Ícones SVG
  10. Use o Seletor "Lobotomized Owl"
  11. Sliders em CSS com max-height
  12. Tabelas com Células de Tamanho Igual
  13. Esqueça as "Margin Hacks", use Flexbox
  14. Use Seletores de Atributo em Links Vazios
  15. Estilize Links "Default"
  16. Espaçamento Vertical Consistente
  17. Div com Proporção de Tela Fixa
  18. Estilize Imagens Quebradas
  19. Use rem para Definir Tamanhos Globais; Use em para Definir Tamanhos Locais
  20. Esconda Vídeos em Autoplay Que Não Estejam no Mudo
  21. Use :root para uma Tipografia Flexível
  22. Defina font-size em Elementos de Formulário para uma Melhor Experiência Mobile
  23. Use eventos de ponteiro para controlar eventos do mouse

Use um Reset CSS

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

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

Agora os elementos estarão sem margens, preenchimento e box-sizing. Te permitindo gerenciar o layout com o seu CSS.

Exemplo

Nota: Se você seguir a dica Herde o box-sizing abaixo você pode optar por não incluir a propriedade box-sizing em sua redefinição de CSS.

voltar ao índice

Herde o box-sizing

Faça com que o box-sizing seja herdado do html:

html {
  box-sizing: border-box;
}

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

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

voltar 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;
}

Nota: A abreviação all não é suportada no IE11 e atualmente está sendo considerada para suporte no Edge. unset não é suportado no IE11:

voltar ao índice

Use :not() para Aplicar/Remover Bordas

Ao invés de colocar a borda…

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

…para então remover no último elemento…

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

…utilize a pseudo-classe :not() para aplicar a borda apenas nos elementos corretos:

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

Claro, você poderia usar .nav li + li, mas usando :not() a intenção fica mais clara e o seletor CSS passa a definir a borda de uma maneira que nós humanos entendemos mais claramente.

Exemplo

voltar ao índice

Defina o line-height no body

Você não precisa adicionar o line-height para cada <p>, <h*>, et al. separadamente. Apenas adicione ao body:

body {
  line-height: 1.5;
}

Dessa maneira elementos de texto vão herdar o line-height do body.

Exemplo

voltar ao índice

Alinhe Elementos Verticalmente

Que bruxaria é essa? Não é bruxaria! Você realmente pode 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;
}

Isso não resolveu seu problema? O site CSS-Tricks tem um guia completo de como centralizar elementos com CSS.

Aviso: Fique atento com os bugs quando utilizar flexbox no IE11.

Exemplo

voltar ao índice

Listas Separadas por Vírgula

Transforme listas normais em listas separadas por vírgula:

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

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

Aviso: Se considerarmos acessibilidade essa dica pode não ser ideal, especialmente para usuários de leitores de tela. Além disso, copiar e/ou colar não funcionam em conteúdo criado com CSS. Proceda com cautela.

voltar ao índice

Selecione 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 você aprendeu um pouquinho sobre como usar a pseudo-classe using :not(), você pode tentar:

/* selecione todos os itens, exceto os primeiros 3 e exiba-os */
li:not(:nth-child(-n+3)) {
  display: none;
}

Mais fácil que isso só dois disso.

Exemplo

voltar ao índice

Ícones SVG

Não tem porque você não usar ícones em SVG:

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

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

Aviso: Se você tem botões feitos apenas com ícones SVG, a dica a seguir o ajudará a manter a acessibilidade:

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

voltar ao índice

Use o Seletor "Lobotomized Owl"

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

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

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

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

Exemplo

voltar ao índice

Sliders em CSS com max-height

Crie 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 se expandirá ao valor definido no max-height no hover e você terá um slider devido ao uso do overflow.

voltar ao índice

Tabelas com Células de Tamanho Igual

Não tem nada mais chato do que trabalhar com tabelas, mas você pode usar table-layout: fixed para manter as células do mesmo tamanho:

.calendar {
  table-layout: fixed;
}

Tabelas sem dor de cabeça.

Exemplo

voltar ao índice

Esqueça as "Margin Hacks", use Flexbox

Quando definir o espaçamento entre as colunas, você pode deixar os seletores nth-, first-, e last-child de lado e usar 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.

voltar ao índice

Use Seletores de Atributo em Links Vazios

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

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

Mão na roda.

Exemplo

voltar ao índice

Estilize Links "Default"

Defina estilos para links "default":

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

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

voltar ao índice

Espaçamento Vertical Consistente

Use o seletor universal dentro de um elemento para criar um espaçamento vertical consistente:

.intro > * {
  margin-bottom: 1.25rem;
}

Com um espaçamento vertical consistente o seu conteúdo fica visualmente mais agradável de ler.

voltar 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 você usar 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).

Exemplo

voltar ao índice

Estilize Imagens Quebradas

Faça com que imagens quebradas fiquem esteticamente mais agradáveis com um pouquinho de CSS:

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

Agora adicione regras com pseudo-elementos 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;
}

Leia mais sobre como estilizar imagens quebradas no artigo original por Ire Aderinokun.

voltar ao índice

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

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

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Então defina 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.

voltar ao índice

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

Ótima dica para uma stylesheet personalizada. Evite sobrecarregar o usuário com som de vídeos em autoplay. Se o som não estiver no mudo, esconda o vídeo:

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

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

voltar ao índice

Use :root para uma Tipografia Flexível

O tamanho de fonte de um site responsivo deveria ser ajustável de acordo com cada viewport. Você pode calcular o tamanho da fonte baseado na largura e na altura do viewport usando :root:

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

Assim você pode utilizar a unidade de medida root em baseada no valor calculado por :root:

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

Exemplo

voltar 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;
}

💃

voltar ao índice

Use 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.

voltar ao índice

Suporte

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