8

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?

  • Any WP caching plugins installed? Have you tried using Chrome dev-tools to see which CSS rules are breaking the layout when you remove the import, and determine which file they're in? – nathangiesbrecht Sep 3 '15 at 18:00
  • 1
    good question John but a page asking for the same files to be downloaded again and again especially without proper caching headers attached to each of them is a recipe for disaster. I could guess you have multiple wordpress plugins installed. – Mike Sep 3 '15 at 18:17
  • 1
    "and added the content of the default.css to style.css" - maybe it should be the other way round?! Any media queries attached to the @import? – MrWhite Sep 3 '15 at 18:36
  • can you share the website? – ePetkov Sep 4 '15 at 10:01
3

@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.

  • Thanks. Moving all the rules into one file and using Dev tools to resolve conflicts is exactly what I did, and it worked gloriously. – John Stephens Sep 16 '15 at 18:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.