Organiza y optimiza tu CSS POR MÓDULOS en tus proyectos

▶

Te voy a comentar un poco sobre cómo he acomodado el CSS para mi proyecto en DesarrolloLibre, en caso de que te interese y puedas tomar algunos tips. Esto te será útil si tienes un desarrollo similar o si simplemente quieres saber cómo puedes organizarte.

Tip Uno, Verifica de cuantos módulos consta tu aplicación

Lo primero que tenemos que tener en mente es cuántos módulos va a tener la aplicación. En mi caso, se pudiera decir que tiene tres módulos principales:

1. Web de la Academia

Considero la web de la Academia como un módulo adicional o diferente al del Blog. Aunque esta es una aplicación en Vue, y la tecnología no tiene mucho que ver con el CSS final, simplemente por ese hecho lo considero un módulo aparte. Además, no comparte los mismos enlaces y tiene una organización un poco diferente.

2. El Blog

Este es el módulo principal de contenido.

3. Módulo de Gestión (Dashboard)

Este es el módulo donde yo gestiono el contenido de la aplicación.

Consideraciones del CSS en el Dashboard

Aquí, en el dashboard, yo empleo el plugin de CKEditor, tal cual puedes ver. Este plugin requiere un CSS adicional, como te he explicado en el curso, para poder mostrar correctamente las negritas, los títulos, las ul (listas desordenadas), y todo esto que está por acá, ya que Tailwind lo rompe.

Por lo tanto, en este módulo de gestión, ya tenemos un CSS adicional que, por ejemplo, no voy a tener en el Blog, puesto que en ninguna parte de esa sección utilizo el plugin de CKEditor.

Tip Dos, Verifica cuales son los diseños que vas a manejar por módulos

Realmente, solo serían dos módulos de estilo diferenciados:

• Módulo de Gestión (Dashboard): Principalmente por lo comentado antes sobre el CKEditor y cualquier cosita adicional que vaya a colocar para que no se me rompa el diseño.
• Módulos de Usuario Final (Blog y Academia): Estos dos módulos, aunque incluyen tecnologías diferentes, se pudiera decir que tienen el mismo diseño (al menos para mí).

Organización de Archivos CSS por Módulo

Ahora ya podemos saber cuántos archivos CSS vamos a crear:

1. Archivo app.css (Módulo Dashboard)

Uno será para el Dashboard, que en mi caso lo llamé app.css. (Lo tengo repetido, tengo que ver realmente cuál estoy empleando al final, ya que no me acuerdo).

• Contenido: En este archivo (o en el que esté usando), se encuentra el CSS para CKEditor, tal cual puedes ver. Este es el CSS que yo siempre empleo para el CKEditor. Podría colocar aquí reglas de Tailwind, pero eso es otra cosa.
• Propósito: Aquí voy a agregar el CSS que es específico para mi módulo de dashboard, ya que no lo voy a necesitar en el Blog para no mezclar las cosas.

2. CSS para el Blog

El siguiente será el archivo del Blog.

• Contenido: Aquí voy a colocar el diseño para los elementos del contenido (los h1, p, ul, imágenes y demás). Es un poco lo que puedes ver por acá.

3. CSS Base

Y otro archivo será el Base.

• Propósito: Como al final es la misma aplicación, vamos a tener diseños similares (es decir, quiero emplear la misma tipografía en ambos módulos). En mi caso particular, voy a emplear... (el resto de la frase está incompleta, pero el concepto es que aquí van los estilos comunes).

Archivo para CSS común

Para poder heredar estilos fácilmente (en lugar de copiar y pegar, o inyectar directamente el archivo del Blog aquí y que se rompa todo el estilo), hacemos lo siguiente. Los colocamos directamente en otro archivo que sería el común, (al cual yo llamo base.css). Aquí yo agrego el diseño, por ejemplo, para las cartas, el comportamiento que van a tener los enlaces, los botones, y demás elementos comunes a toda mi aplicación:

base.css

.card {
	@apply mt-6 bg-white p-6 rounded-md text-gray-500 shadow-lg dark:bg-gray-600 dark:text-gray-100
}

Resumen hasta entonces

En resumen, aquí en el archivo base.css, voy a colocar el diseño que es común para ambos módulos.

• Tal cual puedes ver, todo lo que voy a emplear (que en este caso serían, por ejemplo, los botones), lo importo desde los archivos que contienen los assets o diseños exclusivos de cada módulo.
• Mediante la etiqueta de @import que tenemos en CSS, coloco el de base.css en ambos archivos. Por ejemplo, en el CSS del Blog, coloco el de base.css.

Por lo tanto, estoy heredando este diseño que es común entre ambas plataformas o ambos módulos que tenemos.

resources\css\blog.css

@import 'base';

Por lo demás, me queda el diseño específico, sobre el cual te quiero dar otro pequeño tip.

Antes, siempre tuve muchísimos problemas con esto, sobre todo con el tema de las imágenes. Lo que solía hacer era crear una etiqueta llamada, por ejemplo, post (o similar), y ahí colocaba un diseño específico. Es decir, hacía como un módulo dentro de otro módulo.

Para mí, post era básicamente esta publicación; por lo tanto, siempre intentaba cambiar un poco el estilo para que fuera diferente al resto de la página (por ejemplo, al de los listados y demás). Ya una vez que hago esto, no sé ni por qué lo hacía, pero ya no te lo recomiendo.

Tip Tres Diseños desde la raíz h1 SI post h1 NO

️ Organización de Módulos y Estilos CSS

La organización que yo te recomendaría para tus módulos es definir los estilos directamente desde la raíz. Es decir, aplicas el diseño directamente a los elementos base como h1, h2, h3, etc.

Intenta evitar hacer esto (definir estilos muy anidados o específicos a la ligera), porque al final te complicará mucho la existencia. Definirás algunos estilos específicos de esta forma, pero luego querrás definirlos de una manera más específica aún. Seguramente, esto implicará tocar márgenes o posicionamiento distinto, lo cual será un tremendo problema porque los estilos se van a empezar a sobrescribir. A veces se sobrescribirán los estilos que colocaste en un sitio, y a veces los que colocaste en la raíz. Aparte, todo quedará muy desorganizado.

Recomendación Final para CSS

Una vez aclarado cómo es mi esquema para trabajar con los módulos en base a CSS, la recomendación final es la siguiente:

Estilos desde la Raíz: Intenta siempre definir los estilos desde la raíz. (Esto es una copia que puedes ver, no es el archivo que estoy empleando, pero te lo muestro como ejemplo).

• CSS Definitivo: Mi CSS final es tomar los diseños desde la raíz, es decir, sin colocar aquí post-section ni nada. Todo va desde la raíz. Intento adaptarlo lo mejor posible en base a lo explicado. Lo puedes ver directamente en los selectores: h1, p, ul, li, y poco más.
• Evitar Anidaciones Complejas: Obviamente, quiero un diseño específico en este caso para cambiar la tipografía. Pero a lo que me refiero con evitar el desorden es que no estés colocando selectores anidados. Por ejemplo, que coloques una cosa en content aquí, luego un h1 dentro de content, y después te compliques definiendo otro selector para post y demás.

Alternativas a CSS Desordenado

Intenta crear un diseño que sea común para todo. Si esto no es posible, simplemente trabaja en base a componentes (ya sea en base a Vue, a componentes de Livewire, o de la tecnología que estés empleando). Haz esos componentes allí.

Pero evita hacer este desorden en CSS porque al final será una pesadilla poder gestionar este archivo.

Para mostrarte un poquito rápido el CSS (que obviamente es común y lo puedes descargar desde la página de desarrollo), puedes verlo desde ahí. Claro, y aquí son, como quien dice, componentes específicos que yo necesito, ya que es un desarrollo como cualquier otro.

¿Hay alguna otra sección que quieras revisar o te gustaría que te diera ejemplos específicos de cómo definir estilos desde la raíz para h1 y p?

CSS para componentes Si, NO para raíz

En este caso, requiero de algunos componentes específicos para agregar espaciados.

Aquí también es un poco lo mencionado antes, y esto yo lo considero bien. El problema sería, otra vez, si desde aquí (el código) colocaras algo similar a esto:

style="margin-top: 20px"

Esto te puede ocasionar bastantes problemas, ya que son estilos que no están centralizados.

Estos componentes son diseños específicos que tú puedes decidir cuándo emplear, por lo tanto, su uso es opcional.

Sin embargo, si tú defines el estilo de la otra forma (en línea o dentro de un template), va a ser obligatorio, ya que esa etiqueta estaría dentro de un template o layout (es decir, una vista dentro de tu desarrollo).

Aquí puedes ver que todo se maneja desde la raíz del CSS, y esta es la forma en que pude utilizar el mecanismo para tener organizado el CSS:

resources\css\blog.css

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li {
    @apply text-gray-800 dark:text-white
}

h1 {
    font-family: ProtestGuerrilla-Regular;
    @apply  relative
}
***

Si te preguntas por los detalles de diseño en mi aplicación, puedes ver que tengo aquí el elemento principal, que es el <h1> (encabezado principal).

Le creé una clase en particular para darle un color verde a este elemento. Esto lo hago para incluir estas pequeñas "cositas" que buscan hacer el contenido un poco más agradable de leer, aunque, a la final, a casi nadie le gusta leer.

Esa sería la recomendación que te podría dar sobre estos elementos de diseño.

Tamaño común para la imagen y contenedores

Otro punto importante, que era otro problema que tenía por aquí y que me acabo de acordar, era la bendita imagen, porque este sujeto era el que me daba demasiados problemas. Y era más que todo por esto: yo creaba, como quien dice, un contenedor, en este caso siempre lo llamé post, porque siempre manejaba tamaños distintos. Aquí, por ejemplo, es un width: full, pero aquí fíjate que ya le estoy colocando un max-width.

resources\css\blog.css

img {
    @apply rounded-sm shadow-lg mt-4 mx-auto my-4 w-full;
    max-width: 500px;
}

️ Gestión de Imágenes y Evitando el "Código Torcido"

El problema surge cuando se requiere trabajar con tamaños distintos de imágenes dentro del contenido, lo cual puede convertirse en una pesadilla.

Mi recomendación es no implementar los tamaños directamente en el CSS porque, de nuevo, el código se "torcerá" bastante. O, al menos, hazlo basándote en clases, como por ejemplo, image.middle-size, donde defines la mitad o un tercio del tamaño.

Definición de Tamaños y Contenedores

Mi estrategia recomendada es la siguiente:

• Tamaño Máximo a la Imagen: Define siempre un tamaño máximo (max-width) para la imagen y simplemente juega con el contenedor donde se aloja.
• Uso de Contenedores: En mi caso, mis imágenes siempre están dentro de un contenedor. Aquí estoy empleando un sistema de grilla (Grid System) con una clase container.

Por lo tanto, si miras el CSS que tengo aplicado:

• La imagen tiene un width: full.
• También tiene un max-width que definí, por ejemplo, en 500px.

Esto evita que la imagen crezca de forma enorme y ocupe casi toda la pantalla. La persona que quiere leer tu contenido no está interesada en la imagen, sino en el texto. La imagen debería ser simplemente un elemento representativo y una ayuda visual acorde a su valor.

Consejo Principal
Define un tamaño máximo y que sea común a todo tu contenido. Si necesitas cambiar el tamaño, simplemente manipula el contenedor.

Este tamaño máximo es el permitido siempre. Por ejemplo, en una publicación, puedes ver que le he "encogido" un poquito el contenedor (lo coloqué al final; esto depende del esquema, ya que todos tienen video, pero buscaré una publicación vieja). 

En un ejemplo antiguo, la imagen ocupa solo un pedacito del espacio y no todo lo ancho. Para esto, de nuevo, empleé algunos contenedores o un sistema de grillas.

Conclusión y Llamada a la Acción

Esto era lo que te quería mostrar. Espero que hayas podido, al menos, considerar algo interesante. Si tienes cualquier comentario o si piensas en qué mejorarías de lo que acabo de explicar, o si tienes otro truco o consejo para optimizar el CSS, puedes comentarlo.