En el tip anterior sobre CSS en Squarespace vimos cómo añadir estilos personalizados a una web.
El siguiente problema suele aparecer rápido: escribes una regla, la guardas, recargas la página y no cambia nada.
En muchos casos no es que el CSS esté mal escrito. Lo que ocurre es que entra en conflicto con estilos que Squarespace ya trae definidos en la plantilla.
Una forma de resolverlo es usar !important, una instrucción que le dice al navegador que esa regla tiene prioridad sobre otras reglas que afecten al mismo elemento.
Un ejemplo sencillo
Imagina que tienes dos reglas para los párrafos:
p {
color: red;
}
p {
color: black;
}
El navegador no puede mostrar el mismo texto en rojo y negro a la vez. En este caso, por cómo funciona la cascada de CSS, acabará aplicando el color negro.
Si quieres forzar el rojo, podrías escribir:
p {
color: red !important;
}
p {
color: black;
}
Con !important, la primera regla gana aunque después aparezca otra que intenta cambiar el color.
Cuándo usarlo en Squarespace
En webs como Squarespace, donde la plantilla ya carga su propia hoja de estilos, !important puede ser útil para pequeños ajustes visuales: colores, tamaños, márgenes o detalles concretos que la plantilla insiste en sobrescribir.
Pero no conviene usarlo por sistema. Si todo tu CSS acaba lleno de !important, cada cambio posterior será más difícil de mantener. Antes de añadirlo, revisa si puedes ser más específico con el selector o si estás apuntando al elemento correcto.
Esta idea conecta con otros ajustes básicos de diseño en Squarespace, como cambiar el favicon o personalizar colores de forma consistente: pequeños detalles, pero con impacto en la percepción final de la web.
Si quieres revisar el CSS de tu web en Squarespace y ordenar los cambios sin romper la plantilla, puedes escribirme a ajra@ajra.es.