Estilos en Línea vs Clases

En primer lugar:

• Si el HTML se construye o genera independientemente del diseño general del sitio (por ejemplo, código de plantilla compartido), agregue clases e identificadores con nombres razonables, vinculados exclusivamente a hojas de estilo externas. Utilice elementos suficientes para permitir la manipulación arbitraria de CSS. Por ejemplo, vea el CSS Zen Garden . Esto se aplica a TODOS LOS CMSes, programas, scripts y otros contenidos del sitio generados dinámicamente. La salida HTML debe contener absolutamente ningún estilo o diseño de cualquier tipo. Excepción.

Asumiendo que estás tratando con contenido estático, entonces:

• Si hay alguna forma de reutilizar el estilo, conviértelo en una clase y enlázalo a una hoja de estilos.

• Si no hay manera de reutilizar el estilo (es una cosa única que no tiene sentido en ningún otro lugar), use un bloque <style> que haga referencia al #id del elemento.

• Si el atributo CSS solo tiene sentido en el contexto del entorno HTML (por ejemplo, algunos usos de clear:) luego alineo el estilo en el elemento.

Mucha gente llama a esto herejía, al igual que mucha gente denuncia cualquier uso de goto en lenguajes de programación modernos.

Sin embargo, en lugar de suscribirte al dogma estilístico, mi opinión es que debes elegir el método basado en tus circunstancias que disminuya más tu carga de trabajo general. Las hojas de estilo añaden un nivel de indirección que facilita los cambios a nivel del sitio y ayuda a crear consistencia. Pero si tienes varias docenas de clases en cada página que solo se usan en un lugar, entonces en realidad estás aumentando tu carga de trabajo, no disminuyendo.

En otras palabras, no hagas algo tonto y confuso solo porque la gente te diga que es la manera correcta de hacerlo.

Si la opción estaba allí, mi primera preferencia será clases/otros selectores. Sin embargo, hay situaciones en las que los estilos en línea son el único camino a seguir. En otras situaciones, solo una clase CSS por sí misma requiere demasiado trabajo, y otros tipos de selectores CSS tienen más sentido allí.

Supongamos que tienes que cebra raya una lista o tabla dada. En lugar de aplicar una clase en particular a cada elemento o fila alternativa, simplemente podría usar selectores para hacer el trabajo. Que mantendrá el código simple, pero no usará clases CSS. Para ilustrar las tres maneras :

Usando solo la clase

.alternate {
    background-color: #CCC;
}

<ul>
    <li>first</li>
    <li class="alternate">second</li>
    <li>third</li>
    <li class="alternate">fourth</li>
</ul>

Usando selectores estructurales de clase +

.striped :nth-child(2n) {
    background-color: #CCC;
}

<ul class="striped">
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

Usando estilos en línea

<ul>
    <li>first</li>
    <li style="background-color: #CCC">second</li>
    <li>third</li>
    <li style="background-color: #CCC">fourth</li>
</ul>

La segunda vía me parece la más portátil y encapsulada. Para agregar o eliminar rayas de cualquier elemento contenedor dado, simplemente agregue o elimine la clase striped.

Sin embargo, hay casos en los que los estilos en línea no solo tienen sentido, sino que son el único camino a seguir. Cuando el conjunto de valores posibles es enorme, será estúpido tratar de hacer clases de antemano para cada estado posible. Por ejemplo, una interfaz de usuario que permite al usuario colocar dinámicamente ciertos elementos en cualquier lugar de la pantalla arrastrándolos. El objeto tendrá que ser colocado absoluta o relativamente con coordenadas reales tales como:

<div style="position: absolute; top: 20px; left: 49px;">..</div>

Seguramente, podríamos usar clases para cada posible posición que el div puede tomar, pero eso no es recomendable. Y uno puede ver fácilmente por qué:

.pos_20_49 {
    top: 20px;
    left: 49px;
}
.pos_20_50 {
    top: 20px;
    left: 50px;
}
// keep going for a million such classes if the container size is 1000x1000 px

<div class="pos_20_49">..</div>

Usa el sentido común.

Todo el mundo sabe que la presentación y el contenido deberían, en un mundo ideal, estar separados. Todo el mundo también sabe que esto no funciona muy bien la mayor parte del tiempo. Todos sabemos que se supone que debes usar divs en lugar de tablas para el diseño, pero también sabemos que para cualquier circunstancia en la que no tengas control total sobre el contenido, simplemente no funciona correctamente.

Descargando una hoja de estilo de 500k para darle estilo a un elemento porque ha tomado todas las medidas posibles el estilo y pegarlo en una hoja de estilo matará tu página, descargar 500 hojas de estilo más pequeñas para darle estilo a tu página porque las necesitas todas también matará tu página.

La reutilización es genial en concepto, pero la realidad es que solo es útil en ciertos contextos. Esto se aplica igualmente a casi cualquier lugar donde exista el concepto. Si tu proyecto hace lo que quieres que haga, lo hace en todos los navegadores razonables, lo hace de una manera eficiente y lo hace de manera confiable, entonces estás listo, no es dramáticamente más difícil refactorizar css que el código.

No puedo pensar en ningún pros para los estilos en línea.

CSS se trata de Mejora progresiva, y no repetirse (SECO).

Con las hojas de estilo, cambiar el aspecto es tan fácil como cambiar una línea en el código HTML. ¿Cometer un error o al cliente no le gusta el cambio? volver a la hoja de estilo antigua.

Otras ventajas:

1. Su sitio puede ajustarse automáticamente a diferentes medios, como para impresión y para dispositivos de mano dispositivo.

2. Las correcciones CSS condicionalmente incluidas, para ese navegador gawd-awful que no se nombrará, se convierten en un complemento.

3. Sus usuarios pueden personalizar fácilmente el sitio con complementos como Stylish.

4. Puede reutilizar o compartir código más fácilmente de un sitio a otro.

Solo puedo pensar en dos situaciones donde los estilos en línea son apropiados y/o razonables.

1. Si los estilos en línea se aplican mediante programación. Por ejemplo, mostrar y ocultar elementos con JavaScript, o aplicar estilos específicos de contenido al representar una página (consulte #2).

2. Si los estilos en línea completan una definición de clase para un solo elemento en casos en los que los id no son apropiados o razonables. Por ejemplo, establecer el background-image de un elemento para un imagen en una galería:

HTML

<div id="gallery">
    <div class="image" style="background-image:url(...)">...</div>
    <div class="image" style="background-image:url(...)">...</div>
    <div class="image" style="background-image:url(...)">...</div>
</div>

CSS

#gallery .image {
    background: none center center;
}

Para que este hilo esté completo, vale la pena mencionar que los estilos en línea son la única manera de ir en GMail cuando creas correos electrónicos HTML+CSS.

Para información detallada ver: http://www.email-standards.org/clients/gmail /

Suponiendo que esté utilizando hojas de estilo externas, un beneficio adicional además de los mencionados anteriormente es el almacenamiento en caché. El navegador descargará y almacenará en caché su hoja de estilos una vez, y luego utilizará la copia local cada vez que se haga referencia a ella. Esto permite que su marcado sea más compacto. Menos marcado para transferir y analizar significa una sensación más sensible y una mejor experiencia para sus usuarios.

Los estilos en línea son definitivamente el camino a seguir. Basta con mirar http://www.csszengarden.com / - eso nunca hubiera sido posible con clases y hojas de estilo externas...

O espera...

Las clases son los estilos reutilizables que se pueden agregar a los elementos HTML. e. g-

<style> 
   .blue-text{color:Blue;}
</style>

Puede usar y reutilizar esta clase de texto azul en cualquier elemento HTML Tenga en cuenta que en su elemento de estilo CSS, las clases deben comenzar con un punto. En las declaraciones de clase de sus elementos HTML, las clases no deben comenzar con un punto. mientras que el estilo en línea es como e. g-

<p style="color:Blue;">---</p>

Así que la diferencia entre ambos es que puedes reutilizar clases mientras que no puedes reutilizar estilos en línea.