Existe alguma boa razão para dois arquivos CSS se importarem?

8

Estou trabalhando em algumas revisões críticas de estilo para o site WordPress de um cliente que foram projetadas por outra equipe.

O CSS parece ser uma bagunça emaranhada. Uma das idiossincrasias que eu encontrei é que estilo principal do tema style.css, @imports outro estilo de um subdiretório: css/default.css. Enquanto isso, o default.css@imports também a folha de estilo principal na parte superior do arquivo.

Eu removi as diretivas @import e adicionei o conteúdo de default.cssto style.css, mas isso quebra o layout, independentemente de eu colocar os default.cssestilos na parte superior ou inferior do style.cssarquivo. O loop @import faz alguma coisa na cascata que de alguma forma faz o layout "funcionar".

Eu nunca vi nada assim antes. Parece óbvio que eu deveria desembaraçar as folhas de estilo e sequenciar os seletores para aumentar a especificidade. Mas existe alguma lógica razoável para criar deliberadamente dois arquivos CSS que se importam? Parece loucura, mas é possível que haja uma razão de princípios por trás disso?

Sou especializado em desenvolvimento front-end, não em WordPress. Observo que o WordPress analisa a folha de estilo do tema principal para obter informações sobre o tema. A recursão @import é algo útil para o WordPress de alguma forma?

css import John Stephens
fonte
Algum plug-in de cache do WP instalado? Você tentou usar as ferramentas de desenvolvimento do Chrome para ver quais regras de CSS estão quebrando o layout quando você remove a importação e determinar em qual arquivo elas estão?
Nathangiesbrecht
11
boa pergunta John, mas uma página solicitando o download dos mesmos arquivos repetidas vezes, especialmente sem os cabeçalhos de cache adequados anexados a cada um deles, é uma receita para o desastre. Eu acho que você tem vários plugins wordpress instalados.
Mike
11
"e adicionou o conteúdo do default.css ao style.css" - talvez deva ser o contrário ?! Alguma consulta de mídia anexada ao @import?
MrWhite
você pode compartilhar o site?
ePetkov

Respostas:

3

@import é uma grande bagunça em relação ao tempo de carregamento da página. Depois de concluir as tarefas de CSS, seu cliente vem com a idéia de otimização do tempo de carregamento e, o mais tardar, a pergunta sobre como se livrar do @import aumentará novamente.

Em primeiro lugar, eu tentaria substituir @import por <link>. Em seguida, tente com o dev-tools para determinar quais classes estão em conflito. Depois disso, tente mover as regras CSS do arquivo CSS importado com a adição de! Important.

Pode acontecer que haja alguns problemas com os caminhos (relativos) dos arquivos no arquivo CSS importado ...?

Às vezes, ajuda a carregar no navegador o site com CSS @imported, para que pareça que o cliente espera, copie todo o CSS com a ajuda das ferramentas de desenvolvimento, salve-o em um arquivo CSS e substitua todos os arquivos CSS por este recém-criado 1.

A idéia global que eu tentaria realizar é mover todas as regras CSS para o mesmo arquivo, fazê-las funcionar e, em seguida, mover as regras CSS da área acima da dobra para a cabeça do arquivo HTML.

Evgeniy
fonte
Obrigado. Mover todas as regras para um arquivo e usar as ferramentas de desenvolvimento para resolver conflitos é exatamente o que eu fiz e funcionou gloriosamente.
John Stephens