Escenario
El resultado de nuestra evaluación depende de cómo estemos realizando el tematizado de nuestro sitio, en esta evaluación se partirá de la siguiente metodología de trabajo basada en:
- Desarrollo por componentes reutilizables, precisos y de acuerdo a la metodología SMACSS (categorizando éstos en: "base, layout, module, state & theme").
- Uso de SASS para generar ficheros SCSS.
- Uso metodología SMACSS para organizar nuestos ficheros SCSS.
- Uso BEM para nombrar a nuestros componentes y sus variantes.
- Drupal 8.
- "Combinar archivos CSS" habilitado.
Evaluación de las aparentes ventajas que encontramos al dividir los ficheros css en nuestro escenario de trabajo.
Sortear limitaciones técnicas de navegadores
La principal y más destacable limitación viene por parte del navegador Internet Explorer en su versión explorer 9. Relativa al número de selectores por hoja de estilos y al número máximo de hojas máximo.
En principio no supone un problema ya que la versión mínima soportada por drupal 8 (>8.4.x) es explorer 11 (fuente).
IE 11 ya tiene un límite que en la mayoría de ocasiones será casi imposible de alcanzar (65534 selectores y 4095 hojas de estilo).
Además señalar la estupenda función de drupal "Combinar archivos CSS" que nos permite optimizar enormemente las hojas de estilo.
Realmente aplicar la división de ficheros o no, en este apartado no supone ninguna mejora ya que el resultado sería el mismo: un único fichero css que en muy extrañas ocasiones alcanzaría las limitaciones mencionadas.
Optimización de la carga de la página
La ventaja reside en que al solo cargar el CSS de los componentes que aparecen en la página visualizada, el CSS generado por la funcionalidad "Combinar archivos CSS" sería diferente en cada página (en caso de que varíen sus componentes).
Esto realmente no supone demasiada diferencia ya que aunque se optimiza en tamaño del CSS, sería necesario descargar un nuevo CSS por parte del navegador para cada versión de la página que tenga piezas distintas. Esto provoca que en la capa del servidor, drupal tengan que generar hojas distintas, y en la capa del cliente (navegador) supondría una descarga nueva para página (de contenter piezas distintas) en lugar de emplear una única versión cacheada del fichero.
CSS más legible al no contener todo el tematizado y mejor organización archivos css
En nuestra propuesta de trabajo tendremos los componentes perfectamente organizados en ficheros SCSS con SMACSS y de manera independiente a los ficheros CSS que generemos.
Al generar nuestro tematizado en ficheros independientes para cada comonente y con SASS, no necesitamos que nuestro CSS sea legible al ya serlo los ficheros .scss que son los ficheros con los que realmente trabajaremos.
Por lo tanto, tampoco supone una ventaja real en este caso.
Inconvenientes que encontramos en nuestra metodología al aplicar la división de ficheros CSS
- Generar CSS dividido supone bastante carga adicional en desarrollo al tener que indicar en Drupal cuando se utiliza cada camponente. El proceso pasaría por generar una librería para cada componente de nuestro tema, realizar la inclusión del CSS en una función de preprocesado de plantilla/plantilla twig, etc.
- También supone un impedimento adicional a la hora de querer utilizar un componente de nuestro tema ya preparado, y que únicamente mediante el uso de los selectores BEM, podríamos utilizar o reutilizar.
- Además, sería necesario modificar la manera de generar los componentes en SASS, cada componente deberá incluir una serie de ficheros base imprescindibles como pueden ser: el fichero _init.scss con las variables empleadas en nuestro sitio (colores, tamaños de fuente, etc), _mixins.scss (en el caso de que necesitemos usar mixins), etc. Así como cualquier otro componente que podamos requerir.
Consclusión
La balanza se inclina definitivamente en nuestro escenario a la generación de un único fichero CSS puesto que las ventajas que podríamos pensar que aportaría en un primer vistazo, quedan en evidencia al analizarlas en detalle. Si a esto le sumamos la carga adicional en el desarrollo y el lastre que supone para generar nuestro tema basado en componentes reutilizables, el resultado se hace evidente.
¿Cuándo puede ser una buena opción?
Para generar las hojas de estilos catalogadas por SMACSS como theme, ejemplos: tema navideño, temas equivalentes opcionales que el usuario puede habilitar de manera opcional (como el tema oscuro de YouTube), tener los ficheros aislados nos permitiría realizar la carga o el uso de estos estilos de forma dinámica y usando JavaScript (sin necesidad de recargar la página).
En otros escenarios de trabajo distintos al expuesto la balanza puede cambiar, sentíos libres de añadir cualquiera en la sección de comentarios, así como de mencionar cualquier detalle que hayamos podido pasar por alto.
