CSS, ou Cascading Style Sheets, é 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 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 têm muitas consultas de mídia incluídas 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. Isso 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 é 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
th {cor: vermelho; }
td {cor: vermelho; }
p.red {cor: vermelho; }
div # firstred {color: red; }
type = “code”> 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 a cor da fonte dessas propriedades para azul, terá que fazer essa alteração quatro vezes em sua folha de estilo.
- Ele adiciona muitos caracteres extras de que você não precisa à sua folha de estilo. 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; }
type = “code”> 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 ID firstred. 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;
}
type = “code”> Observe que você coloca uma vírgula após cada seletor e, em seguida, 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. Usando 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!
