¿Cómo debo organizar el contenido de mis archivos CSS?

80

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?

css 
— Adam Bellaire
fuente
1
Para su información, hice la <a href=" stackoverflow.com/questions/72911/… la misma pregunta</a>, en caso de que quisiera leer más respuestas.
— Nathan Long
1
gran pregunta, generó grandes respuestas. Encontré muchas cosas útiles. Gracias.
— Sebastien

Respuestas:

54

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

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 ...

— mercator
fuente
Nota: se reset.cssha convertido en un enlace muerto
— Braden Best
@BradenBest, gracias, enlaces de YUI actualizados. Sin embargo, no estoy seguro de si ese enlace reset.css todavía contiene la misma información que tenía originalmente. Y YUI ya no se mantiene , por lo que probablemente sea mejor buscar en Google.
— mercator
18

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
— limpiador
fuente
Si va a agregar CSS que solo se usa en una página, ¿por qué no simplemente coloca el CSS en esa página, sin usar un archivo CSS?
— timetofly
Oh Dios, ¿por qué no pensé en eso?
— Sebastien
2
@ user371699 Algunos dirían que usar <link>es más eficiente que saturar el archivo HTML con una <style>etiqueta.
— DylRicho
1
@Sebastien Puede cambiar fácilmente entre diferentes estilos si mantiene su css en archivos css. Con la etiqueta <style>, tienes que reescribir todo.
— reinaldoluckman
1
@AlexLeung Más mantenible. ¡Mala elección de palabras de mi parte!
— DylRicho
9

¡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.

— Oli
fuente
Crear un archivo CSS grande (o cualquier otro) para fines de desarrollo es una práctica totalmente incorrecta. ¿Ha trabajado alguna vez con, por ejemplo, archivos CSS o JavaScript de más de 5000 líneas? Probablemente no. Sin embargo, existen herramientas que minimizan y fusionan todo CSS en uno grande para prod environemtn (y otros archivos) para hacer este trabajo por usted, sin tener tales problemas en la etapa de desarrollo.
— forsberg
Tenga en cuenta que esta respuesta tiene 9 años. Las herramientas que existían en ese entonces realmente no eran tan avanzadas como las que usaría hoy (por ejemplo, preprocesadores LESS / SASS). Pero de todos modos, las hojas de estilo grandes no eran infrecuentes en ese entonces ... De ahí el estilo en la respuesta. Si no estuvieran en línea, habrían tenido 10,000 líneas de largo. Hoy en día hago las cosas de manera diferente pero tengo diferentes herramientas y tenemos cosas como HTTP2 para minimizar la latencia entre descargas.
— Oli
9

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.

  1. 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:

— Chris Spittles
fuente
4

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.

— Jonathan Arkell
fuente
Tiendo a estar de acuerdo con esto, con una ligera variación en cómo lo describiría ... 1) Reglas globales (las mismas que describiste, pero afectan a casi todo en el sitio), 2) Reglas de la página maestra (esto sería para el encabezado, pie de página, área de contenido y barras laterales, si las hay, que son una mayoría o todas las páginas, y 3) reglas de página individuales según sea necesario, separadas en archivos para las páginas respectivas. Se han hecho algunos comentarios de que dividir las hojas de estilo de esta manera da como resultado demasiadas solicitudes, pero en realidad son solo dos solicitudes y asegura que los estilos innecesarios no se carguen en cada página.
— MQuiggGeorgia
Esta respuesta original tiene 10 años y de ninguna manera debe considerarse como un estado de la técnica.
— Jonathan Arkell
No voy a editar, solo agrego una exención de responsabilidad considerando la antigüedad. Eso es todo.
— Jonathan Arkell
2

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.

— Shog9
fuente
1

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.

— Tim Booker
fuente
1

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.

— Sarhanis
fuente
1

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.

— allesklar
fuente
7
¡Y significa que los navegadores deben realizar 9 solicitudes al servidor antes de que puedan comenzar a renderizar una página! Tenga en cuenta que la mayoría de los navegadores no permitirán más de dos conexiones a un servidor a la vez. Esto está bien para desarrolladores, ¡pero desea comprimirlo en un archivo para producción! Lo mismo ocurre con JS
— Oli
3
link es mucho más eficiente que @import. Regla # 13 de Yahoo YSlow
— scunliffe
1

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; }
— cllpse
fuente
0

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
— Eric Harms
fuente
-2

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.

— htmlstrap
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.