CSS ou Cascading Style Sheets, são a forma aceita pela indústria de web design de adicionar estilos visuais a um site. Com CSS, você pode controlar o layout da página, cores, tipografia, imagem de plano de fundo e muito mais. Basicamente, se for um estilo visual, CSS é a maneira de trazer esses estilos para o seu site.
Conforme você adiciona estilos CSS a um documento, pode notar que o documento começa a ficar cada vez mais longo. Mesmo um site pequeno com apenas um punhado de páginas pode acabar com um arquivo CSS de tamanho considerável - e um site muito grande com muitas e muitas páginas de conteúdo exclusivo pode ter arquivos CSS muito grandes. Isso é agravado por sites responsivos que tem muitos consultas de mídia incluído nas folhas de estilo para alterar a aparência do visual e o layout da página para telas diferentes.
Sim, os arquivos CSS podem ser longos. Este não é um grande problema quando se trata de desempenho do site e velocidade de download, porque mesmo um arquivo CSS extenso provavelmente será bem pequeno (já que na verdade é apenas um documento de texto). Ainda assim, cada pequeno detalhe conta no que diz respeito à velocidade da página, portanto, se você pode tornar sua folha de estilo mais enxuta, é uma boa ideia. É aqui que a "vírgula" pode ser muito útil na sua folha de estilo!
Vírgulas e CSS
Você deve estar se perguntando que papel a vírgula desempenha na sintaxe do seletor CSS. Como nas frases, a vírgula traz clareza - não código - para os separadores. A vírgula em um Seletor CSS separa seletores múltiplos dentro dos mesmos estilos.
Por exemplo, vamos dar uma olhada em alguns CSS abaixo.
th {cor: vermelho; }
td {cor: vermelho; }
p.red {cor: vermelho; }
div # firstred {color: red; }
Com esta sintaxe, você está dizendo que deseja º Tag, td tags, tags de parágrafo com a classe vermelha e a tag div com o ID primeiro todas para ter a cor de estilo vermelha.
Isso é CSS perfeitamente aceitável, mas existem duas desvantagens significativas em escrevê-lo desta forma:
- No futuro, se você decidir alterar o cor da fonte dessas propriedades para azul, você deve fazer essa alteração quatro vezes em sua folha de estilo.
- Ele adiciona muitos caracteres extras à sua folha de estilo que você não precisa. Esses 4 estilos podem não parecer exageros, mas se você continuar fazendo isso em toda a sua folha de estilo, as linhas se somarão e a folha será muito, muito maior do que precisa ser.
Para evitar essas desvantagens e otimizar seu arquivo CSS, tentaremos usar vírgulas.
Usando vírgulas para separar seletores
Em vez de escrever 4 seletores CSS separados e 4 regras, você pode combinar todos esses estilos em uma propriedade de regra, separando os seletores individuais com uma vírgula. Aqui está como isso seria feito:
th, td, p.red, div # firstred {color: red; }
O caractere de vírgula basicamente atua como a palavra "ou" dentro do seletor. Então, isso se aplica a º tags OU td tags OU tags de parágrafo com a classe vermelha OU a tag div com o primeiro ID. Isso é exatamente o que tínhamos antes, mas em vez de precisar de 4 regras CSS, temos uma única regra com vários seletores. Isso é o que a vírgula faz no seletor, nos permite ter vários seletores em uma regra.
Essa abordagem não apenas torna os arquivos CSS mais enxutos e limpos, mas também torna as atualizações futuras muito mais fáceis. Agora, se você quiser mudar a cor de vermelho para azul, você só precisa fazer a mudança em um local, em vez de nas 4 regras de estilo originais que tínhamos! Pense nessa economia de tempo em um arquivo CSS inteiro e você verá como isso economizará tempo e espaço a longo prazo!
Variação de sintaxe
Algumas pessoas optam por tornar o CSS mais legível, separando cada seletor em sua própria linha, em vez de escrever tudo em uma linha como acima. É assim que isso seria feito:
º,
td,
p.red,
div # firstred
{
cor vermelha;
}
Observe que você coloca uma vírgula após cada seletor e então usa "enter" para quebrar o próximo seletor em sua própria linha. Você NÃO adiciona uma vírgula após o seletor final.
Ao usar vírgulas entre seus seletores, você cria um folha de estilo compacta que é mais fácil de atualizar no futuro e que é mais fácil de ler hoje!