Atributo de estilo vs ID de configuración y Css externo

Question

Entiendo el concepto de mantener todos los elementos de presentación fuera del marcado y ponerlos en un archivo externo .css.

Quiero tener una idea de qué tipos de situaciones justificaría el uso del atributo de estilo frente a la configuración de ID y CSS externo.

Hasta este punto, he usado mucho el atributo de estilo, generalmente lo uso para especificar elementos de presentación específicos de ese elemento y cualquier cosa que sea para todos los elementos que extraigo en un archivo css externo pero me gustaría reevaluar Mi posición y hacer la mejor elección en el futuro.

Answer 1

Use CSS externo para definiciones estáticas. Use las búsquedas de ID de elementos y el atributo de estilo para las cosas que cambian en tiempo de ejecución o donde necesita Javascript para configurar las cosas porque CSS no es capaz de lo que desea.

Un buen ejemplo de esto último fue la división en cebra en jQuery antes del apoyo generalizado para selectores de CSS 3 :

$(document).ready = function() {
    $("table tr:nth-child(even)").addClass("striped");
});

Hoy, puedes hacerlo en el CSS estático, pero alguna vez, hacerlo en Javascript era la mejor opción.

Answer 2

Utilizo hojas de estilo externas y los motivos están a continuación:

1. Mantenibilidad: es mucho más fácil cuando todas mis presentaciones están en un solo archivo.
2. Manteniendo el código DRY - sí, este de nuevo. Antes, solía usar el atributo de estilo para configurar la pantalla en " bloque " o " ninguno " indistintamente. Ahora, solo uso una clase llamada " hide " y use esa clase si algo necesita estar oculto y elimínelo si necesita mostrar algo. En estos días de aplicaciones Ajax en toda regla, mantengo mi código libre de repetir esas cosas y es mucho más limpio.
3. Te ayuda cuando trabajas en una configuración de proyecto grande: en mi último lugar de trabajo, teníamos un conjunto de aplicaciones que compartían la misma apariencia. Al ponerlo todo en una hoja de estilo externa, incluidos los estilos que se invocarán después de que ocurra un determinado evento, ayudó al equipo a aplicar un diseño de interfaz de usuario coherente a las aplicaciones.

Traté de pensar en razones para usar atributos de estilo, pero honestamente, puedo decir que solo lo uso cuando soy flojo para abrir la hoja de estilo para cambiar algo rápidamente (no estoy muy orgulloso de esta parte, así que trato de minimizar it)

Answer 3

Una de las grandes ventajas de mover todos sus estilos a una hoja de estilo es la capacidad de mantenimiento. Encontrar estilos en línea puede ser un gran dolor para otras personas que intentan mantener su código.

Solo por esa razón, vale la pena asignar un ID específico al elemento y definir sus estilos en la hoja de estilo.

En segundo lugar, si te encuentras escribiendo muchos estilos en línea, probablemente podrías estar eliminando más de esos estilos usando las propiedades de herencia de CSS o algunas clases bien factorizadas además del ID.

En cuanto al rendimiento, la selección de ID es tan rápida como CSS, por lo que el uso de muchas clases es en realidad más lento que profundizar con ID, aunque solo sea por microsegundos.

El único tiempo real que encuentro apropiado para usar estilos en línea es para propiedades muy transitorias como la animación con javascript u ocultar y mostrar un elemento (aunque eso también se puede hacer con clases).