Esta pregunta trata sobre la organización de las propias directivas CSS dentro de un archivo .css. Cuando desarrollo una nueva página o un conjunto de páginas, generalmente solo agrego directivas a mano al archivo .css, tratando de refactorizar cuando puedo. Después de un tiempo, tengo cientos (o miles) de líneas y puede resultar difícil encontrar lo que necesito al ajustar el diseño.

¿Alguien tiene algún consejo sobre cómo organizar las directivas?

• ¿Debo intentar organizar de arriba hacia abajo, imitando el DOM?
• ¿Debo organizarme funcionalmente, poniendo directivas para elementos que soportan las mismas partes de la interfaz de usuario juntas?
• ¿Debo ordenar todo alfabéticamente por selector?
• ¿Alguna combinación de estos enfoques?

Además, ¿existe un límite en la cantidad de CSS que debo mantener en un archivo antes de que sea una buena idea dividirlo en archivos separados? Digamos, ¿1000 líneas? ¿O siempre es una buena idea mantener todo en un solo lugar?

Pregunta relacionada: ¿Cuál es la mejor manera de organizar las reglas CSS?

Eche un vistazo a estas tres presentaciones de slideshare para comenzar:

• Hermoso CSS mantenible
• CSS mantenible
• CSS modular, eficiente y mantenible

En primer lugar, y lo más importante, documente su CSS. Sea cual sea el método que utilice para organizar su CSS, sea coherente y documentelo. Describa en la parte superior de cada archivo lo que hay en ese archivo, tal vez proporcionando una tabla de contenido, tal vez haciendo referencia a etiquetas únicas fáciles de buscar para que pueda ir a esas secciones fácilmente en su editor.

Si desea dividir su CSS en varios archivos, hágalo. Oli ya mencionó que las solicitudes HTTP adicionales pueden ser costosas, pero puede tener lo mejor de ambos mundos. Utilice un script de compilación de algún tipo para publicar su CSS modular bien documentado en un único archivo CSS comprimido. El compresor YUI puede ayudar con la compresión.

En contraste con lo que otros han dicho hasta ahora, prefiero escribir cada propiedad en una línea separada y usar sangría para agrupar reglas relacionadas. Por ejemplo, siguiendo el ejemplo de Oli:

#content {
    /* css */
}
    #content div {
        /* css */
    }
    #content span {
        /* css */
    }
    #content etc {
        /* css */
    }

#header {
    /* css */
}
    #header etc {
        /* css */
    }

Eso hace que sea fácil seguir la estructura del archivo, especialmente con suficientes espacios en blanco y comentarios claramente marcados entre grupos (aunque no es tan fácil de hojear rápidamente) y fácil de editar (ya que no tiene que pasar por largas líneas de CSS) para cada regla).

Comprenda y use la cascada y la especificidad (por lo que ordenar sus selectores alfabéticamente es correcto).

Si divido mi CSS en varios archivos y en qué archivos depende del tamaño y la complejidad del sitio y del CSS. Siempre tengo al menos un reset.css. Eso tiende a ir acompañado layout.cssde un diseño de página general, nav.csssi los menús de navegación del sitio se complican un poco y forms.csssi tengo mucho CSS para diseñar mis formularios. Aparte de eso, todavía lo estoy averiguando yo también. Podría tener colors.cssy type.css/fonts.cssseparar los colores / gráficos y la tipografía, base.csspara proporcionar un estilo base completo para todas las etiquetas HTML ...

Tiendo a organizar mi CSS de esta manera:

1. reset.css
2. base.css: configuro el diseño de las secciones principales de la página
   1. estilos generales
   2. Encabezamiento
   3. Nav
   4. contenido
   5. pie de página
3. adicional- [nombre de la página] .css: clases que se usan solo en una página

¡Sin embargo, le resulta más fácil de leer!

En serio, obtendrás mil millones y cinco sugerencias, pero solo te gustarán un par de métodos.

Sin embargo, diré algunas cosas:

• Dividir un archivo CSS en trozos te ayuda a organizarlo en tu cabeza, pero significa más solicitudes de los navegadores, lo que en última instancia conduce a un servidor de ejecución más lenta (más solicitudes) y los navegadores tardan más en mostrar las páginas. Mantenlo en mente.
• Romper un archivo solo porque tiene un número arbitrario de líneas es una tontería (con la excepción de que tiene un editor horrible, en cuyo caso, obtenga uno nuevo)

Personalmente, codifico mi CSS así:

* { /* css */ }
body { /* css */ }
#wrapper { /* css */ }
#innerwrapper { /* css */ }

#content { /* css */ }
#content div { /* css */ }
#content span { /* css */ }
#content etc { /* css */ }

#header { /* css */ }
#header etc { /* css */ }

#footer { /* css */ }
#footer etc { /* css */ }

.class1 { /* css */ }
.class2 { /* css */ }
.class3 { /* css */ }
.classn { /* css */ }

Mantener las reglas en una línea me permite hojear un archivo muy rápido y ver qué reglas hay. Cuando se amplían, me parece demasiado trabajo duro tratar de averiguar qué reglas se están aplicando.

Hay una serie de metodologías reconocidas para formatear su CSS. En última instancia, depende de usted lo que se sienta más cómodo escribiendo, pero esto le ayudará a administrar su CSS para proyectos más grandes y complicados. No es que importe, pero tiendo a usar una combinación de BEM y SMACSS.

BEM (bloque, elemento, modificador)

BEM es una convención de nomenclatura muy útil, potente y simple para hacer que su código de front-end sea más fácil de leer y comprender, más fácil de trabajar, más fácil de escalar, más sólido y explícito y mucho más estricto.

Bloquear

Entidad independiente que es significativa por sí misma, como:

header, container, menu, checkbox, input

Elemento

Partes de un bloque y no tienen un significado independiente. Están semánticamente vinculados a su bloque:

menu item, list item, checkbox caption, header title

Modificador

Banderas en bloques o elementos. Úselos para cambiar la apariencia o el comportamiento:

disabled, highlighted, checked, fixed, size big, color yellow

OOCSS

El propósito de OOCSS es fomentar la reutilización de código y, en última instancia, hojas de estilo más rápidas y eficientes que sean más fáciles de agregar y mantener.

OOCSS se basa en dos principios fundamentales:

1. Separación de estructura de piel

Esto significa definir características visuales repetidas (como estilos de fondo y borde) como "máscaras" separadas que puede mezclar y combinar con sus diversos objetos para lograr una gran cantidad de variedad visual sin mucho código. Vea el objeto del módulo y sus máscaras.

2. Separación de envases y contenido

Básicamente, esto significa que "rara vez se utilizan estilos que dependen de la ubicación". Un objeto debe verse igual sin importar dónde lo coloques. Entonces, en lugar de diseñar un específico con .myObject h2 {...}, cree y aplique una clase que describa el en cuestión, como. Esto le da la seguridad de que: (1) todos los correos electrónicos no clasificados tendrán el mismo aspecto; (2) todos los elementos con la clase de categoría (denominada mixin) tendrán el mismo aspecto; y 3) no necesitará crear un estilo de anulación para el caso cuando realmente desee que .myObject h2 se vea como el normal.

SMACSS

SMACSS es una forma de examinar su proceso de diseño y como una forma de encajar esos marcos rígidos en un proceso de pensamiento flexible. Es un intento de documentar un enfoque coherente para el desarrollo del sitio cuando se utiliza CSS.

En el núcleo mismo de SMACSS está la categorización. Al categorizar las reglas de CSS, comenzamos a ver patrones y podemos definir mejores prácticas en torno a cada uno de estos patrones.

Hay cinco tipos de categorías:

/* Base */

/* Layout */

/* Modules */

/* State */

/* Theme */

Base Contiene estilos de elementos restablecidos y predeterminados. También puede tener estilos base para controles como botones, cuadrículas, etc. que se pueden sobrescribir más adelante en el documento en circunstancias específicas.

El diseño contendría toda la navegación, rutas de navegación, mapas del sitio, etc.

Los módulos contienen estilos específicos de área, como estilos de formulario de contacto, mosaicos de la página de inicio, listado de productos, etc., etc.

Estado Contiene clases de estado como isSelected, isActive, hasError, wasSuccessful, etc.

Tema Contiene los estilos relacionados con la temática.

Hay demasiados para detallar aquí, pero eche un vistazo a estos otros también:

• SuitCSS
• AtomicCSS (no diseño atómico)
• oCSS (CSS orgánico)

Voy con este orden:

1. Reglas de estilo generales, generalmente aplicadas a los elementos desnudos (a, ul, ol, etc.) pero también podrían ser clases generales (.button, .error)
2. Reglas de diseño de página aplicadas a la mayoría / todas las páginas
3. Reglas de diseño de página individuales

Para cualquiera de las reglas de estilo que se aplican a una sola página, o una pequeña agrupación de páginas, estableceré el cuerpo en una identificación y una clase, lo que facilita la orientación a páginas particulares. El id es el nombre base del archivo y la clase es el nombre del directorio donde se encuentra.

He probado un montón de estrategias diferentes y siempre vuelvo a este estilo:

.class {border: 1px solid #000; padding: 0; margin: 0;}

Este es el más amigable cuando se trata de una gran cantidad de declaraciones.

El Sr. Snook escribió sobre esto hace casi cuatro años :) .

Descarta los estilos comunes. No estilos que simplemente son iguales, estilos que están destinados a ser iguales, donde cambiar el estilo de un selector probablemente signifique que también querrá cambiar el otro. Puse un ejemplo de este estilo en otra publicación: Cree una variable en el archivo CSS para usar dentro de ese archivo CSS .

Aparte de eso, agrupe las reglas relacionadas. Y divida sus reglas en varios archivos ... a menos que cada página realmente necesite todas las reglas.

Como el orden real es una parte vital de cómo se aplica su CSS, parece un poco tonto seguir adelante con la sugerencia "alfabética".

En general, desea agrupar elementos por el área de la página a la que afectan. Por ejemplo, los estilos principales que afectan a todo van primero, luego los estilos de encabezado y pie de página, luego los estilos de navegación, luego los estilos de contenido principal y luego los estilos de contenido secundario.

Evitaría romper en varios archivos en este punto, ya que puede ser más difícil de mantener. (Es muy difícil mantener el orden en cascada en su cabeza cuando tiene seis archivos CSS abiertos). Sin embargo, definitivamente comenzaría a mover estilos a diferentes archivos si solo se aplican a un subconjunto de páginas, por ejemplo, los estilos de formulario solo se vinculan a una página cuando la página realmente contiene un formulario.

Solía ​​preocuparme por esto incesantemente, pero Firebug vino al rescate.

En estos días, es mucho más fácil ver cómo se interrelacionan sus estilos a través de Firebug y averiguar a partir de ahí lo que se debe hacer.

Claro, definitivamente asegúrese de que haya una estructura razonable que agrupe los estilos relacionados, pero no se exceda. Firebug hace que las cosas sean mucho más fáciles de rastrear que no tiene que preocuparse por hacer una estructura CSS perfecta desde el principio.

Esto es lo que hago. Tengo una página de índice CSS sin directivas y que llama a los diferentes archivos. Aquí hay una pequeña muestra:

@import url("stylesheet-name/complete-reset.css");
@import url("stylesheet-name/colors.css");
@import url("stylesheet-name/structure.css");
@import url("stylesheet-name/html-tags.css");
@import url("stylesheet-name/menu-items.css");
@import url("stylesheet-name/portfolio.css");
@import url("stylesheet-name/error-messages.css");

Comienza con un reinicio completo. El siguiente archivo define la paleta de colores para una fácil referencia. Entonces estilo de los principales <div/>s que determinan el diseño, encabezado, pie de página, número de columnas, en las que entran, etc ... las etiquetas HTML definses <body/>, <h1/>,<p/> , t, etc ... A continuación vienen las secciones específicas del sitio.

Es muy escalable y muy claro. Mucho más amigable para encontrar código para cambiar y para agregar nuevas secciones.

Los archivos CSS se almacenan en caché en el cliente. Por lo tanto, es una buena práctica mantener todos sus estilos en un archivo. Pero al desarrollar, me resulta útil estructurar mi CSS según los dominios.

Por ejemplo: reset.css, design.css, text.cssy así sucesivamente. Cuando publico el producto final, mezclo todos los estilos en un solo archivo.

Otro consejo útil es centrar la legibilidad en las reglas, no en los estilos.

Mientras:

ul li
{
    margin-left: 10px;
    padding: 0;
}

Se ve bien, no es fácil encontrar las reglas cuando tienes, digamos, 100 líneas de código.

En su lugar, uso este formato:

rule { property: value; property: value; }

rule { property: value; property: value; }

ITCSS

Por Harry Roberts (CSS Wizardry)

Define el espacio de nombres global y la cascada, y ayuda a mantener baja la especificidad de los selectores.

Estructura

Los dos primeros solo se aplican si está utilizando un preprocesador.

1. (Configuración)
2. (Herramientas)
3. Genéricos
4. Elementos
5. Objetos
6. Componentes
7. Triunfos

Normalmente hago esto:

1. <link rel="stylesheet" href="css/style.css">

2. En style.css, @importo lo siguiente:

   @import url(colors.css);
   @import url(grid.css);
   @import url(custom.css); + some more files (if needed)
   

3. En colors.cssI @importlo siguiente (cuando se utilizan las propiedades personalizadas de CSS):

   @import url(root/variable.css);
   

Todo está en orden y es fácil editar cualquier parte del código. Me alegraré si ayuda de alguna manera.