Zero-D

Todo mundo começa a usar CSS com um único arquivo que contém todos os estilos.

style.css1D

Logo, torna-se volumoso e um decide agrupar CSS em vários arquivos por elementos de página:

html_elements.cssheader.cssmain-area.cssfooter.css

Alguns podem achar isso pouco conveniente e agrupar estilos por função:

typography.csslayout.csssticky-footer.css (contém declarações para muitos elementos, não somente rodapé)2D

Quando um projeto tem muito CSS, pode ser necessário usar os dois agrupamentos simultaneamente. Estrutura de arquivos CSS torna-se bidimensional:

layout/

grid-system.cssheader.csssidebars.css

look/

typography/main.cssheaders.csslists.cssbackgrounds/html_elements.cssheader.cssmain-area.cssfooter.css

Ok, o exemplo é fabricado, mas você com certeza entende o que quero dizer.

Até este ponto tudo está bem.

Insira a consulta de mídia

É aqui que minha estrutura CSS é alterada.

Além da estrutura 2D descrita acima, eu tenho que estruturar meu código por meio de consultas de mídia:

Alguns dos meus estilos são universais (aplicados em todos os lugares)Alguns são aplicados apenas a determinados tamanhos de tela:pequeno;médio;ampla;extra grande.Alguns são aplicados a determinados grupos de tamanhos de tela:tudo exceto pequenos (estilos não móveis);pequeno e médio (onde as barras laterais não estão nas laterais)large e xlarge (onde você tem sidebars)

Eu tentei superar o problema espalhando os estilos de mídia consultados entre os arquivos CSS existentes. oponto de interrupção A extensão de bússola ajuda muito, mas as folhas de estilo se tornam muito confusas. Encontrar um certo estilo quando não é retratado nos arquivos causa muita dor.

Eu tentei agrupar por consultas de mídia, depois por elementos e função. Mas a estrutura dos arquivos é bidimensional, então você não pode adicionar uma nova dimensão, você só pode adicionar outro nível de hierarquia. Então, não é gracioso. Além disso, é muito volumoso.

Então eu acabo com uma estrutura 2D com consultas de mídia em um eixo e uma mistura feia de elementos e funções no outro eixo.

Eu absolutamente não estou satisfeito com isso, mas eu simplesmente não consigo chegar a uma solução graciosa. Por favor, sugira uma.