[FEATURE] Solucion basica con todos los requisitos #212
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
src/components/LcsGrz/Page.css
Outdated
| @@ -0,0 +1,28 @@ | |||
| .container { | |||
There was a problem hiding this comment.
Hay que hacer que los estilos tengan un scope propio. Puedes usar tu nombre de usuario en los selectores para que no colisione con los estilos de otras personas.
There was a problem hiding this comment.
Hola! 👋 Muchas gracias por tu solución! Las clases en tus ficheros css tienen que tener un nombre único que no sea usado en el sitio o en otras soluciones, esto es para evitar conflictos!
Por ejemplo: la clase icon-container puede estar siendo usada en otra parte del sitio y los estilos se sobreescribirian. Para solucionarlo hay varias alternativas (te comento dos):
1- Scopear tus estilos con tu nombre de usuario
En el fichero index.astro
<div class='h-screen flex items-center justify-center' id="LcsGrz">
<Page client:visible />
</div>Y luego en tus ficheros css englobar tus clases a partir de ese id
#LcsGrz .ccontainer {
...
}
#LcsGrz .icon-container {
...
}Esto puede resultar muy tedioso, así que te comento la segunda solución que creo que te será más útil!
2- Usar CSSModules para generar tus clases con un identificador único
Lo único que habría que hacer es cambiar el prefijo [...].css a [...].module.css (no olvides cambiarlo también en las importaciones!), y solo con eso tus estilos estarán siendo generados con un identificador único que no va a entrar en conflicto con otras soluciones.
Con ese cambio ya podremos mergear tu solución! 🚀
|
@midudev Hola! a ver si ahora si esta bien, sabes que habia olvidado que habia habierto este PR y olvide mirar tus comentarios, me quede con el primero que me dejaste :( nombre-componente-nombreDeLaClase --> lg-h-container Es util o lo modifico rapidisimo a lo que me comentabas? |
There was a problem hiding this comment.
Hola!! Muchas gracias por el gran cambio que hiciste!!! Lo valoro mucho ⚡️ De igual manera para asegurarnos de que las clases no entren en conflicto de ninguna manera voy a pedirte si puedes scopearlo con tu nombre de usuario, algo que puede agilizar el trabajo es hacer un hibrido en lo que te comenté y lo que tienes hecho! 🚀 Puedes agregar tu nombre de usuario de esta manera:
.lcsgrz-am-container {}
.lcsgrz-h-title-box {}Usando el buscador de VSCode y remplazando el texto de .lg- por .lcsgrz- se puede hacer menos tedioso 😅
Muchas gracias otra vez por merjorarlo!! 😊
|
@maadeval Listo! ya cambie todas las ocurrencias :D |
Esta es la solucion super simple y basica para abarcar todos los requisitos