¿Hay alguna buena razón para que dos archivos CSS se importen entre sí?

Estoy trabajando en algunas revisiones de estilo críticas para el sitio de WordPress de un cliente que fue diseñado por otro equipo.

El CSS parece ser un desastre enredado. Una de las particularidades que he encontrado es que de estilo principal del tema style.css, @imports otra hoja de estilo de un subdirectorio: css/default.css. Mientras tanto, default.css@importa la hoja de estilo principal en la parte superior de su archivo también.

Eliminé las directivas @import y agregué el contenido de default.cssto style.css, pero eso rompe el diseño independientemente de si pongo los default.cssestilos en la parte superior o inferior del style.cssarchivo. El bucle @import hace algo a la cascada que de alguna manera hace que el diseño "funcione".

Nunca había visto algo así antes. Parece obvio que debería desenredar las hojas de estilo y secuenciar los selectores en orden creciente de especificidad. Pero, ¿hay alguna razón razonable para crear deliberadamente dos archivos CSS que se importen entre sí? Parece una locura, pero ¿es posible que haya una razón de principios detrás de esto?

Me especializo en desarrollo front-end, no en desarrollo de WordPress. Observo que WordPress analiza la hoja de estilo del tema principal para obtener información del tema. ¿La recurrencia @import es algo útil para WordPress de alguna manera?

css import

— John Stephens
fuente

¿Hay instalados complementos de almacenamiento en caché de WP? ¿Has intentado usar las herramientas de desarrollo de Chrome para ver qué reglas CSS están rompiendo el diseño cuando eliminas la importación y determinar en qué archivo están?

— nathangiesbrecht

Buena pregunta John, pero una página que pide que se descarguen los mismos archivos una y otra vez, especialmente sin los encabezados de caché adecuados adjuntos a cada uno de ellos, es una receta para el desastre. Podría adivinar que tienes varios plugins de WordPress instalados.

— Mike

"y agregó el contenido de default.css a style.css" - ¡¿quizás debería ser al revés ?! ¿Alguna consulta de medios adjunta a la @import?

— MrWhite

puedes compartir el sitio web?

— ePetkov

@import es un gran desastre con respecto al tiempo de carga de la página. Después de hacer las cosas de CSS, su cliente viene con la idea de optimización del tiempo de carga y, a más tardar, la pregunta sobre cómo deshacerse de @import volverá a surgir.

En primer lugar, trataría de reemplazar @import con <link>. Luego intente con las herramientas de desarrollo para determinar qué clases están en conflicto. Después de eso, intente mover las reglas CSS del archivo CSS importado con la adición de! Important.

¿Podría suceder que haya algunos problemas con los parches (relativos) de archivos en un archivo CSS importado ...?

A veces ayuda cargar en el navegador el sitio con CSS importado, por lo que parece que el cliente espera, luego copiar todo el CSS con la ayuda de herramientas de desarrollo, guardarlo en un archivo CSS y reemplazar todos los archivos CSS con este recién creado uno.

La idea global que trataría de lograr es mover todas las reglas CSS al mismo archivo, hacer que funcione y luego mover las reglas CSS para el área de la mitad superior de la página al encabezado del archivo HTML.

— Evgeniy
fuente

Gracias. Mover todas las reglas en un archivo y usar herramientas de desarrollo para resolver conflictos es exactamente lo que hice, y funcionó de manera gloriosa.

— John Stephens