¿Qué tiene de malo el CSS en línea?


170

Cuando veo el código de inicio del sitio web y ejemplos, el CSS siempre está en un archivo separado, llamado algo así como "main.css", "default.css" o "Site.css". Sin embargo, cuando estoy codificando una página, a menudo tiento a tirar el CSS en línea con un elemento DOM, como al configurar "float: right" en una imagen. Tengo la sensación de que esto es "mala codificación", ya que rara vez se hace en ejemplos.

Entiendo que si el estilo se aplicará a varios objetos, es aconsejable seguir "Don't Repeat Yourself" (DRY) y asignarlo a una clase CSS a la que haga referencia cada elemento. Sin embargo, si no voy a repetir el CSS en otro elemento, ¿por qué no alinear el CSS mientras escribo el HTML?

La pregunta: ¿Se considera malo usar CSS en línea, incluso si solo se usará en ese elemento? Si es así, ¿por qué?

Ejemplo (¿es esto malo?):

<img src="myimage.gif" style="float:right" />

1
Siempre estoy en contra de css en línea, incluso para un solo elemento, PERO veo tantos sitios comerciales plagados de atributos de estilo, que me hace preguntarme cuál es realmente la práctica aceptada.
yu_ominae el

3
Creo que los estilos en línea son vagos. Digo esto porque lo hago muy a menudo, así que sé -por qué- lo estoy haciendo, porque no tengo idea de si el estilo se mantendrá, así que solía hacerlo justo al lado del html. En estos días, con html5 y soporte pragmático para <style> </style> en cualquier lugar, utilizo una etiqueta <style> cercana mientras juego con el diseño, y luego lo migro al archivo css principal / principal después. Los mismos beneficios de velocidad e inmediatez, casi ninguna de las desventajas (efectos secundarios en elementos fuera de la página debido a que la especificidad es una).
Kzqai

3
@yu_ominae: tenga en cuenta que los "sitios comerciales" no siempre se adhieren a las mejores prácticas; De hecho es bastante raro. El factor decisivo es si el desarrollador sabe, se preocupa y tiene tiempo; o si el gerente está dispuesto a asignar el tiempo y dirigir al personal para implementarlo. Cuando la prioridad del trabajo es cumplir con la fecha límite, la calidad generalmente disminuye.
BryanH

1
Vale la pena señalar que aunque los "sitios comerciales" parecen estar usando estilos en línea, esto puede ser el resultado del uso de ciertas llamadas jQuery (por ejemplo css()) que aplican estilos en línea.
Dave Becker

Respuestas:


203

Tener que cambiar 100 líneas de código cuando desea que el sitio se vea diferente. Es posible que eso no se aplique en su ejemplo, pero si está utilizando CSS en línea para cosas como

<div style ="font-size:larger; text-align:center; font-weight:bold">

en cada página para denotar un encabezado de página, sería mucho más fácil mantener como

<div class="pageheader">  

si el encabezado de página se define en una sola hoja de estilo, de modo que si desea cambiar la apariencia de un encabezado de página en todo el sitio, cambie el CSS en un solo lugar.

Sin embargo, seré un hereje y diré que en su ejemplo, no veo ningún problema. Está apuntando el comportamiento de una sola imagen, que probablemente tenga que verse bien en una sola página, por lo que poner el CSS actual en una hoja de estilo probablemente sería exagerado.


18
Dices que mi ejemplo no es un problema, pero también admites que eres un hereje. Me gusta ese enfoque.
ChessWhiz

8
Si tuviera un centavo por cada vez que tuviera que modificar el flotante de una imagen o algún otro CSS que originalmente iba a ser "solo por un elemento" ... ... bueno, saldría a cenar fuera en un buen restaurante
Kzqai

8
Otro escenario en el que no solo está bien usar un estilo en línea, sino la única forma de darle estilo: correos electrónicos HTML.
Christophe Marois

Pero el htmlarchivo en sí también se almacena en caché.

En respuesta al usuario 663031: un sitio web con varias páginas tiene muchas páginas HTML diferentes, pero puede combinar todos sus estilos en un solo archivo CSS que se puede almacenar en caché fácilmente.
Sinthorion

68

La ventaja de tener un archivo CSS diferente es

  1. Fácil de mantener su página html
  2. Cambiar a la apariencia será fácil y puede tener soporte para muchos temas en sus páginas.
  3. Su archivo CSS se almacenará en caché en el lado del navegador. Por lo tanto, contribuirá un poco en el tráfico de Internet al no cargar algunos kbs de datos cada vez que se actualiza la página o el usuario navega por su sitio.

2
Me hago esta pregunta todos los meses (bastante nueva en la programación web) y esta es la primera vez que leo algo sobre el archivo css que se está almacenando en caché. ¡Eso lo hace por mí allí mismo!
deslumbra el

También estaba pensando en la memoria caché, pero en mi caso tengo que lidiar con CSS fusionados que son líneas de 15k, es imposible mantener toda la gran porción de basura que solo se usaría una vez en una sola página que no funciona Ya no existe. Por lo tanto, está lanzando código CSS a todos en cada visita para una sola página temporal que solo es vista por el 1% de su tráfico. No estoy seguro de que el argumento del tráfico de Internet sea válido en todos los casos. ¡Afortunadamente, los componentes web van a cambiar las cosas!
Shadoweb

@Shadowbob: ¿no sería mejor tener archivos css más pequeños en lugar de grandes? Tenga un genérico tal vez que se use para todas las páginas, pero luego tenga pequeñas hojas de estilo separadas para otras páginas. Debería ser más fácil de mantener. Y si el tráfico es un problema, entonces la producción probablemente puede fusionarse en una, en el proceso de construcción.
Darius.V

26

El enfoque html5 para la creación rápida de prototipos css

o: <style> etiquetas ya no son solo para la cabeza!

Hackear CSS

Digamos que está depurando y desea modificar su página CSS, hacer que una determinada sección solo se vea mejor. En lugar de crear sus estilos en línea de una manera rápida, sucia e insostenible, puede hacer lo que hago en estos días y adoptar un enfoque por etapas.

Sin atributo de estilo en línea

Nunca cree su CSS en línea, con lo que quiero decir: <element style='color:red'>o incluso<img style='float:right'> es muy conveniente, pero no refleja la especificidad real del selector en un archivo css real más adelante, y si lo mantiene, lamentará la carga de mantenimiento más tarde.

Prototipo con en su <style>lugar

Donde hubiera usado CSS en línea, en su lugar use <style> elementos in-page . ¡Prueba eso! Funciona bien en todos los navegadores, por lo que es excelente para las pruebas, ¡pero le permite mover con gracia tal CSS a sus archivos CSS globales cuando lo desee / lo necesite! (* solo tenga en cuenta que los selectores solo tendrán especificidad a nivel de página, en lugar de especificidad a nivel de sitio, así que tenga cuidado de ser demasiado general) Tan limpio como en sus archivos css:

<style>
.avatar-image{
    float:right
}
.faq .warning{
    color:crimson;
}
p{
    border-left:thin medium blue;
    // this general of a selector would be very bad, though.
    // so be aware of what'll happen to general selectors if they go
    // global
}
</style>

Refactorizando CSS en línea de otras personas

A veces ni siquiera eres el problema, y ​​estás lidiando con el CSS en línea de otra persona, y tienes que refactorizarlo. Este es otro gran uso para el<style> página de entrada, para que pueda quitar directamente el CSS en línea y colocarlo inmediatamente en la página en clases o identificadores o selectores mientras refactoriza. Si es lo suficientemente cuidadoso con sus selectores a medida que avanza, puede mover el resultado final al archivo css global al final con solo copiar y pegar.

Es un poco difícil transferir cada bit de css inmediatamente al archivo css global, pero con <style>elementos in-page , ahora tenemos alternativas.


23

Además de otras respuestas .... Internacionalización .

Dependiendo del idioma del contenido, a menudo necesita adaptar el estilo de un elemento.

Un ejemplo obvio serían los idiomas de derecha a izquierda.

Digamos que usaste tu código:

<img src="myimage.gif" style="float:right" />

Ahora supongamos que desea que su sitio web admita idiomas rtl; necesitaría:

<img src="myimage.gif" style="float:left" />

Entonces, si desea admitir ambos idiomas, no hay forma de asignar un valor para flotar utilizando el estilo en línea.

Con CSS esto se soluciona fácilmente con el atributo lang

Entonces podrías hacer algo como esto:

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

Manifestación


16

El CSS en línea siempre prevalecerá sobre cualquier CSS de hoja de estilo vinculada. Esto puede causarle un gran dolor de cabeza si escribe una hoja de estilo en cascada adecuada y sus propiedades no se aplican correctamente.

También daña semánticamente su aplicación: CSS se trata de separar la presentación del marcado. Cuando los enredas, las cosas se vuelven mucho más difíciles de entender y mantener. Es un principio similar a separar el código de la base de datos del código de su controlador en el lado del servidor.

Finalmente, imagine que tiene 20 de esas etiquetas de imagen. ¿Qué sucede cuando decides que deben flotar a la izquierda?


12
"siempre, siempre gana" - a menos que se use! important en la hoja de estilo
James Westgate

66
Vivo bajo el supuesto de que las personas son humanas y no usan tales monstruosidades. =)
issa marie tseng

3
@JamesWestgate hasta que alguien use! Importante en el css en línea para anular la anulación ...
Kzqai

11

El objetivo de CSS es separar el contenido de su presentación. Entonces, en su ejemplo, está mezclando contenido con presentación y esto puede ser "considerado dañino".


77
Le pagaré 5 dólares para enviar "Estilos CSS en línea considerados perjudiciales" al ACM.
BalinKingOfMoria Reinstate CMs el

11

Usar CSS en línea es mucho más difícil de mantener.

Para cada propiedad que desee cambiar, el uso de CSS en línea requiere que busque el código HTML correspondiente, en lugar de solo mirar dentro de archivos CSS claramente definidos y con suerte bien estructurados.


3
+1 - Realmente me quejo cuando nuestros diseñadores lo hacen como una solución rápida, solo para obtener algo que alinear. Se supone que el uso de un CSS externo significa nunca tener que hacer un reemplazo masivo de texto, a menos que, por supuesto, opere en una sola hoja de estilo. Ayer recibí una plantilla de panel de control y me tomó 2 1/2 horas encontrar instancias donde los íconos se modificaron con estilos en línea. Enloquecedor, te digo ... enloquecedor :)
Tim Post

1
Cuando tienes más de 50 SCSS y tu elemento de inspección solo apunta al CSS comprimido, ¡no estoy seguro de que sea el CSS el que gane en simplicidad!
Shadoweb

1
@Shadowbob para eso están los mapas de origen. thesassway.com/intermediate/using-source-maps-with-sass
Mike Chamberlain

@TimPost hay una razón por la cual nació la función "inspeccionar elemento"
Norielle Cruz

9

Esto solo se aplica al código escrito a mano. Si genera código, creo que está bien usar estilos en línea de vez en cuando, especialmente en los casos en que los elementos y controles necesitan un tratamiento especial.

DRY es un buen concepto para el código escrito a mano, pero en el código generado por máquina, opto por la "Ley de Demeter": "Lo que pertenece, debe permanecer unido". Es más fácil manipular el código que genera etiquetas de estilo que editar un estilo global por segunda vez en un archivo CSS diferente y "remoto".

La respuesta a tu pregunta: depende ...


77
Creo que esta es realmente la respuesta correcta. El mantra de "separación de preocupaciones" es solo un criterio. La "localidad" también es importante para facilitar el mantenimiento. El aspecto clave es si el estilo es reutilizable o no a nivel semántico, no simplemente sintáctico. Si ese es el caso, entonces la hoja tiene sentido. Por ejemplo, no voy a crear una clase para "float: right" solo porque dos elementos lo usan. Depende de que los elementos sean semánticamente iguales. Un estilo de "color" generalmente está relacionado semánticamente (parte del tema), y generalmente iría en una hoja.
koriander

5

Creo que incluso si desea tener un cierto estilo para un elemento, debe tener en cuenta la posibilidad de que desee aplicar el mismo estilo en el mismo elemento en diferentes páginas.

Un día, alguien puede pedir cambiar o agregar más cambios estilísticos al mismo elemento en cada página. Si tuviera los estilos definidos en un archivo CSS externo, solo tendría que hacer cambios allí, y se reflejaría en el mismo elemento en todas las páginas, lo que le ahorrará un dolor de cabeza. :-)


4

Codifique cómo desea codificar, pero si se lo pasa a otra persona, es mejor usar lo que hacen los demás. Hay razones para CSS, luego hay razones para en línea. Yo uso ambos, porque es más fácil para mí. Usar CSS es maravilloso cuando tienes mucha repetición. Sin embargo, cuando tiene un montón de elementos diferentes con propiedades diferentes, eso se convierte en un problema. Una instancia para mí es cuando estoy posicionando elementos en una página. Cada elemento como una propiedad superior e izquierda diferente. Si pongo todo eso en un CSS, eso realmente me molestaría al pasar de la página HTML a la CSS. Por lo tanto, CSS es excelente cuando desea que todo tenga la misma fuente, color, efecto de desplazamiento, etc. Pero cuando todo tiene una posición diferente, agregar una instancia de CSS para cada elemento puede ser realmente un dolor. Sin embargo, esa es solo mi opinión. CSS realmente tiene una gran relevancia en aplicaciones más grandes cuando tienes que cavar a través del código. Utilice el complemento de desarrollador web de Mozilla y le ayudará a encontrar los ID y las clases de los elementos.


2

Incluso si solo usa el estilo una vez, como en este ejemplo, aún ha mezclado CONTENIDO y DISEÑO. Búsqueda "Separación de preocupaciones".


1

El uso de estilos en línea viola el principio de Separación de preocupaciones, ya que efectivamente está mezclando marcas y estilos en el mismo archivo fuente. También, en la mayoría de los casos, viola el principio DRY (Don't Repeat Yourself) ya que solo son aplicables a un solo elemento, mientras que una clase se puede aplicar a varios de ellos (¡e incluso se puede extender a través de la magia de las reglas CSS! )

Además, el uso juicioso de las clases es beneficioso si su sitio contiene secuencias de comandos. Por ejemplo, varias bibliotecas JavaScript populares, como JQuery, dependen en gran medida de las clases como selectores.

Finalmente, el uso de clases agrega claridad adicional a su DOM, ya que efectivamente tiene descriptores que le dicen qué tipo de elemento es un nodo dado en él. Por ejemplo:

<div class="header-row">It's a row!</div>

Es mucho más expresivo que:

<div style="height: 80px; width: 100%;">It's...something?</div>

1

En este momento, el CSS en la página es lo que hay dentro porque Google lo califica como una mejor experiencia de usuario que el CSS cargado desde un archivo separado. Una posible solución es colocar el CSS en un archivo de texto, cargarlo sobre la marcha con php y enviarlo al encabezado del documento. En la <head>sección incluye esto:

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

Ponga el CSS requerido en styles / style1.txt y saldrá en la <head>sección de su documento. De esta forma, tendrá CSS en la página con la ventaja de usar una plantilla de estilo, style1.txt, que puede ser compartida por todas y cada una de las páginas, lo que permite realizar cambios de estilo en todo el sitio a través de ese único archivo. Además, este método no requiere que el navegador solicite archivos css separados del servidor (minimizando así el tiempo de recuperación / representación), ya que todo se entrega a la vez por php.

Una vez implementado esto, los estilos individuales únicos se pueden codificar manualmente donde sea necesario.


¡Si! Esto es crucial para tratar de minimizar el "tiempo para pintar primero" si todo su CSS está en archivos, diferirá el DOM hasta que el usuario haya descargado las hojas de estilo. Al tener sus estilos críticos en un nodo <styles> en línea en la cabeza, puede comenzar a representar el DOM de inmediato y diferir las hojas de estilo externas. Juega un factor importante en las conexiones ~ 3G y la velocidad percibida. +1 por su respuesta
DOfficial

1

El CSS en línea es bueno para el código generado por la máquina, y puede estar bien cuando la mayoría de los visitantes solo navegan una página en un sitio, pero una cosa que no puede hacer es manejar las consultas de los medios para permitir diferentes apariencias para pantallas de diferentes tamaños. Para eso, debe incluir el CSS en una hoja de estilo externa o en una etiqueta de estilo interna.


0

Aunque estoy totalmente de acuerdo con todas las respuestas dadas anteriormente, escribir CSS en un archivo separado siempre es mejor que la reutilización del código, la facilidad de mantenimiento, una mejor separación de las preocupaciones, hay muchos escenarios en los que las personas prefieren CSS en línea en su código de producción:

El archivo CSS externo provoca una llamada HTTP adicional al navegador y, por lo tanto, una latencia adicional. En cambio, si el CSS se inserta en línea, el navegador puede comenzar a analizarlo de inmediato. Especialmente a través de SSL, las llamadas HTTP son más costosas y agregan latencia adicional a la página. Hay muchas herramientas disponibles que ayudan a generar páginas HTML estáticas (o fragmentos de página) insertando archivos CSS externos como código en línea. Estas herramientas se utilizan en la fase de compilación y lanzamiento, donde se genera el binario de producción. De esta forma, obtenemos todas las ventajas del CSS externo y también la página se vuelve más rápida.


3
Te estás perdiendo algo relacionado con la latencia. Un problema mucho más grande , en realidad: incrustar el CSS significa que cada solicitud de página debe contener ese CSS, mientras que, de lo contrario, el navegador puede almacenarlo en caché.
Andrew Barber

Tienes razón. Es por eso que alineamos CSS cuando el tamaño del código es muy pequeño para que no cause demasiada sobrecarga en el tamaño de la página. Hay un artículo muy interesante en Yahoo! Página de pautas de rendimiento developer.yahoo.com/performance/rules.html que dice que 60-80% de los usuarios visitan su sitio diariamente con un caché vacío ( yuiblog.com/blog/2007/01/04/performance-research-part -2 ) Por supuesto, depende totalmente de la popularidad del sitio web: cuanto más popular es un sitio, más posibilidades hay de tener un caché no vacío.
Diptendu

Si bien es probable que un usuario acceda a su sitio con un caché vacío, es poco probable que acceda a su página con un caché vacío. A menos que la página sea de un solo uso (es decir, cada usuario solo la ve una vez), funcionará mejor con un archivo css separado.
astex

En la actualidad, muchas páginas web modernas están diseñadas como aplicaciones de página única, la página completa se carga solo la primera vez. La próxima vez, la página cambiará mediante una llamada AJAX. Entonces, incluso si la página es multiuso, el CSS externo se cargará solo una vez.
Diptendu

0

De acuerdo con la especificación HTML de AMP , es necesario colocar CSS en su archivo HTML (frente a una hoja de estilo externa) para fines de rendimiento. Esto no significa CSS en línea, pero no especifican hojas de estilo externas .

Una lista incompleta de optimizaciones que tal sistema de servicio podría hacer es:

  • Reemplace las referencias de imagen con imágenes dimensionadas a la vista del espectador.
  • Imágenes en línea que son visibles sobre el pliegue.
  • Variables CSS en línea.
  • Precargar componentes extendidos.
  • Minificar HTML y CSS.

0

Además de otras respuestas, no puede orientar las pseudo-clases o pseudo-elementos en CSS en línea.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.