CSS - Separación de Color y Posición

StackOverflow https://stackoverflow.com/questions/495908

Pregunta

Me pregunto lo que hacen los demás en este sentido:

Intenta mantener la posición CSS (diseño) independiente de color/sabor CSS (color de fondo, color de fondo, imágenes, tamaño de fuente y de la familia) ?

El uso de dos hojas de estilo?Combinar dos hojas de estilo en el lado del servidor?Capa de abstracción para el CSS?o no intentarlo?

Sé que a veces después de trabajar en el mismo proyecto web durante seis meses por lo general se puede vivir con la posición de CSS pero terminan queriendo cambiar los colores/imágenes.

¿Fue útil?

Solución

Tiendo a mantener todo el CSS unido, sin separar " estilos de color " de " estilos posicionales " o " estilos de diseño " ;. Encuentro eso cuando a menudo intento depurar un & Quot; módulo & Quot; es más fácil tener todas las reglas CSS aplicadas a un selector y no distribuirlas en la hoja de estilo.

Sin embargo, le sugiero que lea Creación de hojas de estilo sexy en thinkvitamin.com . Una cosa que hago es enumerar las reglas en un cierto orden cada vez, para que sepa dentro del bloque de declaración dónde encontrar lo que quiero.

Más información en http://creatingsexystylesheets.com/

de Jina Bolton

Otros consejos

Encontrará que en los proyectos a gran escala, el diseño y el color / sabor CSS (si es inteligente al respecto) por lo general simplemente están separados. En primer lugar, si te pones a ti mismo estableciendo reglas de color / tamaño de fuente / estilo de fuente familiar una y otra vez, estás perdiendo el tiempo. Por lo general, debe definir sus fuentes en un solo lugar: la etiqueta del cuerpo. Cualquier fuente adicional debe definirse en sus respectivas etiquetas ... h1, h2, p, etc. En mi opinión, no es una buena práctica dar directivas posicionales a estas etiquetas; deben colocarse dentro de un div que será responsable de su diseño. Lo mismo ocurre con el color y el tamaño de fuente. Creo que la única excepción a la regla generalmente sería material de fondo, lo cual es especialmente cierto si tienes muchos gradientes y cosas elegantes como esa.

Realmente se trata de planificar; Un proyecto bien planificado necesita muy pocas reglas de estilo de color / sabor. Entonces, para responder a su pregunta, sí, generalmente tengo un & Quot; Global.css & Quot; archivo que define todas mis fuentes y colores para h1-h5, a, p y cualquier otra etiqueta que contenga texto.

Editar:

Por lo general, dado que los proyectos en los que trabajo son bastante grandes y tienen varios módulos diferentes, separamos los estilos en una especie de jerarquía; esto tiene sentido debido a la forma en que funciona CSS, siempre que no cambie las reglas de estilo establecidas en " base " (o en nuestro caso, el global.css) en algún punto de la línea, los estilos se mantendrán. Esto ayuda porque cuando queremos modificar la fuente de nuestro sitio, simplemente cambiamos la regla de la familia de fuentes en & Quot; body & Quot; etiqueta, y se propagará por todo el sitio.

Entonces, nuestro diseño de hoja de estilo funciona más o menos así: 

Global.css (Fonts/Text/Primary font colors)
--> genericBase.css (basic page structures such as columns that are used throughout the site)
--> nav.css (left-hand nav and/or top nav bar)
--> formLayout.css (labels, inputs, fieldsets, any other form stuff)
-----> forums.css (individual modules' styles that may deviate a bit from the usual structures, or simply things specific to those pages)
-----> blogs.css
-----> messages.css (etc etc etc)

Las flechas aquí significan " orden " de los archivos en la jerarquía. Cuanto más larga sea la flecha, más abajo en la hoja de estilo estarán las reglas que contienen estos archivos, si hubiéramos puesto todos los estilos en un solo archivo.

Como puede ver, la idea es comenzar con estilos muy generales y avanzar hasta los más específicos. Recuerde que el orden en que se cargan sus archivos CSS es importante para el navegador . Puedes usar esto a tu favor. Lo interesante es que, cuando llegamos a los archivos css de nuestros módulos específicos, tenemos muy pocos estilos para escribir porque la mayoría de las otras cosas importantes se han solucionado en el camino.

Entonces, como dije, la planificación es de vital importancia. He descubierto que esta metodología hace que sea más fácil & Quot; depurar & Quot; mis estilos, y casi no uso hacks, por lo general solo para tonterías ie6.

Avísame si necesitas más información. Me alegra que esto te sea útil.

He utilizado para separar, pero era más difícil de mantener.El problema es que muchos "formato" propiedades tendrán un efecto sobre la disposición y muchos "diseño" propiedades pueden ser en realidad el diseño.

Algunos ejemplos:

Mientras que la "frontera" puede ser considerado un "formato" de la propiedad, que se toma una cierta cantidad de espacio, por lo que tendrá que ajustar su diseño cuando la configuración o la eliminación de fronteras.

"line-height", está ligado a la fuente de tamaño y puede ser considerado un "formato" de la propiedad, pero tiene una enorme influencia sobre el tamaño de sus elementos y cómo alinear verticalmente el uno al otro.

Márgenes y rellenos son a veces necesarios para el diseño y, a veces, se utiliza solo para el formato.

Si usted pensar en ello, hay muy pocas propiedades que en realidad son puramente formato o puramente de diseño.

A menudo es más fácil para mantener todo en el mismo archivo y tratar de mantenerlo limpio por tener sus declaraciones órdenes, relacionados con las propiedades agrupadas, etc.

Mantengo todo junto en un solo archivo y uso la función de carpetas en CSSEdit para mantenerlo organizado. La empresa de diseño web Viget tiene una publicación de blog sobre esta técnica aquí .

Recientemente separé mi diseño y estilos de color, y ahora tengo varios archivos css, que importo de la siguiente manera: 

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style-default.css" title="Default Style" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="style-bw.css" title="Black and White" media="screen" />

Todo el diseño está en style.css, luego los colores están en style-default.css. De esta manera tengo un estilo estándar, pero los usuarios también tienen la opción de cambiar los colores. Esto no solo ofrece opciones para el usuario, sino que facilita la realización de cambios de color sin tocar el diseño (tiendo a cambiar mis colores con mucha más frecuencia).

En Firefox, mis opciones de color se muestran en el menú Ver en " Estilo de página. "

He caído en el patrón de separar mi CSS en lo siguiente:

  • Diseño (encabezados, pies de página, logotipos - cromo general)
  • Tipografía (fuentes, tamaños, estilos de fuente en línea reutilizables)
  • Widgets

La última categoría generalmente se compone de código CSS que reutilizo entre proyectos, y generalmente se divide en:

  • Formularios (alineado a la izquierda, alineado a la derecha, estilos para los campos obligatorios, etc.)
  • Cuadrículas (2-col, 4-col, etc., etc., etc., unas 20 variedades)
  • Hacks (IE / otros hacks CSS)
  • Otras cosas (widgets AJAX, barras de herramientas, cuadros de comentarios, etc., cualquier cosa reutilizable)

Para los colores, solo guardo un archivo de texto de hoja de trucos. Mantenerlos en una hoja de estilo separada probablemente solo funcionará si eres muy, muy disciplinado.

He comenzado a usar clases para manejar colores específicamente.

.element {margen, relleno, material de diseño}

.ourcolor {#some color}

Sin embargo, alarga el atributo de clase: < div class = " elemento ourcolor " >

Sin embargo, puedo reutilizar el color: < abarcan clase = " ourcolor " > Algún texto

Hasta ahora lo prefiero ya que ajustar los colores es mucho más fácil.

Como señaló Mark W, Crear hojas de estilo sexy es fantástico leer. Una cosa que defienden es separar las preocupaciones de estilo a través de un marco:

  
      
  • screen.css: un archivo CSS de pantalla puede tener todos los estilos que desea usar en la pantalla y / o puede importar estilos adicionales, como los siguientes:      
        
    • reset.css: se puede usar un archivo CSS de restablecimiento para & # 8220; restablecer & # 8221; todo el estilo predeterminado del navegador, que puede ayudar a facilitar la compatibilidad entre navegadores.
      •   
    • typography.css: un archivo CSS de tipografía puede definir los tipos de letra, los tamaños, el interlineado, el interletraje y posiblemente incluso el color.
      •   
    • grid.css: un archivo CSS de cuadrícula puede tener su estructura de diseño (y actuar como la estructura metálica de su sitio, definiendo el encabezado básico, el pie de página y la configuración de la columna).
      •   
    •   
  • print.css: un archivo CSS de impresión incluiría los estilos que desea utilizar cuando se imprima la página.
    •   

Si sigue este patrón, los colores irían en su typography.css, y el diseño estaría en su grid.css.

Mantengo todo en un archivo y solo proporciono archivos diferentes para estilos alternativos (por ejemplo, para imprimir).

Dentro de ese archivo, mantengo el diseño general (columnas, encabezado & amp; pie de página) separado del contenido real (párrafos, encabezados, listas ...)

Estoy acostumbrado a pensar orientado a objetos, así que agrupo los estilos para diferentes objetos (menús, publicaciones de blog) juntos. Desde esa perspectiva, el color y la posición pertenecen al mismo objeto y, por lo tanto, se mantienen juntos.

Deseo poder definir colores una vez en una hoja de estilo, asignarles un nombre declarativo (por ejemplo, 'Color de encabezado') y luego usar el nombre al asignar el color a un selector ...

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top