para - lista de codigos css

Estilos en línea vs clases

Question

En mi cabeza, siempre he sabido usar clases sobre estilos en línea para cualquier proyecto. ¿Pero hay artículos / publicaciones / blogs que definan los pros / contras de cada uno? Estoy en un debate sobre esto, y no puedo encontrar la publicación del blog que leí hace mucho tiempo sobre esto.

Answer 1

Ante todo:

• Si el HTML se genera o se genera independientemente del diseño general del sitio (por ejemplo, código de plantilla compartido), entonces agregue clases e ID razonablemente nombrados, vinculados exclusivamente a hojas de estilo externas. Use suficientes elementos para permitir la manipulación de CSS arbitraria. Por ejemplo, vea el CSS Zen Garden . Esto se aplica a TODOS los CMS, programas, scripts y otros contenidos de sitios generados dinámicamente. La salida HTML no debe contener ningún estilo o diseño de ningún tipo. Sin excepciones.

Suponiendo que se trata de contenido estático, entonces:

• Si hay alguna forma de reutilizar el estilo, conviértalo en una clase y en un enlace a una hoja de estilo.

• Si no hay forma alguna de reutilizar el estilo (es algo único que no tiene sentido en ningún otro lugar), entonces use un bloque <style> que haga referencia al #id del elemento.

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

Mucha gente lo llama herejía, al igual que muchas personas denuncian cualquier uso de goto en los lenguajes de programación modernos.

Sin embargo, en lugar de suscribirme al dogma estilístico, mi opinión es que debes elegir el método según tus circunstancias, lo que disminuye tu carga de trabajo en general. Las hojas de estilo agregan un nivel de direccionamiento indirecto que facilita los cambios en el nivel del sitio y ayuda a crear consistencia. Pero si tiene varias docenas de clases en cada página que solo se utilizan en un solo lugar, entonces en realidad está aumentando su carga de trabajo, no disminuyéndola.

En otras palabras, no haga algo tonto y confuso solo porque la gente le dice que es la manera correcta de hacerlo .

Answer 2

Hay una razón simple. El objetivo de CSS es separar el contenido (HTML) de la presentación (CSS). Se trata de accesibilidad y reutilización de código .

Answer 3

Las clases son los estilos reutilizables que se pueden agregar a elementos HTML. p.ej-

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

puede usar y reutilizar esta clase de texto azul a 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 los elementos HTML, las clases no deberían comenzar con un punto. mientras que el estilo en línea es como, por ejemplo,

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

Entonces, la diferencia entre ambos es que puede reutilizar las clases mientras que no puede reutilizar los estilos en línea.

Answer 4

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

CSS tiene que ver con la mejora progresiva y no con la repetición (DRY) .

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

Otras ventajas:

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

2. Las correcciones CSS incluidas condicionalmente, para ese horrible navegador que no debe ser nombrado , 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 de sitio a sitio más fácilmente.

Answer 5

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

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

Answer 6

Si la elección estuvo allí, mi primera preferencia serán las clases / otros selectores. Sin embargo, hay situaciones en las que los estilos en línea son la única manera de hacerlo. 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 tiene que hacer una banda de cebra en una lista o tabla determinada. En lugar de aplicar una clase particular a cada elemento o fila alternativa, simplemente podría usar selectores para hacer el trabajo. Eso mantendrá el código simple, pero no usará clases de CSS. Para ilustrar las tres formas :

Usando solo clase

.alternate {
    background-color: #CCC;
}

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

Usar selectores estructurales class +

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

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

Usar 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 forma parece la más portátil y encapsulada para mí. Para agregar o eliminar rayas de cualquier elemento contenedor dado, simplemente agregue o elimine la clase striped .

Sin embargo, hay casos en 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 intentar hacer clases por adelantado para cada estado posible. Por ejemplo, una interfaz de usuario que le permite al usuario colocar dinámicamente ciertos elementos en cualquier lugar de la pantalla arrastrándolos. El artículo tendrá que estar colocado de manera absoluta o relativa con coordenadas reales, como:

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

Seguramente, podríamos usar clases para cada posición posible que el div pueda 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>

Answer 7

Solo puedo pensar en dos situaciones en las que 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 (ver # 2).

2. Si los estilos en línea completan una definición de clase para un solo elemento en los casos en que los id no son apropiados o razonables. Por ejemplo, establecer la background-image de background-image de un elemento para una sola 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;
}

Answer 8

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 usará 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 receptiva y una mejor experiencia para los usuarios.

Answer 9

Usa el sentido común.

Todos saben que la presentación y el contenido deberían, en un mundo ideal, estar separados. Todos también saben 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.

Descargar una hoja de estilo de 500k para darle un estilo a un elemento porque has tomado todos los estilos posibles y lo pegaste en una hoja de estilos matará tu página, descargar 500 hojas de estilo más pequeñas para darle estilo a tu página porque las necesitas 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 prácticamente cualquier lugar donde exista el concepto. Si su proyecto hace lo que usted quiere que haga, lo hace en todos los navegadores razonables, lo hace de manera eficiente, y lo hace de manera confiable, entonces está listo para comenzar, no es mucho más difícil refactorizar el CSS que su código.

Answer 10

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

o espera...