CSS jest bardzo prostym językiem, którego każdy może nauczyć się bardzo szybko i w prosty sposób. Ta prostota, powoduje jednak, że wraz ze wzrostem złożoności projektu – zarządzanie nim staje się coraz trudniejsze, a bałagan który przy okazji powstaje – drastycznie zwiększa czas niezbędny do nawigacji po kodzie.
W tej sytuacji – nawet samo wykorzystanie SASS, który pozwala na łączenie wielu plików w jeden wynikowy – nie pomoże, jeśli nie narzucimy sobie reguł w jaki będzie uporządkowany nasz kod CSS. Dlatego też – chciałbym zaprezentować tutaj dwa podejścia do układu plików CSS, które, z powodzeniem, stosuję dla małych i dużych projektów.
Mały projekt
Mały projekt to przede wszystkim strony nie zawierające żadnych podstron, np strona typu landing page.
_base.scss
_layout.scss
_components.scss
application.scssPlik _base.scss zawiera podstawowe ustawienia projektu. Informacje takie jak reset styli css, zmienne SASS itp.
Plik _layout.scss zawiera style opisujące wygląd szablonu strony.
Plik _components.scss zawiera style opisujące wszystkie komponenty strony, takie jak przyciski, menu, obrazki itp.
Jedynym zadaniem pliku application.scss jest importowanie i połączenie pozostałych plików.
Duży projekt
W przypadku większych projektów – stosuję wzór 7 – 1 który zbudowany jest z 7 katalogów i prezentuje się następująco:
base/
components/
layout/
pages/
themes/
helpers/
vendors/
application.scssZasada podziału jest zbliżona do tego co zostało opisane powyżej, za wyjątkiem tego, że poszczególne pliki znajdują się w katalogach opisujących ich funkcję.
Katalog base zawiera podstawowe ustawienia naszego projektu. Możemy tam umieścić plik ze zmiennymi SASS, reset styli CSS, plik określający podstawową typografię projektu itp.
Katalog components zawiera pliki opisujące wygląd komponentów witryny takich jak – przyciski, menu, galeria itd. Każdy komponent powinien zostać umieszczony w osobnym pliku.
Katalog layouts zawiera opis ogólnego wyglądu aplikacji, np nagłówek czy stopka.
W katalogu pages należy umieścić wszystkie style specyficzne dla danej podstrony witryny.
Jeśli aplikacja korzysta z różnych motywów – style specyficzne dla nich należy umieścić w katalogu themes.
W katalogu helpers natomiast powinny znaleść się wszystkie wspólne, uniwersalne style dla całej strony internetowej.
Jeśli do aplikacji dołączamy style zewnętrzne, innego autorstwa, np. biblioteki – najlepszym miejscem dla nich – jest katalog vendors.
Podobnie jak w poprzednim przypadku – plik application.scss ma służyć jedynie do połączenia i zaimportowania wszystkich pozostałych styli CSS.
Dlaczego należy stosować powyższe schematy?
Stosowanie ich jest uniwersalną metodą na pozbycie się zbytniego bałaganu w kodzie CSS witryny. Od czasu kiedy sam zacząłem stosować to podejście – praca z kodem CSS jest dużo bardziej przyjemna i mniej frustrująca.