Encontrará que en los proyectos a gran escala, el diseño y el color/sabor de CSS (si es inteligente al respecto), por lo general, sucede que están 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 fuente. Creo que la única excepción a la regla suele ser el fondo, lo que es especialmente cierto si tienes muchos degradados y cosas así.
Realmente lo que se trata es la planificación; 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, ya que los proyectos en los que trabajo son bastante gran escala y tienen un número de diferentes módulos, separamos los estilos con 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 estilo funciona algo como esto:
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í se pretende dar a entender 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 los más específicos. 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.
Así que, 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.
Avíseme si necesita más información. Me alegra que esto sea útil para ti.
Una pregunta interesante. Realmente no había considerado esto ... Estoy deseando ver las respuestas :) +1 –
¿Qué proyecto vi que te permitió poner variables en tu CSS? ¿Te gusta nombrar tu propio color? ¿Eso salió del mundo de Ruby? Tal vez un Rubyista puede iluminarme. – BuddyJoe
@Bruno: creo que estás hablando de SASS, que es la contraparte de CSS de HAML, un lenguaje de plantilla de Ruby. Tiene soporte básico para macros y variables CSS. http://haml.hamptoncatlin.com/ –