Etiquetas <style> en línea frente a propiedades CSS en línea

¿Cuál es el método preferido para configurar las propiedades de CSS?

Propiedades de estilo en línea:

<div style="width:20px;height:20px;background-color:#ffcc00;"></div>

Propiedades de estilo en <style>...</style>etiquetas:

<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>

Las reglas de estilo se pueden adjuntar usando:

• Archivos externos
• Etiquetas de estilo en la página
• Atributo de estilo en línea

En general, prefiero usar hojas de estilo vinculadas porque:

• los navegadores pueden almacenar en caché para mejorar el rendimiento; y
• son mucho más fáciles de mantener desde una perspectiva de desarrollo.

Sin embargo, su pregunta es específicamente sobre la styleetiqueta frente a los estilos en línea. Prefiero usar la styleetiqueta, en este caso, porque:

• proporciona una clara separación entre el marcado y el estilo;
• produce un marcado HTML más limpio; y
• es más eficiente con selectores para aplicar reglas a múltiples elementos en una página, mejorando la administración y reduciendo el tamaño de la página.

Los elementos en línea solo afectan a su elemento respectivo.

Una diferencia importante entre la styleetiqueta y el atributo en línea es la especificidad. La especificidad determina cuándo un estilo reemplaza a otro. Generalmente, los estilos en línea tienen una mayor especificidad.

Lea CSS: Specificity Wars para una mirada entretenida a este tema.

¡Espero que eso ayude!

Aquí hay un aspecto que podría marcar la diferencia:

Si cambia el estilo de un elemento en JavaScript, está afectando el estilo en línea. Si ya hay un estilo allí, lo sobrescribe permanentemente. Pero, si el estilo se definió en una hoja externa o en una <style>etiqueta, entonces la configuración del estilo en línea ""restaura el estilo de esa fuente.

Depende.

El punto principal es evitar el código repetido.

Si el mismo código necesita ser reutilizado 2 veces o más, y debe estar sincronizado cuando se cambia, use una hoja de estilo externa.

Si solo lo usa una vez, creo que en línea está bien.

Para responder a su pregunta directa: ninguno de estos es el método preferido. Utilice un archivo separado.

Los estilos en línea solo deben usarse como último recurso o configurarse mediante código Javascript. Los estilos en línea tienen el nivel más alto de especificidad, así que anule sus hojas de estilo reales. Esto puede dificultar su control (también debe evitarlo !importantpor la misma razón).

<style>No se recomienda un bloque incrustado , porque pierde la capacidad del navegador de almacenar en caché la hoja de estilo en varias páginas de su sitio.

En resumen, siempre que sea posible, debe poner sus estilos en un archivo CSS separado.

Desde el punto de vista de la capacidad de mantenimiento, es mucho más sencillo administrar un elemento en un archivo que administrar varios elementos en posiblemente varios archivos.

Separar su estilo ayudará a hacer su vida mucho más fácil, especialmente cuando las tareas laborales se distribuyen entre diferentes personas. La reutilización y la portabilidad le ahorrarán mucho tiempo en el futuro.

Cuando se usa un estilo en línea, eso anulará las propiedades externas que se establezcan.

Estoy de acuerdo con la opinión de la mayoría de que las hojas de estilo externas son el método preferido.

Sin embargo, aquí hay algunas excepciones prácticas:

• Imágenes de fondo dinámicas. Las hojas de estilo CSS son archivos estáticos, por lo que debe usar un estilo en línea para agregar un estilo dinámico (de una base de datos, CMS, etc.) background-image.

• Si es necesario ocultar un elemento cuando se carga la página, no es práctico utilizar una hoja de estilo externa para ello, ya que siempre habrá un retraso antes de que se procese la hoja de estilo y el elemento estará visible hasta que eso suceda. style="display: none;"es la mejor manera de lograrlo.

• Si una aplicación le va a dar al usuario un control preciso sobre un valor CSS particular, por ejemplo, el color del texto, entonces puede ser necesario agregar esto a los styleelementos en línea o <style></style>bloques en la página . Por ejemplo style="color:#{{ page.color }}", o<style> p.themed { color: #{{ page.color }}; }</style>

Siempre que sea posible, es preferible usar la clase .myclass{}y el identificador #myclass{}, así que use un archivo CSS dedicado o una etiqueta <style></style>dentro de un html . El estilo en línea es bueno para cambiar la opción CSS de forma dinámica con javascript.

Puede haber diferentes razones para elegir una forma u otra.

• Si necesita especificar css para elementos que se generan programáticamente (por ejemplo, modificando css para imágenes de diferentes tamaños), puede ser más fácil de mantener usar css en línea.
• Si algún CSS es válido solo para la página actual, debería utilizar la etiqueta de script que un archivo .css separado. Es bueno que el navegador no tenga que realizar demasiadas solicitudes http.

De lo contrario, como se indicó, es mejor usar un archivo css separado.

Puede configurar CSS usando tres formas diferentes como se menciona a continuación: -

1.External style sheet
2.Internal style sheet
3.Inline style

La forma preferida / ideal de configurar el estilo CSS es usar hojas de estilo externas cuando el estilo se aplica a muchas páginas. Con una hoja de estilo externa, puede cambiar el aspecto de un sitio web completo cambiando un archivo.

el uso de muestra puede ser: -

<head>
    <link rel="stylesheet" type="text/css" href="your_css_file_name.css">
</head>

Si desea aplicar un estilo único a un solo documento, puede utilizar la hoja de estilo interna.

No utilice hojas de estilo en línea, ya que mezcla el contenido con la presentación y pierde muchas ventajas.