Is there any good reason for two CSS files to @import each other?

Question

I'm working on some critical style revisions for a client's WordPress site that was designed by another team.

The CSS seems to be a tangled mess. One of the idiosyncrasies I've found is that the theme's main stylesheet style.css, @imports another stylesheet from a subdirectory: css/default.css. Meanwhile, default.css @imports the main stylesheet at the top of its file too.

I removed the @import directives and added the content of the default.css to style.css, but that breaks the layout regardless of whether I put the default.css styles at the top or bottom of the style.css file. The @import loop does something to the cascade that somehow makes the layout "work".

I have never seen anything like this before. It seems obvious that I should untangle the stylesheets and sequence the selectors in order of increasing specificity. But is there any reasonable rationale for deliberately creating two CSS files that @import each other? It seems nuts, but is it possible there's a principled reason behind this?

I specialize in front-end development, not WordPress development. I note that WordPress parses the main theme stylesheet for theme information. Is the @import recursion something that's useful to WordPress in any way?

Answer 1

One of the hard requirements of WordPress theme is presence of style.css file with a header.

It doesn't go beyond file being present or even used at all, it can be otherwise empty.

The CSS itself has no requirements on WP side and falls under generic web development.