Organiza y obtimiza tu codigo CSS en tus proyectos

Te voy a hablar un poco sobre cómo he acomodado el ccs para mi proyecto en desarrolloLibre en caso de que te interese y puedas agarrar algunos tips en caso de que tengas algún desarrollo similar o quieras saber cómo puedes organizarte Simplemente te doy la forma en la cual yo considero que sería la mejor.

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

Entonces lo primero que tenemos que tener en mente es cuántos módulos va a tener la aplicación en mi caso tiene tres módulos se pudiera decir uno es:

1. La web de Academia que lo considero como un módulo adicional u otro módulo diferente al de blog ya que esta es una aplicación en Vue aunque aquí no tiene mucho que ver la lo que es la tecnología porque estamos hablando del ccs a la final simplemente por ese hecho yo lo considero un módulo aparte aparte de que no tiene los mismos enlaces y tiene una organización un poquito diferente entonces.
2. El otro es el blog claro está.
3. Y el lo otro es el módulo de gestión que es donde yo gestiono el contenido de la aplicación.

Aquí el de dashboard yo empleo lo que es el plugin de CKEditor tal cual puedes ver plugin que requiere un css adicional tal cual te he explicado en el curso para mostrar las negritas eh los títulos los uls y todo esto que está por acá porque Tailwind lo rompe entonces ya por aquí tenemos un ccs adicional que yo no voy a tener por ejemplo aquí en el blog ya que por aquí en ninguna parte yo utilizo el plugin de CKEditor.

Tip Dos, Verifica cuales son los disenos que vas a manejar por módulos

Ya podemos ver una distinción en cuanto a estos dos por más que sea como es para el usuario final entonces realmente no tengo así un diseño muy diferente básicamente es lo mismo que tenemos por aquí solo que bueno aquí voy a quitar el modo oscuro por lo demás es prácticamente lo mismo simplemente es otra organización para los enlaces otro color de fondo pero es un diseño muy similar que se es trabajado con Tailwind que espero que sea así porque si no no tiene sentido que veas mucho este video debes de saber que aquí estamos empleando un sistema de grillas y demás y organizamos aquí nuestra bueno nuestro contenido inclusive aquí estoy empleando fíjate que unas tipografías similares con lo que es el el subrayado aquí abajo y poco más así que realmente Serían dos el del dashboard por lo comentado antes sobre todo aquí por el CKEditor y cualquier cosita adicional que voy a colocar para bueno no se me rompa así el diseño y lo que es estos dos módulos que otra vez aunque incluyen tecnologías diferentes se pudiera decir que es el mismo diseño al menos para mí si fuera distinto para ti entonces sería un módulo adicional como el que tenemos acá entonces con esto aclarado.

Tantos CSS por módulos o disenos

Ya podemos saber cuántos archivos cs vamos a crear uno para el dashboard que en mi caso yo lo llamé como app Aquí lo tengo repetido tengo que ver realmente cuál es el que estoy empleando a la final ya que no me acuerdo Creo que era el Bueno tengo que ver pero a la final en ambos se encuentra el caditor tal cual Puedes ver este es el ccs que yo siempre empleo para el secadito lo pudiera aquí colocar reglas de Tailwind Pero bueno eso es otra cosa pero este sería cuenta que este es el mismo entonces aquí yo agregaría el ccs que es específico para mi módulo de dashboard que no lo voy a necesitar en el de blog para no mezclar las cosas así que bueno aquí otra vez lo que tú quieras colocar ahí el siguiente sería el de blog en el cual voy a colocar el diseño para los h1 p ul ul imágenes y demás entonces un poco lo que puedes ver por acá y otro que sería el base ya que a la final como es la misma aplicación vamos a tener diseños similares es decir quiero emplear la misma tipografía en mi caso en particular voy a emplear 

Archivo para CSS común

Aquí también un diseño similar a los botones la misma paleta de colores bueno que en algunas partes lo empleo por ejemplo aquí otra vez aquí tengo el diseño un poco roto ya que es el dashboard y no lo he terminado acomodar pero aquí puedes ver que son botones similares a los que tenemos por acá que es justamente lo que yo quiero por lo tanto son diseños comunes cómo hacemos para poder heredarlo fácilmente en vez de estar copiando y pegando inyectar directamente el archivo del blog aquí se me rompa todo el estilo ya que por más que sea aquí voy a querer manejar un estilo un poco más sobrio no estar colocando por ejemplo estos subrayados y demás no los quiero aquí por otra vez porque es un diseño un poco más sobrio sin tanta bueno ic conitos y demás bueno lo colocamos aquí directamente en otro archivo que sería el común e que cual yo llamo como base.css y aquí yo agrego el diseño por ejemplo para las cartas el comportamiento que va a tener los enlaces y demás en mi diseño de cartas aquí también tengo los botones y demás.

Resumen hasta entonces

Un resumen aquí en el base yo 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 entonces desde ambos que son los diseños o los assets exclusivos para ambos módulos aquí yo lo importo mediante la etiqueta de import que tenemos en css aquí coloco el de base y por aquí un poco lo mismo este es el de blog y aquí lo mismo aquí coloco el de base y por lo tanto yo estoy heredando este diseño que es común entre ambos bueno entre ambas plataformas o ambos módulos que tenemos:

resources\css\blog.css

@import 'base';

Aquí y por lo demás me queda el diseño específico en el cual te quiero dar otro pequeño tip antes que siempre tuve muchísimos problemas con eso sobre todo con el tema cuando estoy trabajando con las imágenes antes yo lo que hacía era por aquí crear como que una etiqueta llamada post aquí yo he colocado Un diseño específico es decir hacía como con un módulo dentro de otro módulo qué es post para mí ya que recuerdas que esto es un blog post para mí era básicamente esta publicación por lo tanto yo aquí siempre intentaba cambiar un poco el estilo que fuera diferente al resto de la página por ejemplo el de los listados y demás ya una vez que hago esto no sé ni por qué hacía eso pero ya no te lo recomiendo.

Tip Tres Disenos desde la raiz h1 SI post h1 NO

La organización que yo te recomendaría para tus módulos es agarrar directamente desde la raíz es decir directamente la aplicas el diseño al h1 h2 h3 y demás es decir evitar hacer esto porque esto a la final te va a complicar mucho la existencia porque vas a definir algunos algunos estilos específicos de esta forma pero luego vas a querer definirlos más específicos de esta forma entonces seguramente vas a tocar por ejemplo márgenes distintos posicionamiento distinto y esto a la final va a ser un tremendo problema porque se van a empezar a sobrescribir entonces a veces se sobreescribe los estilos que estás colocando acá o a veces los estilos que estás colocando por aquí de raíz y aparte de que queda todo muy desorganizado entonces la primera o la ya la recomendación final una vez aclarado cómo es mi esquema para trabajar con los módulos en base al css es que…

Intenta siempre definir los estilos desde la raíz est es una copia como puedes ver no es el que yo estoy empleando y aquí te muestro un poco el el ccs final que yo estoy empleando que es agarrar diseños desde la raíz es decir sin colocar aquí post section ni nada todo desde la raíz e intento adaptarlo lo mejor posible en base a lo explicado y lo puedes ver aquí directamente h1 p ul ul l poco más aquí Bueno obviamente quiero un diseño específico en este caso para cambiar la tipografía ojo que esto no es lo que me refiero a lo que yo quiero que no estés colocando content por ejemplo aquí que coloques una cosa en content aquí un h1 entonces después te fastidias aquí defines otro para no sé post y demás intenta evitar esto sino hacer un diseño que sea común para todo y si todavía no es posible así Simplemente trabaja en base a componentes ya sea en base a Vue o directamente en base a componentes del iware o directamente el lel o lo o la tecnología que estés empleando y hace esos componentes ahí pero evita hacer este desorden en CSS porque a la final te va a ser una pesadilla poder gestionar este archivo y bueno para mostrarte un poquito rapidito CSS que obviamente es común y lo puedes descargar desde la página de desarrollo Libra lo puedes ver desde ahí claro y aquí son como quien dice componentes que yo necesito específicos ya que como cualquier desarrollo.

CSS para componentes Si, NO para raiz

Yo en este caso requiero de algunos componentes que son específicos en este caso para agregar en este caso para agregar espaciados y aquí también es un poco lo mencionado antes esto yo lo considero bien otra vez el problema sería si desde acá colocaras algo similar a esto que esto ya te te puede ocasionar bastantes problemas ya estos son diseños específicos que tú puedes decidir cuando lo empleas por lo tanto esto sería opcional pero si tú lo defines de esta forma va a ser obligatorio ya que esta etiqueta estaría dentro de un template o un layout es decir una vista dentro de tu desarrollo entonces aquí puedes ver que todo es otra vez desde la raíz y de esta forma es el mecanismo que yo pude utilizar 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
}
***

en mi aplicación y en caso de que te preguntes para ya cerrar un poquito el asunto sobre esto que dice Bueno tal cual puedes ver tengo aquí el elemento principal que sería el h1 y aquí le cree una clase en particular que es para pintar aquí algo de color verde Esto es para colocar estas cositas aquí que es para hacer el como quien dice contenido un poco más agradable leer aunque a la final nadie Lee esto porque a nadie le gusta leer pero es un poco para eso obvio no te estoy diciendo que este sea el diseño más bonito del mundo todavía estoy trabajando en esto pero bueno voy poco a poco en el camino y te voy mostrando simplemente algunos avances y aquí puedes ver los espacios que yo voy colocando en base a los spacers que tenía allí arriba y aquí también lo puedes ver otra vez aquí deía acomodarlo un poquito para que no haga tanto contraste pero creo que me va quedando el diseño un poco más agradable a como lo tenía antes a la final tengo que colocar aquí algunos videos imágenes pero ahí voy poco a poco entonces esa sería la recomendación que te pudiera dar.

Tamaño comun para la imagen y contenedores

Otro punto importante que era otro problema que tenía por aquí ya para terminar que me acabo de acordar era la bendita imagen porque este sobre todo era el sujeto en el cual tenía demasiados problemas y era más que todo por esto que creaba como quien dice contenedor en este caso siempre el llamado post era porque siempre manejaba tamaños distintos aquí por ejemplo es un with full aquí fíjate que ya le estoy colocando un max-witdh:

resources\css\blog.css

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

Por ahí abajo pero en otras partes requería que fuera otro tamaño era precisamente esa era La pesadilla entonces por ejemplo para poder trabajar un poco con tamaños distintos de imágenes en tu contenido aquí otra vez lo que te recomiendo Es que no lo implement directamente en el ccs porque otra vez se va a torcer bastante O al menos que lo hagas en base a clases es decir image punto middle size o algo así entonces le defines la mitad del tamaño o un tercio del tamaño o lo que sea aquí siempre te recomendaría Es que le definas un tamaño máximo a la imagen y simplemente juegues con el contenedor en este caso siempre mis imágenes están establecidas en uncontenedor orora en este caso estoy empleando una grilla y por aquí tenemos el container por lo tanto esta imagen si vemos aquí el css que le tengo aplicado siempre tiene un wid de tipo full pero también tiene un mawid que en este caso lo he definí de 500 px para evitar que la misma crezca de manera enorme y básicamente ocupe casi que toda la pantalla y a la final la persona que quiere leer tu contenido no est interesa la imagen sino en el texto entonces imagen sería simplemente una cosita representativa que puede ser acorde a su valor que es decir algo pequeño que sea simplemente una ayuda visual que tengamos ahí entonces eso es un poco también ahí lo recomendado con la imagen En definitiva defn un tamaño máximo y que sea otra vez común tal cual lo tengo ahora por acá a todo tu contenido y si le necesitas cambiar el tamaño simplemente juega con el contenedor en este caso otra vez este sería el tamaño máximo permitido para siempre incluyendo el que sería la publicación ya que aquí también puedes ver que le encogí un poquito bueno la coloque al final esto depende que ya todos tienen video y tengo aquí otro esquema pero voy a ver si encuentro uno aquí una publicación bien vieja aquí puedes ver que simplemente ahora hago que ocupe un pedacito del espacio y que no ocupe todo lo ancho y para esto otra vez emplee lo que es algunos contenedores en este caso otro sistema de grillas así que pues nada esto era lo que te quería Mostrar espero que hayas podido al menos considerar algo que interesante cualquier cosa también puedes comentar que tú mejorarías de lo que te acabo de explicar otro truco o consejo para optimizar aquí tu ccs y sin más que decir nos vemos en otro video.

08-11-2024 - Andrés Cruz

In english

• Categoría
• /
• CSS
• /
• Organiza y obtimiza tu codigo CSS en tus proyectos