Por que unha simple coma simplifica a codificación
CSS ou Cascading Style Sheets son a forma aceptada da industria de deseño web para engadir estilos visuais a un sitio. Con CSS, pode controlar deseño de páxina, cores, tipografía , imaxe de fondo e moito máis. Basicamente, se é un estilo visual, entón CSS é a forma de traer eses estilos ao teu sitio web.
Ao engadir estilos CSS a un documento, pode observar que o documento comeza a estar máis longo e máis longo. Incluso un sitio pequeno con só un puñado de páxinas pode chegar a ter un arquivo CSS considerable, e un sitio moi grande con moitas e moitas páxinas de contido único pode ter arquivos CSS moi grandes. Isto componse de sitios de resposta que teñen moitas consultas de medios incluídas nas follas de estilo para cambiar o aspecto visual e a páxina para pantallas diferentes.
Si, os ficheiros CSS pódense extender. Este non é un gran problema cando se trata do rendemento do sitio e da velocidade de descarga, porque incluso un arquivo CSS longo é susceptible de ser bastante pequeno (xa que é realmente só un documento de texto). Aínda así, cada pouco conta o momento da velocidade da páxina, polo que se pode facer máis flexible a súa folla de estilo, esa é unha boa idea. Aquí é onde a "coma" pode ser moi útil na súa folla de estilo.
Comas e CSS
Quizais se preguntou o papel que desempeña a coma na sintaxe do selector CSS . Como en frases, a coma trae claridade -non código- aos separadores. A coma nun selector de CSS separa múltiples selectores dentro dos mesmos estilos.
Por exemplo, vexamos algúns CSS a continuación.
th {cor: vermello; }
td {cor: vermello; }
p.red {cor: vermello; }
div # firstred {cor: vermello; }
Con esta sintaxe, está dicindo que quere etiquetas th, etiquetas td, etiquetas de parágrafo coa clase vermella, ea etiqueta div co ID primeiro para que todas teñan a cor do estilo vermello.
Isto é CSS perfectamente aceptable, pero hai dous inconvenientes importantes para escribilo deste xeito:
- No futuro, se decides cambiar a cor dos tipos de letra a azul, tes que cambiar catro veces na túa folla de estilo.
- Engade moitos caracteres adicionais á súa folla de estilo que non precisa. Estes 4 estilos poden non parecer excesivos, pero se continúa facendo isto en toda a súa folla de estilo, as liñas sumaranse e esa folla será moito máis grande do que debe ser.
Para evitar estes inconvenientes, e para racionalizar o seu ficheiro CSS, intentaremos usar comas.
Usar coma para separar selectores
No canto de escribir 4 selectores CSS separados e 4 regras, pode combinar todos estes estilos nunha propiedade de regras separando os selectores individuais cunha coma. Velaquí como se faría isto:
th, td, p.red, div # firstred {cor: vermello; }
O carácter comma basicamente funciona como a palabra "e" dentro do selector. Polo tanto, isto aplícase a etiquetas t h e etiquetas td e etiquetas de parágrafo coa clase vermella E a etiqueta div co primeiro ID. Isto é exactamente o que tiñamos antes, pero en lugar de necesitar 4 regras CSS, temos unha única regra con múltiples selectores. Isto é o que fai a coma no selector, permítenos ter varios selectores nunha regra.
Non só este enfoque fai que os ficheiros CSS sexan máis delgados e limpas, tamén facilite as actualizacións futuras. Agora, se quería cambiar a cor de vermello a azul, só tes que facer o cambio nun lugar en vez das regras orixinais de 4 estilos que tivemos. Pense nestes aforros de tempo en todo un arquivo CSS e podes ver como isto vai aforrar tempo e espazo na runa longa.
Variación de sintaxe
Algunhas persoas optan por facer que o CSS sexa máis lexible separando cada selector pola súa propia liña, en lugar de escribir todo nunha liña como a anterior. Así foi como se faría:
th,
td,
p.red,
div # firstred
{
cor: vermello;
}
Teña en conta que coloque unha coma despois de cada selector e despois use "enter" para romper o próximo selector na súa propia liña. Non engades unha coma despois do selector final.
Ao usar comas entre os seus selectores, crea unha folla de estilo máis compacta que é máis fácil de actualizar no futuro e que é máis fácil de ler hoxe.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 17 de febreiro de 17