Zero-D

Każdy zaczyna używać CSS z pojedynczym plikiem, który zawiera wszystkie style.

style.css1D

Wkrótce staje się nieporęczny i decyduje się pogrupować CSS w wielu plikach według elementów strony:

html_elements.cssheader.cssmain-area.cssfooter.css

Niektórzy mogą uznać to za mało wygodne i grupować style według funkcji:

typography.csslayout.csssticky-footer.css (zawiera deklaracje wielu elementów, nie tylko stopek)2D

Gdy projekt ma dużo CSS, może wymagać jednoczesnego użycia obu grup. Struktura plików CSS staje się dwuwymiarowa:

layout/

grid-system.cssheader.csssidebars.css

look/

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

Dobra, przykład jest sfabrykowany, ale na pewno rozumiesz, co mam na myśli.

Do tego momentu wszystko jest w porządku.

Wpisz Media Query

W tym miejscu pojawia się moja struktura CSS.

Oprócz opisanej powyżej struktury 2D, muszę uporządkować mój kod za pomocą zapytań o media:

Niektóre z moich stylów są uniwersalne (stosowane wszędzie)Niektóre są stosowane tylko do określonego rozmiaru ekranu:mały;średni;duży;bardzo duży.Niektóre są stosowane do pewnych grup rozmiarów ekranu:wszystko z wyjątkiem małych (nie-mobilnych stylów);małe i średnie (gdzie paski boczne nie są po bokach)duży i xlarge (gdzie masz paski boczne)

Próbowałem przezwyciężyć ten problem, rozpraszając style zapytań o media wśród istniejących plików CSS. Thepunkt przerwania Rozszerzenie Compass bardzo pomaga, ale arkusze stylów stają się zbyt chaotyczne. Znalezienie określonego stylu, gdy nie jest on przedstawiany w strukturach plików, jest bardzo trudne.

Próbowałem grupować według zapytań o media, a następnie według elementów i funkcji. Ale struktura plików jest dwuwymiarowa, więc nie możesz dodać nowego wymiaru, możesz tylko dodać kolejny poziom hierarchii. Nie jest więc wdzięczny. Jest też bardzo masywny.

Tak więc kończę na strukturze 2D z zapytaniami mediów na jednej osi i brzydką mieszanką elementów i funkcji na drugiej osi.

Jestem absolutnie niezadowolony z tego, ale po prostu nie wymyślam wdzięcznego rozwiązania. Proszę zaproponować jeden.