CSS en nueva versión de controles

[Kiquenet]

Contexto: asp net webforms 4.8.1, WAP , y usando controles component One C1 2010v1

Se migra la app a versión controles C1 2025v2.
Los estilos de los controles cambian.

 En la versión anterior aparecian estilos en CustomStyles, parece Themes, y en Resources.axd

Veo que se incluyen en varios WebResources.axd , unos 6, en la nueva versión.

Recomendaciones para hacer el cambio o migración de estilos css para la nueva versión de controles?  

[Kiquenet]

Opción 1 (recomendada): Repartir la migración en dos capas

La idea es mapear visualmente estilos, no intentar reutilizar los selectores antiguos.

Opción 2: Inventario y mapeo

Antes de tocar CSS, genera una matriz:  Control 2010     Control 2025    CSS antiguo
Después: Analizar el HTML renderizado antiguo

Opción 3: Automatizar parte del trabajo

Si tienes cientos de páginas  puedes:
Extraer clases CSS antiguas
Extraer clases generadas por el nuevo framework
Construir una tabla de mapeo

Lo importante es identificar:

• JS antiguos eliminados.
• CSS embebidos nuevos.
• Dependencias Wijmo.
• Recursos Theme modernos.

Si algunos estilos antiguos "desaparecen", normalmente es porque los nuevos CSS tienen más especificidad:

En un proyecto corporativo WebForms grande

La aproximación que he visto funcionar mejor es:

Fase 1

Migrar controles y dejar el tema estándar 2025.

Fase 2

Capturar visualmente las pantallas antiguas:

• Playwright
• Selenium
• Screenshot automation

Fase 3

Crear un legacy-look.css y aplicarlo progresivamente a los controles nuevos.

Fase 4

Eliminar CSS obsoleto.

Para una migración C1 ASP.NET WebForms 2010v1 → MESCIUS/ComponentOne 2025v2 en una aplicación WebForms WAP (.NET Framework 4.8.1) con cientos de controles, mi recomendación es no migrar CSS manualmente control por control. Es mejor montar un proceso semiautomatizado de análisis, mapeo y validación visual.

1. Entender de dónde vienen realmente los estilos

En C1 2010v1 normalmente los estilos procedían de varias fuentes:

• App_Themes/*
• CustomStyles.css
• CSS incluidos por controles C1
• Recursos embebidos servidos mediante:
  • WebResource.axd
  • ScriptResource.axd

En las versiones modernas:

• Muchos controles generan HTML completamente distinto.
• Muchos estilos vienen embebidos en recursos registrados automáticamente.
• Aparecen múltiples WebResource.axd porque cada ensamblado registra sus propios recursos.
• Han cambiado los nombres de clases CSS.

Por tanto el problema no es migrar los .css, sino migrar la semántica visual.

---

2. Inventariar automáticamente los estilos antiguos

Lo primero es extraer todas las clases CSS utilizadas actualmente.

Extraer clases definidas

Extraer clases utilizadas en ASPX

3. Capturar el HTML renderizado antiguo

Es probablemente el paso más importante.

Página antigua

Guardar el HTML generado: 

o usando F12 → Save as HTML.

Luego hacer lo mismo con la versión 2025.

4. Construir una matriz de mapeo CSS

Crea un documento vivo:

Antiguo
Nuevo
.C1Grid
.wj-flexgrid
.Header
.wj-header
.SelectedRow
.wj-state-selected
.Focused
.wj-state-focused

Después crear reglas adaptadoras.

5. Automatizar comparación visual

Opción Playwright

 Captura todas las páginas de la versión antigua:

Después hacer lo mismo en la aplicación migrada.