Vantaxes e inconvenientes de estilos en liña en CSS

CSS ou Cascading Style Sheets son o que se usa no deseño de sitios web moderno para aplicar o aspecto visual a unha páxina. Mentres HTML crea a estrutura da páxina e Javascript pode manexar comportamentos, o aspecto dun sitio web é o dominio de CSS. Cando se trata destes estilos, aplícanse máis a miúdo usando follas de estilo externas, pero tamén pode aplicar estilos CSS a un elemento específico usando o que se coñece como "estilos en liña".

Os estilos en liña son estilos CSS que se aplican directamente no HTML da páxina. Hai vantaxes e desvantaxes para este enfoque. En primeiro lugar, vexamos exactamente como están escritos estes estilos.

Como escribir un estilo en liña

Para crear un estilo CSS en liña, comeza escribindo a propiedade do seu estilo similar a como faría nunha folla de estilo, pero debe ser toda unha liña. Separar varias propiedades cun punto e coma como faría nunha folla de estilo.

fondo: #ccc; cor: #fff; fronteira: 1px negro sólido;

Coloca esa liña de estilos dentro do atributo de estilo do elemento que desexa que estea estilizado. Por exemplo, se quería aplicar este estilo a un parágrafo no seu HTML, ese elemento sería así:

Neste exemplo, este parágrafo particular aparecería cun fondo gris claro (isto é o que rendería #ccc), texto negro (desde a cor n. º 000) e cun bordo negro sólido de 1 píxel ao redor dos catro lados do parágrafo .

Vantaxes de estilos en liña

Grazas á fervenza dos estilos en liña de Cascading Style Sheet teñen a maior precedencia ou especificidade nun documento. Isto significa que se van a aplicar sen importar o que máis se dicte na súa folla de estilo externa (coa única excepción de todos os estilos que se outorguen á declaración importante desta folla, pero isto non é algo que se debería facer nos sitios de produción se o fose pode evitarse).

Os únicos estilos que teñen maior prioridade que os estilos en liña son estilos de usuario aplicados polos propios lectores. Se tes problemas para aplicar as túas mudanzas, podes probar a configuración dun estilo en liña no elemento. Se os estilos aínda non se amosan usando un estilo en liña, sabes que hai algo máis.

Os estilos en liña son fáciles e rápidos de engadir e non se preocupe en escribir o selector CSS adecuado xa que está a engadir os estilos directamente ao elemento que quere cambiar (ese elemento substitúe esencialmente o selector que desexa escribir nunha folla de estilo externa ). Non é preciso crear un documento novo (como con follas de estilo externas) ou editar un elemento novo no encabezado do documento (como con follas de estilo internas). Acaba de engadir o atributo de estilo que é válido en case todos os elementos HTML. Estas son todas as razóns polas que pode verse tentado a usar estilos en liña, pero tamén debe ter en conta algunhas desvantaxes moi significativas para este enfoque.

Desvantaxes dos estilos en liña

Debido a que os estilos en liña son os máis específicos na fervenza, poden superar as cousas ás que non o tiñas pretendido. Tamén negan un dos aspectos máis poderosos de CSS: a capacidade de lotes de estilo e moitas páxinas web desde un arquivo central de CSS para que as actualizacións futuras e os cambios de estilo sexan moito máis fáciles de manexar.

Se só tiña que usar estilos en liña, os seus documentos rápidamente volveríanse inundados e moi difíciles de manter. Isto ocorre porque os estilos en liña deben ser aplicados a cada elemento que quere. Polo tanto, se quere que todos os seus parágrafos teñan a familia tipográfica "Arial", ten que engadir un estilo en liña a cada etiqueta

no documento. Isto engade traballo de mantemento para o deseño e tempo de descarga para o lector xa que tería que cambiar isto en todas as páxinas do seu sitio para cambiar esa familia de fontes. Alternativamente, se usa unha folla de estilo separada, pode ser quen de cambiala nun só lugar e que cada páxina reciba esa actualización.

Con certeza, este é un paso cara atrás no deseño web - de volta os días da etiqueta !

Outra desvantaxe dos estilos en liña é que é imposible o estilo de pseudo-elementos e clases con eles. Por exemplo, con follas de estilo externas , pode estilizar a cor do visor, o desprazamento, o activo e a ligazón dunha etiqueta de ancoraxe, pero cun estilo en liña, todo o que pode estilo é a ligazón en si, porque iso é o que atribúe o atributo de estilo .

En definitiva, recomendamos non usar estilos en liña para as túas páxinas web porque causan problemas e fan que as páxinas traballen moito máis para manter. A única vez que usalos é cando queremos comprobar un estilo rapidamente durante o desenvolvemento. Unha vez que teñamos que mirar ben ese elemento, o movemos á nosa folla de estilo externa.

Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard.