lista - gradient generator css online

CSS-Separación de color y posición (9)

Me pregunto qué harán los demás a este respecto:

¿Tratas de mantener el CSS posicional (diseño) separado del CSS de color / sabor (color, color de fondo, imágenes de fondo, tamaño de fuente y familia)?

Use dos hojas de estilo? ¿Combina dos hojas de estilo del servidor? Capa de abstracción para el CSS? o ni siquiera lo intentas?

Sé que a veces, después de trabajar en el mismo proyecto web durante seis meses, generalmente puedo vivir con el CSS posicional, pero al final quiero cambiar los colores / imágenes.

Como Mark W señaló, Crear hojas de estilo atractivas es una lectura fantástica. Una cosa que sí recomiendan es separar las preocupaciones sobre el estilo a través de un marco:

screen.css: un archivo CSS de pantalla puede tener todos los estilos en los que desea que se use en la pantalla y / o puede importar estilos adicionales, como los siguientes:
reset.css: se puede utilizar un archivo CSS de reinicio para "restablecer" todo el estilo predeterminado del navegador, lo que puede ayudar a facilitar la compatibilidad entre navegadores.
typography.css: un archivo CSS de tipografía puede definir sus tipos de letra, tamaños, interlineado, interletraje y posiblemente incluso el color.
grid.css: un archivo CSS de cuadrícula puede tener su estructura de disposición (y actuar como la estructura alámbrica 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 sigues este patrón, los colores irán en tu typography.css, y el diseño estaría en tu grid.css.

Descubrirá que, en los proyectos a gran escala, el diseño y el color / sabor CSS (si es inteligente al respecto) suelen estar separados. En primer lugar, si te ves a ti mismo estableciendo reglas de estilo de color / tamaño de fuente / estilo de fuente una y otra vez, estás perdiendo el tiempo. Normalmente, debe definir sus fuentes en un solo lugar: la etiqueta de cuerpo. Las fuentes adicionales deben definirse en sus respectivas etiquetas ... h1, h2, p, etc. En mi opinión, no es una buena práctica darles a estas etiquetas directivas posicionales; deben colocarse dentro de un div que será responsable de su diseño. Lo mismo aplica para el color y el tamaño de letra. Creo que la única excepción a la regla suele ser el fondo, que es especialmente cierto si tienes muchos degradados y cosas así.

Realmente, lo que se reduce a planificar es; un proyecto bien planificado necesita muy pocas reglas de estilo / color de sabor. Entonces, para responder a su pregunta, sí, generalmente tengo un archivo "Global.css" 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 a gran escala y tienen varios módulos diferentes, los separamos en una especie de jerarquía; esto tiene sentido por la forma en que funciona CSS: siempre que no modifiques las reglas de estilo establecidas en la "base" (o en nuestro caso, global.css) en algún lugar de la línea, los estilos palo. Esto ayuda porque cuando queremos modificar la fuente de nuestro sitio, simplemente cambiamos la regla de la familia de fuentes en la etiqueta "cuerpo", y se propagará por todo el sitio.

Por lo tanto, nuestro diseño de hoja de estilo funciona de la siguiente manera:

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í implican el "orden" de los archivos en la jerarquía. Cuanto más larga es la flecha, más abajo en la hoja de estilo, las reglas que contienen estos archivos serían, si hubiéramos puesto todos los estilos en un solo archivo.

Como ve, la idea es comenzar con estilos muy generales y trabajar hasta llegar a lo más específico. Recuerde que el orden en que 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 resuelto en el camino.

Entonces, como dije, la planificación es de vital importancia. Descubrí que esta metodología hace que sea más fácil "depurar" mis estilos, y casi no utilizo ningún tipo de pirateo, por lo general solo para tonterías ie6.

Déjeme saber si usted necesita más información. Me alegra que esto sea útil para ti.

Empecé a usar clases para manejar los colores específicamente.

.element {margin, padding, layout stuff}

.ourcolor {#some color}

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

Sin embargo, puedo reutilizar el color: <span class = "ourcolor"> Algunos textos

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

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

Dentro de ese archivo, mantengo el diseño general (columnas, headeer y pie de página) separado de los contenidos reales (párrafos, encabezados, listas ...)

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

Estoy deseando poder definir los colores una vez en una hoja de estilos, asignarles un nombre declarativo (por ejemplo, ''HeadingColour'') y luego usar el nombre cuando asigne el color a un selector ...

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 fuentes en línea reutilizables)
Widgets

La última categoría generalmente está compuesta por el código CSS I reutilizado entre proyectos, y generalmente se divide en:

Formularios (alineados a la izquierda, alineados a la derecha, estilos para campos obligatorios, etc.)
Grids (2-col, 4-col, etc, etc., etc., aproximadamente 20 variedades)
Hacks (IE / otros hacks de CSS)
Otras cosas (widgets AJAX, barras de herramientas, cuadros de comentarios, etc., todo reutilizable)

Para los colores, solo tengo un archivo de texto de hoja de trampa. Mantenerlos en una hoja de estilos separada probablemente solo funcione si eres muy, muy disciplinado.

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 en el blog sobre esta técnica aquí .

Separé mis estilos de diseño y color recientemente, 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 los cambios de color sin tocar el diseño (tiendo a cambiar mis colores con mucha más frecuencia).

En Firefox, mis opciones de color aparecen en el menú de visualización en "Estilo de página".

Solía separarlos, pero era más difícil de mantener. El problema es que muchas propiedades de "formateo" tendrán un efecto en el diseño y muchas de las propiedades de "diseño" en realidad pueden ser de diseño.

Algunos ejemplos:

Si bien "borde" se puede considerar una propiedad de "formateo", sí ocupan una cierta cantidad de espacio, por lo que deberá ajustar su diseño al configurar o eliminar bordes.

"line-height" está relacionado con el tamaño de fuente y se puede considerar una propiedad de "formateo", pero tiene una gran influencia en el tamaño de sus elementos y en cómo se alinean verticalmente entre sí.

Los márgenes y los rellenos a veces son necesarios para el diseño y, en ocasiones, solo se usan para formatear.

Si lo piensas bien, hay muy pocas propiedades que en realidad son puramente de formato o puramente de diseño.

A menudo es más fácil mantener todo en el mismo archivo y tratar de mantenerlo limpio haciendo que sus órdenes de declaraciones, propiedades relacionadas se agrupen, etc.

Tiendo a mantener todos los CSS juntos, sin separar "estilos de color" de "estilos posicionales" o "estilos de diseño". Encuentro que cuando trato de depurar un "módulo" específico, es más fácil tener todas las reglas de CSS aplicadas a un selector, y no extenderlas sobre la hoja de estilos.

Sin embargo, sugiero que lea Creating Sexy Stylesheets en thinkvitamin.com. Una cosa que hago es enumerar las reglas en un cierto orden cada vez, así que sé dentro del bloque de declaración dónde encontrar lo que quiero.

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