Organizacion de archivos CSS en drupal 8

Este articulo te ayudara a comprender la manera como drupal 8 organiza los archivos CSS.

Estructura de archivos

Los conjuntos de reglas deberan ser agrupadas en archivos logicos que deberan separar los contextos de los archivos CSS para que puedan ser eficientemente agregados y sobre escritos por otros desarrolladores.

Drupal 8 aplica la siguiente estructura:

1. Base — CSS reset/normalize ademas de estilos para elementos HTML.
2. Layout — Macro ajustes de un sitio web incluyendo cualquier sistema de grillas.
3. Component — discreto, elementos UI (de interfaz de usuario) reutilizables.
4. State — estilos que tienen que ver con los cambios a componentes del lado del cliente.
5. Theme — puramente estilos visuales (“look-and-feel”) para un componente.

Estas categorias ayudan a mantener los estilos CSS con diferentes propositos y alejados de los demas. Drupal 8 recomienda la siguiente guia base para estructurar archivos CSS:

Archivos CSS para modulos en drupal 8

Todos los archivos CSS de un modulo deben ser colocados dentro de un directorio llamado 'css' y desglosarse en uno o mas como los siguientes archivos:

nombre_modulo.module.css: Este archivo debe contener la cantidad minima de estilos para que el modulo funcione. Esto incluye el layout, componentes y estilos de estados.

nombre_modulo.theme.css: Este archivo debe contener estilos extra para hacer que la funcionalidad del módulo estéticamente agradable. Esto por lo general sólo se compone de estilos para el tema.

nombre_modulo.admin.css: Este archivo debe contener los estilos mínimos necesarios para obtener las pantallas de administración funcionales. Esto incluye estilos de diseño, componentes y estilos de estados. En las pantallas de administración, el módulo puede optar por cargar el * .module.css además de el archivo * .admin.css.

Los módulos no deben tener ningún estilo de base. Los módulos core de Drupal 8 no tienen ningún estilo de base. En lugar el core de Drupal 8 utiliza la biblioteca Normalize.css argumentada con la libreria drupal.base.css.

Si un módulo adjunta un archivo CSS en un archivo de plantilla, el archivo CSS debe tener el mismo nombre que el archivo de plantilla (template), por ejemplo, si el archivo template se nombra "sistema-plugin-ui-form.html.twig" el archivo CSS correspondiente debería llamarse "sistema-plugin-ui-form.css"

Archivos CSS para temas en drupal 8

1. Separa siempre los estilos para Base, Diseño y para componentes en sus propios archivos. (Drupal agregará estos archivos separados en un solo archivo, por lo que no hay ningún problema de rendimiento con esta práctica.)
2. Para temas complejos, considera colocar cada familia de componentes o componente en su propio archivo.
3. Las reglas de estado, incluyendo preguntas de los medios, deberían incluirse con el componente al que se aplican.
4. Las reglas temáticas pueden o no pueden tener su propio archivo (s). Los temas starter separan sus CSS en archivos separados. De lo contrario, incluye reglas temáticas con su correspondiente componente.

La mayoria de temas deberian tener al menos los siguientes archivos:

+ css
    - base.css
    - layout.css
    - components.css

Opcionalmente los pueden desglosar. Una mas compleja estructura y con enfoque mobile first (primero movil) podria verse asi:

+ css
    + base
        - normalize.css
        - elements.css
    + layout
        - layout.css
        - layout--medium.css
        - layout--wide.css
    + components
        - button.css
        - dropdown.css
        - pagination.css
        - tabs.css
        …
    + theme
        - theme--light.css
        - theme--dark.css

Agregacion de CSS en drupal 8

En drupal 7 y versiones anteriores la opcion "group" y "every page" de drupal_add_css() controlaba que archivos podrian ser agregados juntos.  Los grupos donde CSS_SYSTEM, CSS_DEFAULT (para modulos en drupal) y CSS_THEME (para temas en drupal) y la opcion every_page option era una simple bandera booleana. Esto se traduce en tener mas de 6 archivos agregados.

En drupal 8 ahora los temas tienen la habilidad de sobre escribir las hojas de estilos sin afectar la opcion "every page" ("cada pagina") de la hoja de estilos original. Esto significa que el CSS cargado condicionalmente permanece condicionalmente cargado,

Esto tambien significa que ahora es sencillo para los temas afectar estilos cargados condicionalmente. Por tanto, todos los CSS agregados al tema no necesitan cargar mas estilos de carga condicionados. Esto simplifica enormemente la estrategia por defecto que drupal 8 puede emplear. En lugar de tener 6 archivos agregados, podriamos tener solamente 2.

1. El agregado "Every page" ("cada pagina") incluye:

1. Estilos base de librerias (por ejemplo Normalize.css y drupal.base.css) y luego temas de drupal.
2. Estilos de layouts de modulos de drupal y luego temas de drupal.
3. Estilos de componentes (y sus estados asociados y temas) de los modulos de drupal y luego de los temas de drupal.
4. Estilos de estado que no estan incluidos con componentes de los modulos de drupal y luego de los temas de drupal.
5. Estilos de temas que no estan incluidos con componentes de los modulos de drupal y luego de los temas de drupal.

2. Los conditionally-loaded (cargados condicionalmente) agregados

Estilos de layout desde los modulos de drupal y los temas de drupal.
Estilos de componentes (y sus estados asociados y temas) de los modulos y luego de los temas de drupal.
Estilos de estado que no son incluidos con componentes de modulos y luego de los temas de drupal.
Estilos de temas que no son incluidos con componentes de modulos y luego de los temas de drupal.

Nota: Nunca deberían haber estilos base cargados condicionalmente.

 El orden de los estilos entre un agregado estan determinados por la opcion "weight" (peso) de la funcion drupal_add_css() el cual sera el siguiente:

/**
* The default weight for CSS rules that style HTML elements ("base" styles).
*/
const CSS_BASE = -200;

/**
* The default weight for CSS rules that layout a page.
*/
const CSS_LAYOUT = -100;

/**
* The default weight for CSS rules that style design components (and their associated states and themes.)
*/
const CSS_COMPONENT = 0;

/**
* The default weight for CSS rules that style states and are not included with components.
*/
const CSS_STATE = 100;

/**
* The default weight for CSS rules that style theme and are not included with components.
*/
const CSS_THEME = 200;

El archivo agregado por si mismo es determinado por la opcion "group" (grupo) y la bandera "every page" (cada pagina) de la funcion drupal_add_css(). El valor por defecto de la opcion "group" (grupo) es la constanate CSS_AGGREGATE_DEFAULT. El core de drupal no proporciona otras constantes de agregado pero las contribuciones pueden definir sus propios grupos de agregados.

SMACSS y SASS/COMPASS

Cuando se combinan los conceptos de SMACSS y SASS/COMPASS pueden proveer mucho control sobre la salida css. Podemos utilizar el concepto de SASS globbing para tener multiples archivos .scss y solamente un archivo css con el uso de parciales.