Organización/estructura CSS

Question

He estado trabajando para encontrar la mejor manera de organizar el código CSS, especialmente en sitios más grandes. Estoy menos interesado en escribir estilo y más en cómo las personas estructuran y administran su código.

He estado siguiendo esta estructura la que me siento funciona bastante bien para el mantenimiento pero quería obtener su opinión sobre esto y escuchar otros métodos:

/*======================================= 
1. =reset 
=======================================*/ 
/** 
Anything but * reset 
**/ 

/*======================================= 
2. =base 
=======================================*/ 
/** 
Base rules so naked HTML has basic style and displays consistently x-browser 
**/ 

/*======================================= 
3. =base forms 
=======================================*/ 
/** 
Base form framework 
**/ 

/*======================================= 
4. =base site 
=======================================*/ 
/** 
Rules common across the majority of pages 
e.g. header, footer, main columns, navigation, search bar etc. 
**/ 

/*======================================= 
5. =recurring styles 
=======================================*/ 
/** 
Re-useable snippets -- not to include positioning/structure etc. 
e.g. buttons, icons etc. 
**/ 

/*======================================= 
6. =recurring modules 
=======================================*/ 
/** 
Re-usable modules common to multiple pages/views but not majority 
e.g. a product carousel could be on the homepage as well as the product page and maybe even the checkout page etc. 
**/ 

/*======================================= 
7. =homepage 
=======================================*/ 
/** 
contains rules only applicable to homepage 
**/ 

/*======================================= 
8. =about page 
=======================================*/ 
/** 
contains rules only applicable to about page 
**/ 

/*======================================= 
9. =contact page 
=======================================*/ 
/** 
contains rules only applicable to contact page 
**/ 

...and so on 

Cualquier pensamiento sería muy apreciada.

Rich

Answer 1

las divisiones que se han especificado mirada buena - me gustaría sugerir manteniendo cada sección en su propia forms.css archivo reset.css base.css - se puede combinar fácilmente los archivos cuando se implementa utilizando http://developer.yahoo.com/yui/compressor/. Ayuda a mantener el CSS un poco más pequeño al hacer el desarrollo.

Answer 2

Uso SASS y organizo todo eso usando archivos (un archivo luego podría incluirse en otro). Tiene sentido, porque siempre sé dónde buscar algo específico y la gente no se confunde al navegar a través de un largo archivo CSS. Por lo tanto, disciplina a otras personas para que no dejen "ventanas rotas".

Answer 3

Me enfrenté al mismo problema. Busco en la web sin encontrar una respuesta definitiva.

Terminé de presentar mi archivo CSS común similar a su diseño CSS. Luego coloco la página específica css en sus propios archivos. Por qué saturar el common.css, con el CSS específico de la página. A muchas personas los artículos/publicaciones les preocupaba que demasiados archivos ralentizarían el sitio debido a las conexiones abiertas del navegador. Si bien reconozco que esto podría ser un problema, lo abordaré cuando se convierta en uno. Como se señaló en una de las otras respuestas, siempre puedo fusionar y comprimir el CSS al momento de la implementación.

Answer 4

Mi proyecto actual es una gran aplicación SAAS que tiene un montón de css para manejar. Prefiero mantener el mío en un solo archivo, no solo por la velocidad de carga, sino también para minimizar la cantidad de veces que tengo que saltar cuando estoy editando ... además, no es necesario lidiar con las peculiaridades de YUI. Mi empleador anterior se estandarizó en YUI y lo usamos extensivamente ... funciona, pero puede ponerse realmente pesado de prisa.

En lo que respecta a la estructura, rompo mi código un poco más. Comienzo con declaraciones principales como */body/html/H1/P, etc. Luego, hago una sección para el contenido específico del jefe. Sigue eso con una sección de cuerpo general, con subsecciones para cada página que pueda tener contenido específico. Cierro con una sección específica del pie de página. Me parece que si lo estructuramos lógicamente a medida que se construye la página, al menos tengo una idea de dónde buscar: encabezado en la parte superior, pie de página en la parte inferior, etc. Y, puedo pasar de código a prueba local para implementar en dos teclas presionadas

Tenga cuidado con la minificación en CSS. Claro, funciona Pero en el caso de mi último contrato, estuvimos trabajando en sitios que cambiaron casi a diario en algunos casos y un análisis de negocios reveló que quemaríamos más recursos de la empresa que minimizaban y minimizaban lo que nos beneficiaría de crear css simples y limpios. . Siempre que esté almacenando en caché y no está cargando múltiples archivos CSS, está bien. En la situación de ese trabajo, 1 página en particular obtenía 1 millón de unidades únicas al día, y el grupo empresarial mantenía el contenido sin comprimir a pesar de un ahorro potencial de 5gb por día en una mejora de 5k por minificación. El ancho de banda es más barato que los ingenieros de IU, supongo ...

Answer 5

Mi formato básico es un comentario de bloque en la parte superior y sumergiéndote en las principales regiones con comentarios de encabezado (similar al tuyo).

/* 
* Title of the site 
* Author 
* Date created 
* Last updated 
* 
* 1-2 line description of what the style sheet is for. 
* 
*/ 


/* Reset (probably imported) 
-------------------------------------------------------------------------------- */ 
... 


/* A Framework (probably imported) 
-------------------------------------------------------------------------------- */ 
I like YUI Grids 


/* Global 
-------------------------------------------------------------------------------- */ 
Styles for basic elements like: body, h1-h6, p, ul, li, ..., and often a wrapper. 


/* Header 
-------------------------------------------------------------------------------- */ 
Any styles specifically for the header block (this is usually short) 


/* Body 
-------------------------------------------------------------------------------- */ 
Basic layout for the main body block 


/* Footer 
-------------------------------------------------------------------------------- */ 
Similar to header 


/* Utility Classes 
-------------------------------------------------------------------------------- */ 
Things like 
.align-center { text-align: center; }; 
.hide { display: none !important; } 
... 


/* Specific Pages 
-------------------------------------------------------------------------------- */ 
Those are my usual subsections (separated by 2 line breaks). Beyond that, short 
rules that only apply to a certain page or subset of pages will get a section like 
this. 

algunos consejos más:.

descendientes sangría de los párrafos específicos *

div#left-col { ... } 

    * html #left-col { ... } 

    #left-col p { ... } 

    #left-col ul { ... } 

     * html #left-col ul { ... } 

     #left-col li { ... } 

* Pero keep rules efficient con el número de descendientes incluidos en un selector. Por lo general, escribiría:

div#left-col li span { font-weight: bold; } 

en lugar de:

div#left-col ul li a span { font-weight: bold; } 

Recuerde que este es el cambio precisamente lo que selecciona la regla, pero con tal de que funcione para sus páginas y es fácil de mantener, que está bien .

Propiedades de alfabetización. cortos reglas

body { 
    color: #ccc; 
    font-family: Helvetica, Arial, sans-serif; 
    padding: 2em; 
    -webkit-something: some value; 
} 

el colapso a la línea 1 (si no se pierde nada de mantenimiento).

div#left { float: left; margin-top: 30px; width: 300px; }