2010-06-23 8 views
9

¿Ustedes alguna vez usan estilos en línea para los one-offs?¿Estilos inline para one-offs?

Por ejemplo, yo quería hacer sólo una lista en particular en mis cartas de uso del sitio:

<ol style="list-style-type:lower-alpha"> 

¿Es realmente tan malo? ¿O pondrías una identificación y luego la enterrarías en tu gran archivo CSS maestro, donde te resultará difícil volver a encontrarlo?

+1

Probablemente lo incluiría, a menos que fuera uno de varios 'one-offs' en mi HTML. Entonces comenzaría a buscar similitudes y posibles clases. Pero sí, a veces en línea. –

+0

Un breve comentario, si agregara esa regla a mi CSS, le daría una clase en lugar de una identificación, por lo que es más reutilizable. Aparte de eso, estaría de acuerdo con las respuestas existentes. – Fenton

Respuesta

5

No, lo que hiciste es correcto. Los estilos en línea están destinados a usarse solo una vez. Por supuesto, me parece que muchas veces esto se ha usado (ab).

0

No abofetearé un id en él, pincharé un class y lo encontraré más tarde utilizando la función de búsqueda de mi editor.

1

Todavía lo pondría en el archivo como class, si eso es lo que está haciendo en todos lados. Imagine si alguien más intentara encontrar ese estilo en el archivo CSS maestro y pasara horas buscando algo que no estaba allí.

Además, ¿qué ocurre si decides que te gusta este estilo y quieres usarlo en otro lugar? Tendría que poner el archivo CSS maestro de todos modos.

+3

Lo buscaría con alguna herramienta de desarrollo como Firebug, e inmediatamente vería de dónde salió su estilo. –

+1

Una persona miraría la fuente para encontrar el nombre de clase que debe buscar. Cuando lo hicieran, verían claramente el estilo en línea y no necesitarían abrir un archivo .css – MrChrister

+0

Estoy de acuerdo con Matthew. Supongamos que usted o su cliente deciden hacer algunos cambios de diseño. ¿Por qué ir a través de ambos archivos HTML y CSS cuando puede cambiar fácilmente todo lo que necesita cambiar simplemente alterando un archivo? –

0

Lo haría class it. Si el sitio algún día será heredado por alguien más, hazles un favor y mantente constante. Además, será más fácil cambiarlo si algún día decides que lower-alpha ya no funciona para ti.

3

No ... nunca hagas esto. Donde sea que creas que hay una sola vez, a la vuelta de la esquina acecha una de dos. Entonces un tres. Entonces un cuatro.

Tómese los 60 segundos adicionales para hacerlo bien: usted y la persona que lo sigue con el mantenimiento se alegrarán de haberlo hecho.

+0

Siempre puedo convertirlo cuando necesito la segunda aparición. El problema que encuentro a veces es nombrarlo apropiadamente. Crees que es una sola, así que le das una identificación que es específica para ese caso, como 'login-box' o lo que sea, y luego quieres usarlo en otro lugar ... y luego ... o tienes que cambiar el nombre de las cosas, o comienzas a llamar cosas a "casillas de acceso" que realmente no lo son. – mpen

+2

la solución para allí es poner una coma # login-box, # alguna-caja {some-css :;}, más razones para no hacerlo en línea ... – Kasumi

0

Debería ponerlo en el archivo CSS. Tengo un modelo mental que dice styling = CSS. Si no está en el CSS, francamente me confundiría más adelante.

Además, ¿qué pasa si desea volver a utilizar el estilo? Quiero decir que dices que es para UN artículo ahora, pero quién sabe.

Es una buena práctica usar css/classes, y generalmente valdrá la pena.

6

La presentación de su problema revela un problema adicional que está afectando su decisión: ya sea en línea el estilo o ocúltelo en un gran archivo CSS.

Sabes que la mejor elección es colocar las reglas de estilo relevantes en un archivo CSS. Desea colocar las reglas de estilo relevantes en un archivo CSS, pero se muestra intimidado por la tarea de administrar el archivo CSS.

La definición de las reglas de diseño en línea es menos dolorosa que mantener un archivo CSS grande. Los problemas que enfrenta con un gran archivo CSS solo empeorarán a medida que crezca el proyecto.

Necesita romper el archivo CSS grande en un conjunto de archivos CSS más manejables.

Un conjunto de archivos CSS puede ser mucho más fácil de administrar si tienen un nombre sensato y contienen reglas agrupadas apropiadamente.Puede optar por un archivo CSS para el diseño, uno para la tipografía, uno para los colores y quizás uno por página para cada página que sea significativamente diferente.

Un conjunto de archivos CSS es más fácil para usted, un único archivo CSS es mejor desde la perspectiva del rendimiento del usuario final.

Resolver estas dos necesidades conflictivas es sencillo: desarrolle con un conjunto de archivos CSS y haga que su proceso de compilación los combine en un solo archivo CSS (minimizado).

+0

Esto. Además, ¿has mirado en [Sass] (http://sass-lang.com/)? Sass es un preprocesador CSS que (entre otras cosas) combinará tus archivos de entrada en un único archivo de salida. Simplemente proporcione los nombres de archivo de sus archivos adicionales comenzando con un guión bajo y terminando con una extensión '.scss'. Estos archivos se considerarán ["parciales"] (http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials) y no se compilarán. Luego, en un archivo principal '@ import' todos sus parciales y se quedará con un solo archivo de salida. Sass también elimina una gran cantidad de cruxt CSS y la repetición haciendo que sus archivos sean aún más fáciles de mantener. – thirdender

1

Para mí, la razón número 1 para evitar siempre el estilo en línea es la previsibilidad en proyectos grandes en los que participan varios diseñadores/desarrolladores.

Supongamos que ha agregado su estilo en línea único a esa lista ordenada, y luego otro participante desea agregar un estilo general a todas las listas ordenadas a través de su enorme hoja de estilo. Dado que su sitio/proyecto es tan grande, es probable que nunca note su hack de una sola vez, y por lo tanto creerá que el nuevo estilo también se aplica a su lista ordenada, sin darse cuenta de que ha anulado el estilo con sus estilos en línea.

Pero si eres la única persona que mantiene este proyecto ... ¡adelante!

1

Lo pondría en una clase, pero definiría la clase en CSS en línea en la página. Luego, si necesita expandirse para usarlo en otro lugar, puede simplemente mover la clase a un archivo CSS compartido.

Además, estoy de acuerdo con la otra respuesta que señala que Firebug o similar puede rastrear de dónde viene una pieza de estilo en particular, por lo que "¿de dónde viene eso?" obvio ya no es una preocupación altamente ponderada en mi libro. Es bueno hacerlo cuando es trivial, pero no vale la pena cambiarlo por otras medidas.

1

Yo voto por la inclusión. Si este estilo es realmente especial para esta instancia en particular, es un lugar perfecto para definirlo, y lo salva de un archivo CSS inflado y difícil de mantener, especialmente si tiene un sitio grande y está usando un solo CSS. archivo para todo su sitio.

El argumento de que "CSS es donde busco estilos" simplemente significa que estás siendo flojo.

El argumento de que alguien tardaría horas en encontrar esto si estaba en línea en lugar de en CSS significa que no es un desarrollador web muy bueno.

El argumento de que alguien más va a querer cambiar globalmente el estilo para decir "<li>" más adelante y se perderá este caso es en realidad una buena razón A inline ella. Si sabes que quieres que sea un estilo único, hazlo así, ya sea a través de la especificidad en tu CSS o en línea, pero yo voto este último.

1

que hacer esto, pero estrictamente única con las siguientes reglas:

1) Una regla de estilo en línea debe tener exactamente un propiedad

<!--// Acceptable --//--> 
<ol style="list-style-type:lower-alpha"> 

<!--// No!!! --//--> 
<ol style="list-style-type:lower-alpha; font-weight: bold; "> 

2) Cualquier elemento con un estilo en línea regla no puede contener cualquier elementos descendientes que tienen una regla de estilo en línea.

<!--// Acceptable --//--> 
<ol style="list-style-type:lower-alpha"> 
    <li>Item One</li> 
    <li>Item Two</li> 
</ol> 

<!--// No!!! --//--> 
<ol style="list-style-type:lower-alpha;"> 
    <li>Item One</li> 
    <li style="font-size: small;">Item Two</li> 
</ol> 

<!--// Instead (example) --//--> 
<ol class="product-details"> 
    <li class="shortdesc">blah blah</li> 
    <li class="longdesc">Blah Blah Blah</li> 
</ol>