Cuando comienzas con el diseño web, un elemento clave para hacer que todo funcione correctamente y tenga el aspecto que deseas es el CSS. Es la abreviatura de Cascading Style Sheets (Hojas de Estilo en Cascada), y funcionan permitiéndote estilizar los elementos HTML de la forma que quieras.
Y aunque puedes experimentar con CSS de muchas maneras – la mayoría de las veces inline – , hay una forma mejor de hacerlo. Y eso se ajusta a una serie de buenas prácticas que debes seguir para asegurarte de que tu código es funcional, carece de volumen innecesario y está bien organizado.
Hoy destacaremos 14 buenas prácticas de CSS para principiantes, pero incluso los profesionales experimentados deberían repasar los fundamentos de vez en cuando.
Mira Nuestro Videotutorial con las Mejores Prácticas CSS para Principiantes
1. Organizar la Hoja de Estilos
Lo primero que debes hacer al aplicar las mejores prácticas de CSS es organizar tus hojas de estilo. La forma de hacerlo dependerá de tu proyecto, pero como regla general, deberás seguir los siguientes principios de organización:
Sé coherente
Independientemente de cómo decidas organizar tu CSS, asegúrate de que tus elecciones sean coherentes en toda la hoja de estilos, así como en todo tu sitio web.
Desde los nombres de las clases hasta las sangrías de las líneas y las estructuras de los comentarios, mantenerlo todo coherente te ayudará a hacer un seguimiento de tu trabajo más fácilmente. Además, te asegura que hacer cambios, más adelante, no supondrá un dolor de cabeza.
Utiliza Libremente los Saltos de Línea
Aunque el CSS funcionará incluso si es feo visualmente, es mejor para ti y para cualquier otro desarrollador que vaya a trabajar con tu código si utilizas muchos saltos de línea para mantener cada fragmento de código separado y legible.
Normalmente, es mejor colocar cada par de propiedades y valores en una nueva línea.
Crea Nuevas Secciones Donde Tenga Sentido
De nuevo, la forma de configurar tus hojas de estilo dependerá en gran medida del tipo de sitio en el que estés trabajando. Pero como regla general, es una buena idea establecer secciones para los estilos tal y como se van a utilizar. Es decir, una sección para los estilos de texto, una sección para las listas y columnas, una sección para la navegación y los enlaces, etc. También puedes crear secciones para páginas específicas que pueden tener un estilo diferente al resto, como la tienda o las preguntas frecuentes.
Comenta Tu Código
Aunque sólo tú vayas a ver tu CSS, sigue siendo una buena idea ser minucioso con tus comentarios. Los comentarios tendrán el siguiente aspecto:
/* This is what a standard CSS comment looks like */De esta forma, te resultará más fácil saber a qué corresponde cada sección de un vistazo, sin tener que repasar después cada línea.
Los comentarios pueden ayudarte a definir las secciones, pero también puedes utilizarlos para dar una idea de las decisiones que has tomado, sobre todo si crees que puedes olvidarlo más tarde.
Utiliza Hojas de Estilo Separadas para los Proyectos más Grandes
Esto no se aplica a todos los sitios web, pero si tienes un sitio grande con necesidad de mucho CSS específico, usar varias hojas de estilo es una buena idea. Nadie – incluido tú – debería tener que desplazarse durante mucho tiempo para encontrar la única línea de código que necesita.
Evita la molestia y crea hojas de estilo separadas para las diferentes secciones del sitio, especialmente si van a tener estilos completamente diferentes.
Por ejemplo, puede que quieras crear una hoja de estilo para los estilos globales y otra para tu tienda online con estilos dedicados a las descripciones de los productos, los encabezados o los precios.
2. CSS Inline vs. CSS Externo vs. CSS Interno
Hay tres tipos diferentes de CSS con los que puedes tener que lidiar cuando construyes un sitio web y ajustas su estilo. Hablemos un poco de lo que es y hace cada uno de ellos y luego hablemos de cuál deberías utilizar realmente en tus proyectos.
- CSS inline. Esto te permite dar estilo a elementos HTML específicos,
- CSS externo. Esto implica el uso de un archivo como una hoja de estilos para dar estilo al sitio en su conjunto.
- CSS interno. Te permite dar estilo a toda una página en lugar de a elementos específicos.
Muchos desarrolladores recomiendan evitar por completo el CSS inline, ya que normalmente no se puede almacenar en caché, y se recomienda evitar dividir el CSS en varios archivos. Al menos, debe utilizarse con moderación.
En realidad, sólo podemos ver su necesidad si utilizas un poco de estilo en una sola sección, trozo de texto o área de una sola página de tu sitio web. Esa es probablemente la única situación en la que el CSS inline es una solución viable.
Aparte de eso, utilizar CSS externo o CSS interno, dependiendo de tus necesidades, son las mejores opciones, ya que te ahorran tiempo y esfuerzo. Determina los estilos una vez, y aplícalos en todo tu sitio web. Boom – hecho.
3. Minimiza tu Hoja de Estilos
Otra de las mejores prácticas de CSS es minificar tus hojas de estilo. Hay numerosas herramientas de minificación disponibles para acelerar los tiempos de carga de tus hojas de estilo, incluso directamente en la CDN de Kinsta.
Esto te permite ajustar la configuración de la minificación del código en todo tu sitio web.
4. Utiliza un Preprocesador
Un preprocesador como Sass/SCSS te permite utilizar variables y funciones, organizar mejor tu CSS y ahorrar tiempo. Funcionan permitiéndote crear CSS a partir de la sintaxis del preprocesador.
Lo que esto significa es que el preprocesador es como un «CSS +» en el que se incluyen un par de características que no suelen existir en el CSS por sí mismo. La adición de estas características suele hacer que el CSS de salida sea más legible y más fácil de navegar.
Necesitarás un compilador de CSS en el servidor de tu sitio web para poder utilizar los preprocesadores. Algunos de los preprocesadores más populares son Sass, LESS y Stylus.
5. Considera un Framework CSS
Los frameworks CSS pueden ser útiles en algunos casos, pero pueden ser innecesarios para mucha gente, especialmente si tu sitio web es más pequeño.
Los frameworks pueden facilitar el despliegue rápido de grandes proyectos, y también evitar errores. Y proporcionan la ventaja de la estandarización, que es esencial cuando varias personas trabajan en un proyecto al mismo tiempo.
Todos utilizarán los mismos procedimientos de nomenclatura, las mismas opciones de diseño, los mismos procedimientos para comentar, etc.
Por otro lado, también dan lugar a sitios web de aspecto genérico y gran parte del código puede acabar sin utilizarse.
Es probable que te hayas encontrado alguna vez con frameworks de CSS. Bootstrap y Foundation son dos de los ejemplos más populares. Otros marcos son Tailwind CSS y Bulma.
6. Empieza con un Reinicio
Otra cosa que debes poner en práctica rápidamente es comenzar tu trabajo de desarrollo con un restablecimiento de CSS. Utilizar algo como normalize.css puede hacer que todos los navegadores representen los elementos de la página de forma coherente y siguiendo los estándares más actualizados para minimizar las incoherencias de los navegadores.
Este restablecimiento es en realidad un pequeño archivo CSS que subes a tu sitio web para añadir un mayor nivel de coherencia entre navegadores al estilo de los elementos HTML y sirve como una forma actualizada de realizar un restablecimiento CSS.
7. Clases vs. IDs
Lo siguiente a lo que debes prestar atención cuando sigas las mejores prácticas de CSS es cómo tratas las clases y los ID. En caso de que no estés familiarizado, definamos ambos brevemente:
- Clase. El selector de clase funciona seleccionando un elemento con un atributo de clase. Lo que hay en el atributo class es lo que determina cómo se selecciona el elemento HTML. Su aspecto en código es el siguiente .classname
- ID. Por otro lado, el ID funciona seleccionando un elemento con un atributo ID. El atributo ID tiene que ser el mismo que el valor del selector para que funcione. Puedes reconocer un ID en CSS por este símbolo: #.
Un ID se utiliza para seleccionar un solo elemento, mientras que una clase se utiliza para seleccionar más de un elemento. Utilizarías un ID para aplicar un estilo a un único elemento HTML. Utilizarás una clase para aplicar un estilo a más de un elemento HTML. Seguir esta regla general ayuda a mantener tu código limpio y ordenado, y también reduce el caso de código innecesario o duplicado.
De forma similar a la discusión anterior sobre el CSS inline o externo, utilizas un ID para aplicar un estilo a un solo elemento. Básicamente, los ID están pensados para aplicar estilos a las excepciones de la página, no para estilos generales que se apliquen a toda la página o sitio web.
8. Evita la Redundancia
Otra de las mejores prácticas de CSS que debes seguir es evitar la redundancia siempre y cuando puedas. Aquí tienes algunos consejos generales para aplicar esta práctica a tu flujo de trabajo:
Utiliza el Método DRY
El método DRY significa «Don’t Repeat Yourself» (no te repitas) y es básicamente la idea de que nunca debes repetir código en CSS. Porque, en el mejor de los casos, es una pérdida de tiempo y es repetitivo que introduzcas manualmente estos estilos una y otra vez, pero en el peor de los casos puede ralentizar activamente tu sitio web.
Es una buena práctica revisar tu código para eliminar las redundancias. No es necesario que las etiquetas identifiquen el tamaño de la fuente dos veces en la misma sección, por ejemplo. Elimina las repeticiones y tu código se leerá mejor y también funcionará mejor.
Utilizar la Abreviatura CSS
La abreviatura CSS es una forma estupenda de reducir la cantidad de espacio que ocupa tu código sin que deje de funcionar como debería. Puedes combinar varios estilos en una sola línea si tiene sentido hacerlo. Por ejemplo, si estás configurando los estilos de un div en particular, podrías enumerar el margen, el relleno, la fuente, el tamaño de la fuente y el color, todo en una sola línea.
Añade Varias Clases a tus Elementos
Cuando proceda, también puedes evitar redundancias añadiendo más de una clase a un elemento. Por ejemplo, si el contenido de tu página ya flota a la izquierda gracias a la clase .left, pero quieres posicionar una columna de la página a la derecha, puedes añadirla al elemento para evitar confusiones y decirle a CSS específicamente qué elemento quieres que flote a la derecha además de la alineación estándar a la izquierda.
Y lo mejor es que puedes añadir tantas clases como quieras a un elemento, siempre que estén separadas por un espacio.
Combina los Elementos Cuando sea Posible
En lugar de enumerar los elementos uno por uno, combínalos para ahorrar espacio y tiempo. A menudo, los elementos de una misma hoja de estilos tendrán los mismos (o similares) estilos. No es necesario enumerar la fuente, el color y la alineación de cada elemento de texto de la página si todos comparten el mismo estilo. En su lugar, combínalos en una sola línea como ésta:
h1, h2, h3, p {
font-family: arial,
color: #00000
}Evita los Selectores Adicionales Innecesarios
A veces tu código se desordena un poco mientras trabajas en la finalización del diseño de tu sitio. Por eso es importante volver atrás y eliminar los selectores innecesarios a posteriori. También debes estar atento a los selectores demasiado complejos. Por ejemplo, si vas a dar estilo a las listas de tu sitio web, no necesitas utilizar selectores como «body» o «container» ni nada por el estilo. Bastará con .classname li { .
9. Cómo Importar Correctamente las Fuentes
Importar y utilizar correctamente las fuentes es otra forma de garantizar que tu CSS sea claro, conciso y esté optimizado.
Usar @font-face para Importar Fuentes
Puedes añadir casi cualquier fuente que quieras a tu sitio web, pero tendrás que seguir un procedimiento específico para asegurarte de que funciona correctamente.
- Descarga la fuente que quieras utilizar. Hay muchos sitios donde puedes conseguir fuentes, como Google y Adobe. Asegúrate de que estás descargando el archivo de fuente TrueType (.ttf) de la fuente que has elegido.
- Sube la fuente personalizada que quieras utilizar al generador de fuentes web que pone a tu disposición Font Squirrel. Descarga el Kit de Fuentes Web una vez que se haya generado. Debería contener varios archivos, incluyendo varios archivos de fuentes diferentes con extensiones como .ttf, .woff, .woff2 y .eot. También debería haber un archivo CSS incluido.
- Sube el kit de fuentes web a tu sitio web mediante FTP. Las instrucciones específicas para ello variarán en función de tu proveedor de alojamiento web, pero en general, puedes acceder a los archivos de tu sitio utilizando un cliente FTP o el gestor de archivos de la interfaz de administración de tu alojamiento web, como cPanel.
- Actualiza el archivo CSS con un editor de texto. Servirá el editor de texto HTML que prefieras, como NotePad o Sublime. Dentro de este archivo, habrá una lista de «URL de origen». Tendrás que actualizarla para que refleje dónde se aloja ahora el Web Font Kit en tu servidor web. Copia la ruta del archivo donde se almacena cada archivo de fuentes en tu servidor web en este archivo de la siguiente manera:
@font-face {
font-family: "FontName";
src: url("https://sitename.com/css/fonts/FontName.eot");
src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"),
url("https://sitename.com/css/fonts/FontName.otf") format("opentype"),
url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg");
}A continuación, puedes poner en práctica tus nuevas fuentes añadiéndolas a los archivos CSS de tu sitio con la etiqueta font-family.
Para mejorar el rendimiento del sitio y evitar reajustes extraños del diseño de tu sitio mientras se carga, puedes precargar las fuentes. Precargar las fuentes y cargar primero las fuentes WOFF2 (o el tamaño de fuente más pequeño en su defecto) puede mejorar notablemente el rendimiento. Esto se hace añadiendo una línea de código a la etiqueta <head>. Better Web Type ofrece un ejemplo conciso:
<link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">Otra cosa que puedes hacer es limitar el conjunto de caracteres de tus fuentes personalizadas. Si sólo utilizas unos pocos caracteres de una fuente (para una cabecera o un logotipo, tal vez) no necesitas llamar a todo el conjunto de caracteres, sino sólo a los que realmente necesitas. Según el nuevo código, para solicitar sólo los caracteres «Hola» lo harías de la siguiente manera
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hola" rel="stylesheet">Fuentes Autoalojadas Cuando sea Posible
El proceso descrito anteriormente es para fuentes autoalojadas, pero es importante reiterar que éste es el mejor enfoque. Acelera considerablemente el tiempo de carga y significa que no dependes de la velocidad de otro sitio para completar el proceso de carga de tu sitio.
Cuidado con las Variaciones de Fuentes
Las variaciones de fuentes pueden ser muy útiles para añadir estilos divertidos a tu sitio web. Sin embargo, su mal uso puede acabar con tu sitio web.
Si asignas más de un estilo en la configuración de las variaciones de fuentes, es probable que se superpongan y que una anule a la otra. Es mucho mejor que mantengas las cosas sencillas y utilices las propiedades de la fuente, como se ilustra aquí:
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}Utilizar una Fuente de Reserva
Aunque te esfuerces en añadir una fuente personalizada a tu sitio web y utilizarla mediante CSS, no va a funcionar el 100% de las veces, especialmente cuando accede alguien con un navegador web no actualizado. Pero aún así quieres que estos visitantes del sitio tengan una experiencia de navegación agradable.
Para ello, es esencial establecer una fuente de reserva que pueda utilizarse en caso de que ninguna de tus otras fuentes sea utilizable. Para ello, sólo tienes que poner la fuente de reserva después de tu fuente preferida al asignar una familia de fuentes. De este modo, el CSS llamará primero a tu fuente preferida, luego a tu segunda opción, luego a la tercera, y así sucesivamente.
Según W3Schools, hay cinco categorías principales de familias de fuentes. Lo que sigue es una lista de estas familias con fuentes alternativas populares que encajan en cada una.
- Serif: Times New Roman, Georgia, Garamond
- Sans-serif : Arial, Tahoma, Helvetica
- Monospace: Courier New
- Cursiva: Brush Script MT
- Fantasía: Copperplate, Papyrus
10. Haz que el CSS sea Accesible
Todo el mundo debería hacer sus sitios web accesibles – sin más. Y esto también se aplica a tu enfoque del CSS. Tu objetivo debe ser hacer que tu sitio web sea utilizable por el mayor número de personas posible y la aplicación de medidas de accesibilidad es una forma fantástica de lograrlo.
Puedes hacer que tu CSS sea accesible de varias maneras:
- Añade variación de color a los enlaces para que destaquen.
- Haz que las ventanas emergentes se puedan descartar pulsando la tecla ESC. Las personas que utilizan lectores de pantalla o aumentos a menudo no podrán ver la «X» en la pantalla para descartar una ventana emergente, por lo que es esencial hacer que se puedan descartar pulsando una tecla.
- Algunos dispositivos ni siquiera muestran las ventanas emergentes en primer lugar, así que asegúrate de que toda la información esencial se transmite en otro lugar.
- Los elementos que se mueven (como la información sobre herramientas) deben activarse con la tecla Tabulador, así como al pasar el ratón por encima.
- No elimines los contornos. Los navegadores muestran automáticamente un contorno alrededor de los elementos en los que se centra el teclado. Puedes desactivar esto utilizando outline:none, pero realmente no deberías, ya que es muy valioso para quienes utilizan lectores de pantalla o tienen baja visión y necesitan puntos adicionales de resaltado/enfoque para la navegación.
- Mejorar el indicador de enfoque. Como ya se ha mencionado, los contornos alrededor de los elementos resaltados son esenciales desde el punto de vista de la navegación para muchos, pero el contorno por defecto apenas es visible. Puedes modificarlo para que sea más visible utilizando : focus para establecer un estilo que llame más la atención sobre lo que está enfocado en ese momento. Puedes hacer algo similar con : hover para mejorar los efectos de cobertura. Un buen ejemplo de modificación de : focus en acción proviene de un conjunto de directrices de accesibilidad de la Universidad de Washington:
a {
color: black;
background-color: white;
text-decoration: underline
}
a:focus, a:hover {
color: white;
background-color: black;
text-decoration: none
}Este fragmento de código hace que los enlaces se muestren como texto negro sobre fondo blanco, pero que cambien a texto blanco sobre fondo cuando se sitúan bajo el foco del teclado (cuando el usuario se desplaza hacia el elemento). El mismo efecto se produce también al pasar el ratón por encima.
11. Implementar las Convenciones de Nomenclatura
En este momento puede parecer algo insignificante, pero el nombre que decidas darle a las cosas en CSS puede tener impactos duraderos – y puede costarte activamente tiempo y dinero en el futuro si lo haces de forma incorrecta. Antes incluso de empezar a escribir CSS, deberías decidir una serie de convenciones de nomenclatura y ceñirte a ellas.
Esto te ahorrará mucho tiempo de depuración más adelante, ya que es menos probable que te refieras al elemento equivocado al escribir tu código. Según FreeCodeCamp, un buen enfoque es atenerse al formato estándar de los nombres CSS, es decir, font-weight frente a fontWeight.
Utiliza la Convención de Nombres BEM
Una buena forma de mantener la coherencia de los nombres es utilizar la Convención de Nombres BEM. El objetivo de BEM es dividir la interfaz de usuario en componentes que puedas reutilizar una y otra vez.
BEM significa Bloque, Elemento y Modificador. Pero vamos a desglosar lo que eso significa realmente.
- Bloque : Un bloque puede ser cualquier trozo de diseño en tu sitio web, como un menú, una cabecera, un pie de página o una columna. Tus bloques deben tener nombres como .main-nav o .footer.
- Elemento. Los elementos describen las piezas que componen cada bloque. Piensa en cosas como fuentes, colores, botones, listas o enlaces. Cuando se utiliza la convención de nomenclatura BEM, los elementos se identifican colocando dos guiones bajos antes del nombre del elemento. Así que si quisiéramos hablar de la fuente utilizada en la cabecera de tu sitio web, se vería así en CSS con la convención de nomenclatura BEM: .header__font
- Modificador. La última pieza del puzzle BEM es el modificador. Los modificadores son la forma de establecer el estilo del elemento dentro del bloque. Incluyen cosas como los nombres, pesos y tamaños de las fuentes, los valores de color y los valores de alineación. Siguiendo con el ejemplo establecido anteriormente, si quisieras establecer el color de la fuente dentro del encabezado, lo escribirías así con el elemento y el modificador separados por dos guiones: .header__font-red
Seguir esta convención de nomenclatura – o cualquier otra que decida tu equipo – puede hacer mucho más agradable la experiencia de edición y depuración más adelante.
12. Evita la Etiqueta !Important
Otra buena práctica que debes implementar en tu rutina de trabajo con CSS es evitar el uso excesivo de la etiqueta !important en la medida de lo posible.
Aunque puede solucionar problemas, su uso suele llevar a confiar en ella como si fuera una muleta. Y eso puede resultar en un lío de etiquetas !!important por todo tu código que puede acabar rompiendo tu sitio.
En realidad, esto se reduce a la especificidad. Si un selector es muy específico, tu navegador web determinará que es más importante de lo que lo haría con selectores menos específicos. La etiqueta !important puede utilizarse para identificar las propiedades que son más importantes que otras.
Esto puede ser complicado, ya que a menudo tendrás que utilizar varias etiquetas !important – y cada una de ellas anulará la anterior en determinados casos. Hacer esto demasiado puede hacer que tu sitio se rompa o que tus estilos se carguen incorrectamente. La mayoría de las veces, esta etiqueta se utiliza como una solución a corto plazo, pero a menudo se convierte en permanente y puede causar problemas más tarde, en particular, cuando es el momento de depurar.
Una de las pocas veces que se considera aceptable el uso de la etiqueta !important es para permitir al usuario final anular los estilos para su uso con lectores de pantalla y otras ayudas de accesibilidad. También es útil cuando se trata de clases de utilidad.
13. Utiliza Flexbox
También puedes sacar más provecho de Flexbox cuando intentes implementar las mejores prácticas para tratar con CSS en tu flujo de trabajo. Flexbox es una forma flexible de crear un diseño web y alinear elementos en la página, en lugar de utilizar la opción tradicional de flotación.
Según CSS-Tricks, Flexbox es un módulo de caja flexible que constituye una forma alternativa de estructurar tu CSS prestando atención a cómo se alinean y distribuyen tus diseños dentro de un contenedor. Lo mejor es que ni siquiera es necesario conocer el tamaño del contenedor en sí, sino que las propiedades que contiene se «flexionarán» con el cambio de tamaño del contenedor. Esta es una forma estupenda de adaptarse a los dispositivos móviles.
Otra diferencia clave es que el Flexbox es «agnóstico en cuanto a la dirección», lo que significa que sus diseños no están estructurados vertical u horizontalmente. Esto hace que sea una mejor opción para diseñar sitios web y aplicaciones complicadas que deben acomodar muchos cambios de orientación de la pantalla. Los diseños CSS estándar se basan en bloques y los diseños flexbox se basan en el «flujo flexible». De nuevo, CSS-Tricks ofrece un dibujo conciso que ilustra bien este concepto:
Los elementos dentro del flexbox se distribuyen a través del eje principal y del eje transversal, donde cada elemento y propiedad dentro están diseñados para flexionar y fluir en función del tamaño del contenedor flexible.
14. Consejo de WordPress: No Modifiques Directamente los Archivos del Tema
La última de las recomendaciones de CSS que trataremos hoy es para los usuarios de WordPress, específicamente. Nunca es una buena idea modificar los archivos de tu tema directamente. Cualquier actualización del sitio podría eliminar estos cambios o romper tu sitio. No vale la pena el riesgo.
En su lugar, puedes utilizar la opción de CSS adicional en el Personalizador de Temas para realizar los cambios que desees. Sin embargo, debes tener en cuenta que esto inyecta el CSS inline y lo colocará directamente en la cabecera.
Si sólo quieres hacer uno o dos cambios, ésta puede ser una opción viable, sin embargo, todo lo que coloques en el cuadro de CSS adicional permanecerá, incluso si realizas una actualización del tema, una actualización del sitio o incluso si cambias de tema.
Ahora bien, si son necesarias modificaciones de CSS más robustas, es mejor que las añadas desde una hoja de estilos CSS personalizada o utilizando un tema hijo en el que modifiques directamente el archivo style.css del tema hijo. Este método también es a prueba de actualizaciones.
Resumen
Sumergirse de lleno en la creación de un CSS útil y preciso puede parecer mucho para un verdadero novato, pero tomarse el tiempo necesario para informarse sobre las mejores prácticas puede ahorrarte mucho tiempo, esfuerzo y dolores de cabeza más adelante.
Esperamos que esta colección de buenas prácticas te ayude a dirigirte por el camino correcto hacia la construcción de sitios web funcionales, útiles y accesibles en los próximos años. ¡Buena suerte!
Deja una respuesta