CSS, ou Cascading Style Sheets, são a maneira 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 fundo e muito mais. Basicamente, se é um estilo visual, então CSS é o caminho para trazer esses estilos para o seu site.
À medida que você adiciona estilos CSS a um documento, talvez perceba que o documento começa a ficar cada vez mais longo. Até mesmo um pequeno site com apenas algumas páginas pode acabar com um arquivo CSS considerável - e um site muito grande com muitas e muitas páginas de conteúdo exclusivo pode ter arquivos CSS muito grandes. Isso é composto por sites responsivos que têm muitas consultas de mídia incluídas nas folhas de estilo para alterar a aparência visual e a exibição da página em telas diferentes.
Sim, arquivos CSS podem ficar longos. Este não é um grande problema quando se trata de desempenho do site e velocidade de download, porque mesmo um longo arquivo CSS provavelmente será bem pequeno (já que é realmente apenas um documento de texto). Ainda assim, cada pouquinho conta quando se trata de velocidade de página, então se você pode tornar sua folha de estilo mais enxuta, isso é uma boa ideia. É aqui que a "vírgula" pode ser muito útil em sua folha de estilo!
Vírgulas e CSS
Você pode ter se perguntado qual papel a vírgula desempenha na sintaxe do seletor CSS. Como nas sentenças, a vírgula traz clareza - não código - para os separadores. A vírgula em um seletor de CSS separa vários seletores dentro dos mesmos estilos.
Por exemplo, vamos ver algumas CSS abaixo.
th {cor: vermelho; }td {cor: vermelho; }p.red {cor: vermelho; }div # firstred {color: red; }
Com esta sintaxe, você está dizendo que você quer º Tag, td tags, tags de parágrafo com a classe red e a tag div com o ID firstred all para que a cor do estilo fosse vermelha.
Isto é perfeitamente aceitável CSS, mas há duas desvantagens significativas para escrever desta forma:
- No futuro, se você decidir alterar a cor da fonte dessas propriedades para azul, será necessário fazer essa alteração quatro vezes na sua folha de estilos.
- Ele adiciona muitos caracteres extras à sua folha de estilos que você não precisa. Esses 4 estilos podem não parecer um exagero, mas se você continuar fazendo isso em toda a sua folha de estilo, as linhas serão adicionadas e essa folha será muito, muito maior do que precisa ser.
Para evitar essas desvantagens e simplificar seu arquivo CSS, tentaremos usar vírgulas.
Usando vírgulas para separar seletores
Em vez de escrever 4 seletores de 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 {cor: vermelho; }
O caractere de vírgula basicamente atua como a palavra "e" dentro do seletor. Então isso se aplica a th tags ANDtd tags E tags de parágrafo com a classe red AND a tag div com o ID firstred. Isso é exatamente o que tínhamos antes, mas em vez de precisar de 4 regras de CSS, temos uma única regra com vários seletores. Isso é o que a vírgula faz no seletor, isso nos permite ter vários seletores em uma regra.
Essa abordagem não apenas torna os arquivos CSS mais simples e limpos, como também torna as atualizações futuras muito mais fáceis. Agora, se você quiser alterar a cor de vermelho para azul, só precisa fazer a alteração em um local, em vez das quatro regras de estilo originais que tivemos! Pense sobre essas economias de tempo em todo um arquivo CSS e você poderá ver como isso economizará tempo e espaço na longa runa!
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 escrevê-lo em uma única linha, conforme descrito 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, em seguida, usa "enter" para dividir 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 uma folha de estilo mais compacta que é mais fácil de atualizar no futuro e que é mais fácil de ler hoje!
Artigo original de Jennifer Krynin. Editado por Jeremy Girard em 5/8/17
