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

@import is a big mess regarding the page's loading time. After you get CSS things done, your client comes with the loadtime optimization idea and at the latest there the question about getting rid of @import will rise again.

Firstly i would try to replace @import with < link>. Then try with dev-tools to pin down, which classes are in conflict. After that try to move CSS rules from imported CSS file with addition of !important.

It could happen, that there are some problems with (relative) pathes of files in imported CSS file...?

Sometimes it helps to load in browser the site with @imported CSS, so it looks like the client expects, then to copy the whole CSS with help of dev-tools, save it into one CSS file and replace all CSS files with this newly created one.

The global idea i would try to accomplish, is to move all CSS rules into the same file, get it to work, then move the CSS rules for above-the-fold area to the HTML file's head.