AVISO: Se viene un post cargadito 🙂.
Si alguna vez has querido editar algún elemento en tu web, es muy probable que te hayas dado cuenta de que existen varias formas de conseguir aparentemente el mismo resultado. Sin embargo, en la creación de páginas web existen las llamadas buenas prácticas de desarrollo que no debemos pasar por alto, y hoy hablaré un poquito de una de ellas.
Principio DRY development
El DRY development (Don’t repeat yourself), “no te repitas” en español, es una metodología de escritura de código que nace con el objetivo de que no repitas la información y los datos para mejorar así la calidad del código. Pero no te asustes, no tienes que ser desarrollador ni hacer tus webs a mano con código para poder aplicar este principio: lo más probable es que el constructor visual que utilices (Elementor, Bricks, Divi…) te ofrezca funcionalidades para crear tu página web en base a estas buenas prácticas, aunque algunos constructores te facilitan estas opciones más que otros.
¿Por qué usarlo?
Seguir este principio a la hora de hacer tu web tiene muchas ventajas:
- Facilidad para hacer cambios o correcciones en el diseño de tu web. Imagina que tienes ocho botones a lo largo de tu página y que has editado cada uno de ellos para que tengan un fondo rojo. Al cabo de unos días decides que es mejor un fondo azul y lo cambias: tienes que ir uno por uno cambiando el fondo de todos los botones. Ahora imagina que tienes trescientos botones en una web enorme y necesitas cambiarles el color: como tengas que ir de uno en uno, te mueres, y para evitar este problemón existen las classes.
- Un código más corto y simple=una página web más rápida. Ponte que tienes los colores de tu marca ya definidos y necesitas aplicarlos a tu web. Cada vez que quieres usar el azul corporativo copias y pegas el código HEX, de forma que tienes trescientos elementos con ese código HEX pegado trescientas veces. Para esto existen los tokens: creas una variable con tu color corporativo y cuando necesites utilizarlo simplemente pegas el token, de manera que en tu código ese HEX de color solo aparece una vez.
- En resumen: ESCALABILIDAD, MANTENIBILIDAD Y CONSISTENCIA. Cuanto menos código tengas, más simple sea y menos repitas la misma acción y los mismos cambios sobre la web, menos probabilidad de cagarla.
Entonces, ¿cómo podemos aplicarlo en un constructor visual? Porque no me entero.
Eso fue lo que yo pensé en un primer momento. Y es que depende del constructor que utilices, esta tarea es más sencilla o complicada. Para establecer classes en Bricks Builder, el constructor que yo utilizo, simplemente tengo que crear la clase en el panel izquierdo y cambiar de edición de la clase a edición ID con un click.
No voy a dar la información de cómo hacerlo en todos los constructores (es tan fácil como buscarlo en San Google), pero si usas Elementor, es tal que así: seleccionas el elemento > panel de Avanzado > CSS class. A raíz de esto, simplemente tienes que darle la misma clase a todos los elementos que quieres que tengan ediciones compartidas (ej. dar la clase «primary-btn» a todos los botones principales). Aquí el link al tutorial de Elementor: https://elementor.com/help/css-classes-in-elementor/
Pero esto de classes e ID, ¿qué es?
Como ya dijimos, existen múltiples formas de editar los elementos en una web, y se podría decir que van de una edición más general o global, a una más específica. Tenemos la edición global de un elemento (ej. Editar las características de todos los h1 para que tengan el mismo tamaño determinado), la edición de classes (ej. Editar las características de una tarjeta con un icono y un texto y que todas las tarjetas con esa misma clase cambien, de manera en que se mantenga la coherencia entre ellas) y la edición a nivel ID (ej. Editar el tamaño del h1 de la sección hero [primera sección de la página de inicio] porque queremos que sea más grande que el resto de h1, pero SÓLO en el hero). Aquí un repasillo general de las ventajas y usos de cada tipo de edición:
Edición a nivel global
Ventajas:
- Consistencia: Las clases globales permiten establecer estilos y funcionalidades consistentes en todo el sitio, lo que garantiza una apariencia uniforme.
- Facilidad de mantenimiento: Cambiar una clase global afecta a todos los elementos de un tipo que la utilizan, lo que simplifica el proceso de mantenimiento.
Usos:
- Cuando quieres poner una modificación por defecto que afectará a todos los elementos de ese tipo: un tamaño por defecto a todos los h2, un ancho por defecto de los contenedores de la web, un padding por defecto de las secciones para mantener la consistencia en todo el sitio…
- No son ediciones a nivel estético, sino funcional.
Edición de classes
Ventajas:
- Reutilización de estilos: Puedes dar ciertas características (un color, tipografía, tamaño, efecto…) a una clase, y esta clase puedes aplicarla a varios elementos para que compartan las características que has definido. De esta forma consigues una apariencia coherente entre todos los elementos con dicha clase
- Facilidad de mantenimiento: Al usar classes, es más sencillo mantener y actualizar los estilos de la página, ya que los cambios se reflejarán automáticamente en todos los elementos que utilizan esa clase.
- Reducción de código CSS: Al reutilizar estilos, se reduce la cantidad de código CSS necesario, lo que contribuye a una carga de página más rápida.
Usos:
- Se usan cuando vas a repetir las ediciones en varios elementos. Si tienes un botón con fondo rojo y tipografía blanca, y te ves creando otro botón con esas mismas características, es el momento de crear una clase que aplique las ediciones a ambos elementos (y a los que quieras tener en el futuro con esas modificaciones). De hecho, si dudas en si vas a querer crear otro elemento con esas ediciones en un futuro, lo mejor es que crees una clase por si aca.
Edición a nivel de ID
Ventajas:
- Precisión y control: Editar elementos mediante ID te da un control preciso sobre un elemento específico en tu página. Puedes aplicar estilos y funcionalidades exclusivas a ese elemento.
- Flexibilidad: Puedes personalizar elementos de manera individual sin afectar a otros elementos de la misma clase o tipo.
Usos:
- ÚNICAMENTE cuando estás aplicando estilos a un elemento y no vas a repetirlos. Por ejemplo, quieres que en la sección hero el color de fondo sea diferente al resto de la web: pues en esa sección cambias el color directamente sobre el ID de la sección, ya que no vas a repetir este cambio.
Conclusión
La elección entre editar elementos a nivel de ID, utilizar classes o aplicar clases globales depende de cada web y los usos que le vayas a dar a cada elemento. La clave está en seleccionar el método adecuado para cada situación y mantener un equilibrio entre control, eficiencia y mantenimiento.
De nuevo, te dejo una clase estupenda de Kevin Geary, que seguramente explica todo esto mejor que yo :). Y si tienes cualquier duda, yo estoy encantada de hablar del tema al más puro estilo friki total.