Follas de estilo en liña, incrustadas e externas: aquí tes que saber
O desenvolvemento de sitios web de primeira liña adoita representarse como unha banca de 3 patas. Estas pernas son as seguintes:
A segunda parte deste taburete, CSS ou Cascading Style Sheets é o que estamos mirando aquí hoxe. En concreto, queremos abordar os 3 tipos de estilos que pode engadir a un documento.
- Estilos en liña
- Estilos incorporados
- Estilos externos
Cada un destes tipos de estilos CSS ten os seus beneficios e desvantaxes, polo que imos dar un ollo máis profundo a cada un deles individualmente.
Estilos en liña
Os estilos en liña son estilos escritos directamente na etiqueta no documento HTML. Os estilos en liña afectan só a etiqueta específica á que se aplican. Aquí tes un exemplo dun estilo en liña aplicado a unha ligazón estándar, ou áncora, etiqueta:
Esta regra CSS convertería a decoración de texto subliñada por baixo desta ligazón. Non obstante, non cambiaría ningunha outra ligazón na páxina. Esta é unha das limitacións dos estilos en liña. Xa que só cambian nun elemento específico, terías que esparcir o teu HTML con estes estilos para conseguir un deseño de páxina real. Esa non é unha boa práctica. De feito, é un paso eliminado dos días das etiquetas "fonte" e a mestura de estrutura e estilo nas páxinas web.
Os estilos en liña tamén teñen especificidade moi alta.
Isto failles moi difíciles de sobrescribir con outros estilos non en liña. Por exemplo, se desexa que un sitio sexa sensible e que modifique o xeito no que un elemento mira determinados puntos de interrupción mediante consultas multimedia , os estilos en liña dun elemento dificultarán moito.
En última análise, os estilos en liña realmente só son apropiados cando se usan de forma moi escasa.
De feito, raramente usei estilos en liña nas miñas páxinas web.
Estilos incorporados
Os estilos incorporados son estilos que están incrustados no xefe do documento. Os estilos incorporados afectan só as etiquetas da páxina onde están inseridas. Unha vez máis, este enfoque nega un dos puntos fortes de CSS. Xa que cada páxina tería estilos no
, se quería facer un cambio no sitio web, como cambiar a cor das ligazóns de vermello a verde, tería que facer este cambio en cada páxina, xa que todas as páxinas utilizan unha folla de estilo incrustada. Isto é mellor que os estilos en liña, pero aínda é problemático en moitos casos.
Follas de estilo que se engaden ao
dun documento tamén engaden unha cantidade significativa de código de marca a esa páxina, que tamén pode facer que a páxina sexa máis difícil de manexar no futuro.
O beneficio das follas de estilo incrustadas é que se carga inmediatamente coa propia páxina, en lugar de esixir que se cargue outros ficheiros externos. Isto pode beneficiarse dunha velocidade de descarga e unha perspectiva de rendemento .
Follas de estilo externas
A maioría dos sitios hoxe usan follas de estilo externas. Os estilos externos son estilos escritos nun documento separado e despois ligados a varios documentos web. As follas de estilo externas poden afectar calquera documento ao que están unidas, o que significa que se ten un sitio web de 20 páxinas onde cada páxina usa a mesma folla de estilo (isto adoita ser como está feito), pode facer un cambio visual para cada un das páxinas simplemente editando esa folla de estilo.
Isto facilita moito a xestión de sitios a longo prazo.
A desvantaxe das follas de estilo externas é que precisan páxinas para buscar e cargar estes ficheiros externos. Non todas as páxinas usarán todos os estilos na folla CSS, polo que moitas páxinas cargarán unha páxina CSS moito maior que a que realmente precisa.
Aínda que é certo que hai un impacto de rendemento para os ficheiros CSS externos, sen dúbida pode minimizarse. Realista, os ficheiros CSS son só ficheiros de texto, polo que generalmente non son moi grandes para comezar. Se todo o sitio usa 1 ficheiro CSS, tamén obtén o beneficio de que este documento se garde na caché despois de que se cargue inicialmente.
Isto significa que pode haber un pequeno desempeño na primeira páxina algunhas visitas, pero as páxinas posteriores usarán o arquivo CSS almacenado en caché, polo que se rexeitará calquera resultado. Os ficheiros CSS externos son como eu compro todas as miñas páxinas web.