Editar estilos en vivo: el ciclo de iteración de un segundo
Todas las formas de modificar CSS desde el panel, los incrementos por teclado, el selector de color con sus espacios, y por qué crear una regla es mejor que editar element.style.
Ajustar un valor de CSS editando el fichero cuesta entre diez y treinta segundos por iteración contando el guardado, la recompilación y la recarga. Hacerlo en el panel cuesta menos de uno, y esa diferencia de dos órdenes de magnitud cambia qué preguntas te puedes permitir hacer. Con ciclos de treinta segundos ajustas un espaciado dos veces y te conformas; con ciclos de un segundo lo ajustas veinte y das con el valor correcto. La técnica tiene reglas, sobre todo la de dónde escribir para no engañarte.
- Modificar valores con teclado usando los cuatro incrementos disponibles.
- Crear reglas nuevas con el selector adecuado en lugar de editar el atributo de estilo.
- Usar el selector de color para convertir entre espacios y comprobar contraste.
- Recuperar el conjunto de cambios hechos durante una sesión para llevarlos al código.
Los cuatro incrementos por teclado
Con el cursor sobre un valor numérico, las flechas arriba y abajo lo modifican. Los modificadores cambian el paso.
Sin modificador, una unidad. Con la tecla de alt u opción, una décima, que es lo que hace falta para ajustar un line-height o una opacity. Con mayúsculas, diez unidades. Con la tecla de control o de comando según el sistema, cien unidades.
Suena a detalle menor y no lo es: ajustar un letter-spacing a ojo requiere pasos de centésimas, y hacerlo escribiendo números a mano rompe el ritmo. Con los incrementos, mantienes la vista en la página mientras la mano recorre valores, que es la única forma de acertar con algo que se juzga visualmente.
Los incrementos funcionan sobre cualquier número, incluidos los que están dentro de funciones: los tres canales de un rgb(), los desplazamientos de un box-shadow, los porcentajes de un linear-gradient.
El autocompletado del panel funciona tanto en nombres de propiedad como en valores, y sobre todo funciona con custom properties: al escribir var( ofrece la lista de todas las variables disponibles en ese ámbito, con su valor resuelto al lado. Es la forma más rápida de descubrir qué tokens de diseño existen en un proyecto que no conoces.
Crear una regla en vez de tocar el atributo de estilo
El botón de más en la cabecera del panel crea una regla nueva. Por defecto usa un selector que apunta al elemento seleccionado, y ese selector es editable antes de escribir nada dentro.
Hay tres razones fuertes para preferir esto a escribir directamente en element.style, y las tres importan.
Es visible. Una regla nueva aparece con su selector y con la indicación de que la creaste desde el inspector. element.style se confunde visualmente con los estilos en línea que la aplicación pudo haber puesto, y a los diez minutos ya no sabes cuál es tuyo.
Te obliga a pensar en el selector. Y el selector es, muy a menudo, donde está el problema real. Si al crear la regla descubres que el selector que querías usar no casa, acabas de encontrar el bug.
Es trasladable. La regla que creaste se puede copiar tal cual al fichero. Una declaración en element.style hay que traducirla a una regla, y en esa traducción es donde aparece la sorpresa de que con el selector real la declaración pierde la cascada.
Además, el panel permite editar el selector de cualquier regla existente haciendo doble clic sobre él, y muestra en tiempo real cuántos elementos casan. Eso convierte el panel en un banco de pruebas de selectores: escribes, ves si casa, ves si sigue casando con el elemento actual.
El selector de color
El cuadrito de color junto a cualquier valor cromático abre un selector que hace bastante más que elegir un color.
Convierte entre espacios. Pulsando sobre la etiqueta del formato, cicla entre las notaciones disponibles: hexadecimal, rgb, hsl, hwb, y los espacios modernos como lch y oklch. Es la forma más rápida de traducir un color de un sistema de diseño a la notación que use tu código.
Muestra el contraste. Con un elemento de texto seleccionado, el selector indica el ratio de contraste contra el fondo calculado y si cumple los umbrales. Y dibuja sobre el degradado una línea de contraste: cualquier color por encima de ella cumple el umbral y cualquiera por debajo no. Eso permite elegir un color accesible arrastrando en vez de probar valores y comprobar.
Ofrece la paleta de la página. Una de las secciones del selector lista los colores que ya se usan en la hoja de estilos, lo que evita introducir un decimoquinto gris ligeramente distinto de los catorce que ya había.
Tiene cuentagotas. Permite tomar un color de cualquier punto de la pantalla, incluido fuera del navegador en la mayoría de los sistemas.
Los editores visuales
Varias propiedades tienen editor propio, indicado por un icono junto al valor.
Las funciones de temporización de transition y animation abren un editor de curvas de Bézier con los presets habituales y la posibilidad de arrastrar los puntos de control, con una previsualización animada.
Las sombras de box-shadow y text-shadow abren un editor con desplazamiento, desenfoque, expansión y color.
La alineación en contenedores flex y grid ofrece iconos con la representación visual de cada valor, lo que resuelve de una vez la confusión perpetua entre los ejes y entre justify y align.
Y las posiciones de fondo y los degradados tienen sus propios controles.
Todos ellos escriben CSS válido, así que lo que quede en el panel se puede copiar al fichero.
El problema estructural de editar en el panel es que los cambios no persisten, y la solución que casi todo el mundo aplica es ir apuntando en un bloc de notas o recordar. Ambas fallan a partir del quinto cambio. Existe una pestaña en el cajón inferior, accesible desde el menú de comandos escribiendo changes, que muestra un diff completo de todas las modificaciones que has hecho a las hojas de estilo durante la sesión, con formato de parche: fichero por fichero, con las líneas eliminadas y las añadidas. Es exactamente la información que necesitas para trasladar el trabajo al editor, y la mayoría de la gente no sabe que existe, lo que explica la cantidad de sesiones que terminan con alguien intentando reconstruir de memoria qué había tocado. Tiene tres usos que van más allá de lo obvio. Como checklist de traslado, para no olvidarte de ninguno de los ocho ajustes que hiciste. Como auditoría de tu propia sesión, para descubrir el cambio que hiciste hace media hora y olvidaste, que es la causa de una parte considerable de los comportamientos inexplicables. Y como prueba de que no has tocado nada, cuando quieres asegurarte de que el comportamiento que estás observando es el real y no un artefacto tuyo: si la pestaña de cambios está vacía, no has intervenido en los estilos. Ese último uso es el que convierte una comodidad en parte del método. Combinada con los overrides locales, que sí persisten, cubre el ciclo completo desde el experimento efímero hasta el cambio que sobrevive a la recarga.
Lo que no se puede editar en el panel
Hay límites y conviene conocerlos para no perder tiempo. Las reglas del agente de usuario son de solo lectura. Las reglas de una hoja construible creada desde JavaScript se pueden editar pero el cambio no sobrevive a que el script vuelva a construirla. Las reglas dentro de un shadow DOM cerrado no son accesibles. Y las at-rules no se pueden crear desde el panel: no puedes añadir una media query nueva, solo editar el contenido de las que existen.
Para todo lo que necesite persistencia o creación de estructuras, la vía son los overrides locales o el workspace, que sí escriben en disco.