Elysia Tools
Navegación
Workflow Playbook
Crea y revisa CSS con formato, diagnóstico de selectores, fragmentos responsivos, efectos visuales y comprobaciones renderizadas.
Temas
Crea y revisa CSS con formato, diagnóstico de selectores, fragmentos responsivos, efectos visuales y comprobaciones renderizadas.
Esta guía convierte el alcance indicado en un resultado revisable. Conserve la fuente, los resultados intermedios y las decisiones para que la siguiente persona entienda qué se comprobó y por qué.
Conserva una copia legible del código y determina los navegadores de destino.
Enumera los componentes, puntos de ruptura y estados que el cambio debe admitir.
Captura un render de referencia antes de cambiar selectores o valores visuales.
Decisión: Which layout model fits?. Elige grid, masonry u otra estructura explícita a partir del flujo del contenido y las restricciones responsivas.
Decisión: ¿La cascada es intencionada?. Extrae los selectores y compara la especificidad antes de añadir un parche o aumentar la anidación.
Decisión: Which visual effect is needed?. Usa filtros, degradados, tipografía o easing solo cuando sirvan a un estado del componente.
Embellece la copia de trabajo para revisarla línea a línea. Usar css-beautifier.
Extrae selectores, calcula la especificidad y prefiere el orden, el ámbito o un token antes que !important. Usar css-selector-extractor, css-selector-specificity-calculator.
Genera valores de masonry y clamp fluidos y prueba columnas, huecos, longitudes de línea y tipografía. Usar css-masonry-layout-generator, css-fluid-typography-clamp-calc.
Crea valores de filtro, color, texto con degradado y easing para estados con nombre; comprueba contraste, alternativas y movimiento reducido. Usar css-filter-generator, css-target-color-filter-generator, css-gradient-text, css-easing-visualizer.
Minifica solo una copia revisada, compara las reglas analizadas con la fuente e inspecciona estados representativos. Usar css-minifier.
Guía de flujo de trabajo
Embellece la copia de trabajo para revisarla línea a línea.
Extrae selectores, calcula la especificidad y prefiere el orden, el ámbito o un token antes que !important.
Genera valores de masonry y clamp fluidos y prueba columnas, huecos, longitudes de línea y tipografía.
Crea valores de filtro, color, texto con degradado y easing para estados con nombre; comprueba contraste, alternativas y movimiento reducido.
Elige grid, masonry u otra estructura explícita a partir del flujo del contenido y las restricciones responsivas.
Extrae los selectores y compara la especificidad antes de añadir un parche o aumentar la anidación.
Usa filtros, degradados, tipografía o easing solo cuando sirvan a un estado del componente.
Minifica solo una copia revisada, compara las reglas analizadas con la fuente e inspecciona estados representativos.