selectores - ¿Qué tiene de malo el CSS en línea?
selectores css avanzados (16)
Cuando veo el código de inicio del sitio web y ejemplos, el CSS está siempre 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 me siento tentado a poner el CSS en línea con un elemento DOM, como al configurar "float: right" en una imagen. Me da la sensación de que esto es una "mala codificación", ya que rara vez se hace en ejemplos.
Entiendo que si el estilo se aplicará a múltiples objetos, es aconsejable seguir "No repetir" (DRY) y asignarlo a una clase de CSS para que cada elemento haga referencia. Sin embargo, si no repetiré el CSS en otro elemento, ¿por qué no en línea el CSS mientras escribo el HTML?
La pregunta: ¿El uso de CSS en línea se considera malo, incluso si solo se usará en ese elemento? Si es así, ¿por qué?
Ejemplo (¿es esto malo?):
<img src="myimage.gif" style="float:right" />
El enfoque html5 para la creación rápida de prototipos CSS
o: ¡las etiquetas <style> ya no son solo para la cabeza!
Hackear CSS
Digamos que estás depurando, y quieres modificar tu página-css, haz que cierta sección solo se vea mejor. En lugar de crear sus estilos en línea de manera rápida, sucia y sin mantenimiento, puede hacer lo que hago 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 cual quiero decir: <element style=''color:red''> o incluso <img style=''float:right''> Es muy conveniente, pero no refleja la especificidad del selector real en un archivo css real más tarde, y si lo conserva, lamentará la carga de mantenimiento más tarde.
Prototipo con <style> lugar
Donde habría usado css en línea, en su lugar use elementos de <style> en la página. ¡Pruébalo! Funciona bien en todos los navegadores, por lo que es ideal para las pruebas, pero le permite mover con gracia tales archivos CSS a sus archivos CSS globales siempre que lo desee / 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 tengan cuidado de no ser demasiado generales) 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>
Refactorizar 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 de la página <style> en la página, de modo que puede quitar directamente el css en línea y colocarlo inmediatamente en la página en clases o identificadores o selectores mientras realiza la refactorización. Si es lo suficientemente cuidadoso con sus selectores sobre la marcha, 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 de inmediato al archivo css global, pero con los elementos <style> en la página, ahora tenemos alternativas.
Además de otras respuestas ... Internationalization .
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 di que quieres que tu sitio web admita los idiomas rtl, necesitarías:
<img src="myimage.gif" style="float:left" />
Entonces, si desea admitir ambos idiomas, no hay forma de asignar un valor para flotar usando 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;
}
Aunque estoy totalmente de acuerdo con todas las respuestas anteriores que escribir CSS en un archivo separado siempre es mejor desde la reutilización del código, facilidad de mantenimiento, mejor separación de las preocupaciones, hay muchos escenarios donde la gente prefiere 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, latencia adicional. En cambio, si el CSS se inserta en línea, el navegador puede comenzar a analizarlo de inmediato. Especialmente sobre SSL Las llamadas HTTP son más costosas y suman una latencia adicional a la página. Hay muchas herramientas disponibles que ayudan a generar páginas HTML estáticas (o fragmento de página) mediante la inserción de archivos CSS externos como código en línea. Estas herramientas se utilizan en la fase de compilación y publicación donde se genera el binario de producción. De esta forma obtenemos todas las ventajas de CSS externo y también la página se vuelve más rápida.
CSS en línea siempre, siempre ganará en precedencia sobre cualquier hoja de estilos CSS vinculada. Esto puede causarle un enorme dolor de cabeza si escribe una hoja de estilo en cascada adecuada y lo hace, y sus propiedades no se aplican correctamente.
También perjudica su aplicación semánticamente: CSS trata de separar la presentación del marcado. Cuando enredas a los dos, las cosas se vuelven mucho más difíciles de comprender y mantener. Es un principio similar a separar el código de la base de datos de su código de controlador en el lado del servidor de las cosas.
Finalmente, imagina que tienes 20 de esas etiquetas de imagen. ¿Qué sucede cuando decides que deberían flotar a la izquierda?
Codifique cómo le gusta codificar, pero si se lo está pasando a otra persona, lo mejor es 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 tienes un montón de elementos diferentes con diferentes propiedades, entonces 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 que realmente me molestaría, me meteré entre la página html y css. Así que CSS es genial cuando quieres 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 doloroso. Sin embargo, esa es solo mi opinión. CSS realmente tiene una gran relevancia en aplicaciones más grandes cuando tienes que buscar código. Utilice el complemento de desarrollador web de Mozilla y lo ayudará a encontrar los elementos ID y clases.
Creo que incluso si desea tener un cierto estilo para un elemento, debe considerar 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 de estilo al mismo elemento en cada página. Si tuviera los estilos definidos en un archivo CSS externo, solo tendría que realizar cambios allí, y se reflejaría en el mismo elemento en todas las páginas, lo que le ahorraría un dolor de cabeza. :-)
De acuerdo con la Especificación HTML de AMP , es necesario poner 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 un sistema de servicio podría hacer es:
- Reemplace las referencias de imágenes con imágenes del tamaño de la ventana gráfica del espectador.
- Imágenes en línea que son visibles arriba del doblez.
- Variables de CSS en línea.
- Precargar componentes extendidos.
- Minificar HTML y CSS.
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 navega una página en un sitio, pero una cosa que no puede hacer es manejar consultas de 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.
El CSS en la página es lo que se encuentra en este momento porque Google lo califica como una mejor experiencia de usuario que css cargada 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 sección <head> incluye esto:
<head> ...
<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>
... </head>
Coloque el CSS requerido en styles / style1.txt y se escupirá en la sección <head> de su documento. De esta forma, tendrá un CSS interno con la ventaja de utilizar una plantilla de estilo, style1.txt, que puede compartir cualquier página, permitiendo que los cambios de estilo en todo el sitio se realicen a través de ese único archivo. Además, este método no requiere que el navegador solicite archivos css separados del servidor (lo que minimiza el tiempo de recuperación / procesamiento), ya que todo se entrega a la vez por php.
Una vez implementado esto, los estilos individuales de una sola vez se pueden codificar manualmente donde sea necesario.
El objetivo de CSS es separar el contenido de su presentación. Entonces en tu ejemplo estás mezclando contenido con presentación y esto puede ser "considerado dañino".
El uso de estilos en línea viola el principio de Separación de preocupaciones, ya que efectivamente se está mezclando marcado y estilo en el mismo archivo fuente. También, en la mayoría de los casos, viola el principio DRY (Do not 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 mediante la magia de las reglas CSS). )
Además, el uso prudente de las clases es beneficioso si su sitio contiene secuencias de comandos. Por ejemplo, varias librerías populares de JavaScript 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. 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>
Esto solo se aplica al código escrito a mano. Si genera código, creo que está bien usar estilos en línea aquí y allá, 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 la máquina, opto por "Law of Demeter": "Lo que pertenece, debe permanecer unido". Es más fácil manipular 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 ...
Incluso si solo usa el estilo una vez como en este ejemplo, aún debe mezclar CONTENIDO y DISEÑO. Búsqueda "Separación de inquietudes".
La ventaja de tener un archivo css diferente es
- Fácil de mantener su página html
- Cambiar a Look and feel será fácil y puede tener soporte para muchos temas en sus páginas.
- Su archivo CSS se almacenará en la memoria caché en el lado del navegador. Por lo tanto, contribuirá un poco al tráfico de Internet al no cargar algunos kbs de datos cada vez que la página se actualice o el usuario navegue por su sitio.
Tener que cambiar 100 líneas de código cuando desea que el sitio se vea diferente. Es posible que esto no se aplique en su ejemplo, pero si usa 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 de mantener como
<div class="pageheader">
si el encabezado de página está definido en una única 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ás enfocando el comportamiento de una sola imagen, que probablemente tiene que verse bien en una sola página, por lo que colocar el CSS real en una hoja de estilo probablemente sería exagerado.
Usar CSS en línea es mucho más difícil de mantener.
Para cada propiedad que desee cambiar, usar CSS en línea requiere que busque el código HTML correspondiente, en lugar de mirar dentro de archivos CSS claramente definidos y, con suerte, bien estructurados.