ITCSS: separacja warstw (base, layout, components)

ITCSS: separacja warstw (base, layout, components)

ITCSS (Inverted Triangle CSS) to metodologia organizowania kodu CSS, zaproponowana przez Harry’ego Robertsa. Jej celem jest stworzenie struktury stylów, która będzie skalowalna, odporna na konflikty, łatwa do rozwoju i logicznie uporządkowana. Jak sugeruje nazwa, struktura przypomina odwrócony trójkąt – od stylów najbardziej ogólnych do najbardziej szczegółowych.

Dlaczego ITCSS?

W wielu projektach, szczególnie większych, pliki CSS stają się trudne do zarządzania. Style się nadpisują, konflikty między klasami narastają, a każda zmiana jednego komponentu może przypadkowo zepsuć coś innego. ITCSS rozwiązuje te problemy poprzez rozdzielenie stylów na warstwy według ich specyfiki i zasięgu działania.

Struktura warstw w ITCSS

ITCSS dzieli kod CSS na logiczne sekcje, zorganizowane w określonej kolejności:

1. Settings – zmienne, konfiguracja (np. kolory, spacingi)
2. Tools – mixiny, funkcje, helpers (np. z preprocesora Sass)
3. Generic – reset, normalize, style ogólne (np. box-sizing)
4. Elements – style dla znaczników HTML bez klas (np. body, h1, a)
5. Objects – układy, klasy pomocnicze (np. layouty flex, kontenery)
6. Components – style konkretnych komponentów UI (np. karty, przyciski)
7. Trumps – klasy narzędziowe i nadpisujące (np. .hidden, .mt-0)

Dzięki tej strukturze:

• zmienne i funkcje są zawsze dostępne „od góry”,
• style bazowe nie są przypadkowo nadpisywane,
• komponenty są izolowane, ale mogą korzystać z konfiguracji z wyższych warstw,
• styl nadpisujący zawsze znajduje się na końcu (czytelność priorytetów).

Przykład struktury plików w projekcie ITCSS

/scss/
├── settings/
│   ├── _colors.scss
│   ├── _spacings.scss
│   └── _typography.scss
├── tools/
│   ├── _mixins.scss
│   └── _functions.scss
├── generic/
│   ├── _reset.scss
│   └── _box-sizing.scss
├── elements/
│   └── _base.scss         ← stylowanie elementów typu h1, p, a, ul
├── objects/
│   ├── _container.scss
│   └── _grid.scss
├── components/
│   ├── _button.scss
│   ├── _card.scss
│   └── _modal.scss
├── trumps/
│   └── _utilities.scss    ← .text-center, .hidden, .mt-1, .mb-0 itd.
└── main.scss              ← import wszystkich warstw w kolejności

Plik main.scss importuje wszystkie części projektu w ściśle określonej kolejności – od ogólnych do szczegółowych:

@import "settings/colors";
@import "settings/spacings";
@import "tools/mixins";
@import "generic/reset";
@import "elements/base";
@import "objects/grid";
@import "components/button";
@import "components/card";
@import "trumps/utilities";

Jak ITCSS współpracuje z BEM?

ITCSS mówi o strukturze plików i organizacji kodu, a BEM – o tym, jak nazwać klasy w tych plikach. To podejścia, które doskonale się uzupełniają. Przykładowo, w folderze components/ możesz mieć plik _card.scss z klasami takimi jak .card, .card__title, .card--highlighted.

Dobre praktyki przy pracy z ITCSS

• Nie pomijaj żadnej warstwy – nawet jeśli wydaje się „zbędna” w małym projekcie
• Trzymaj się kolejności – import zawsze od settings do trumps
• Każdy plik powinien odpowiadać za jeden konkretny fragment stylów
• Nie mieszaj stylów ogólnych i szczegółowych w jednym pliku
• Nie nadpisuj stylów komponentów w warstwie trumps – używaj jej tylko awaryjnie

Wniosek

ITCSS to podejście, które rozwiązuje problemy „rosnących” projektów. Jasno określona kolejność warstw, logiczny podział stylów i separacja odpowiedzialności sprawiają, że CSS staje się narzędziem skalowalnym, a nie zbiorem nieprzewidywalnych reguł. To jedno z najważniejszych podejść, które warto znać, jeśli planujesz pracować z większymi projektami frontendowymi.