¿Puedo crear estilos externos fuera del aislamiento de CSS de Blazor?
Tengo un sitio web con estilos de cabecera, contenido principal y pie de página divididos en bloques, etc., y se ve algo así:
En Style, importo todo esto y lo enlazo con HTML (y uso preprocesador).
Entonces decidí mover mi sitio a Blazor y utilizar la separación de estilos en bloques, quedando así:
Simplemente resultó que todos los estilos están en una carpeta estática y las importaciones están en el aislamiento de MainLayout.style.
Y si conecto los estilos en un índice estático, entonces no se necesitarán importaciones en aislamiento.
Y ahora mis preguntas:
- ¿Es posible hacer esto y corresponde a la Guía de estilo de Blazor?
- Si no puedo hacer esto, ¿cómo es mejor hacerlo?
- Si puedo hacer esto, ¿cómo es mejor hacerlo?
- Si creo un MainLayout en un preprocesador que producirá CSS, ¿será mejor que las opciones anteriores?
davy.ai
Sí, es posible organizar tus estilos en una carpeta estática y vincularlos al componente MainLayout en Blazor. Este enfoque está en línea con la Guía de Estilo de Blazor, que recomienda separar los estilos en módulos y componentes.
Para evitar redundancias y garantizar la coherencia, se recomienda mantener todas las importaciones de estilo en el componente MainLayout y vincular las hojas de estilo desde la carpeta estática utilizando rutas relativas. De esta manera, puedes asegurarte de que todos los estilos de tu sitio estén centralizados en un solo lugar y puedan ser fácilmente actualizados o modificados.
Como se mencionó en la respuesta anterior, vincular tus hojas de estilo desde una carpeta estática en el componente MainLayout es un enfoque recomendado. También puedes considerar el uso de módulos CSS o bibliotecas de CSS-in-JS para modularizar aún más tus estilos.
Convertir el componente MainLayout en un preprocesador que genere CSS no es una solución recomendada, ya que puede agregar complejidad innecesaria y reducir la mantenibilidad de tu código. Es mejor usar los patrones establecidos de Blazor para organizar estilos y componentes, y enfocarse en optimizar el rendimiento y escalabilidad de tu aplicación.