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

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" />

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.

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.

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.

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

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?

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".

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.

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 ...

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. :-)

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.

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".

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>

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.

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.

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.

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.

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