ITCSS – maintainable CSS

Tworząc strony internetowe, musiałem w którymś momencie powrócić do funkcji, którą napisałem ponad rok wcześniej. Z reguły powroty do kodu pisanego tak dawno temu były męczące – ja sprzed roku, który pisał tamten blok kodu to już zupełnie inna osoba, nie pamiętałem już, jakie były moje założenia, jak ten kod napisałem.

Jak wielką ulgą dla mnie był fakt, że przed funkcją znajdował się komentarz. Zajmował on mniej więcej połowę długości samej funkcji, ale krok po kroku wyjaśniał, jak działa ta funkcja. Ten jeden komentarz sprawił, że byłem w stanie nanieść poprawki w przeciągu kilku minut i oszczędziłem naprawdę dużo czasu, który spędziłbym na debugowaniu funkcji.

Na wstępie jeszcze dodam, że wpisy są zapisem mojej nauki, mogą pojawiać się w nich jakieś pytania, na które szukam odpowiedzi, niekiedy artykuł jest jedynie wprowadzeniem do odnośników, które w pełniejszy sposób omawiają dane zagadnienie. Te notatki mają przede wszystkim pomagać mi, kiedy będę wracał do danego tematu. A jeśli pomogą i Tobie – tym bardziej będę się cieszył.

CSS do utrzymania

W tym wpisie zbadam ITCSS, czyli metodę pisania kodu CSS stworzoną przez Harry’ego Roberts’a, który jest niezależnym doradcą i deweloperem (csswizardry.com).

Klasycznie pisany CSS rozrasta się w bardzo szybkim tempie, dodatkowo znajdywanie odpowiednich klas w jednym pliku jest zupełnie nieefektywne. ITCSS próbuje wprowadzić strukturę i metody organizowania CSS w taki sposób, by był on łatwy do utrzymania i rozwijania.

ITCSS

ITCSS można przetłumaczyć jako CSS odwróconego trójkąta.

ITCSS jest tworzony według zasad:

1. Od ogółu do szczegółu.
   Staramy się wykorzystywać wbudowane w język CSS narzędzia (np. dziedziczenie), by ograniczyć ilość kodu, jaką musimy napisać.
2. Od dużego zasięgu do lokalnego.
   Selektory używane na wysokim poziomie trójkąta mają obejmują wiele elementów drzewa DOM, natomiast te znajdujące się niżej są dużo bardziej ograniczone, np. dotyczą tylko jednej wartości komponentu.
3. Od niskiej do wysokiej specyficzności.
   Dzięki temu unikamy konieczności częstego używania !important. Selektory na wyższych poziomach mogą być nadpisywane przez te o wyższej specyficzności i mniejszym zasięgu.

Poziomy ITCSS

• Settings
  • Zmienne preprocesora, np. kolory, wielkość czcionek, ustawienia rozmiarów (no output – zbudowanie jedynie tych plików nie wygenerowałby żadnego CSS).
• Tools
  • Mixiny i funkcje, które muszą być dostępne globalnie (również no output)
• Generic
  • Pierwszy poziom, który tworzy CSS użyteczny w produkcji
  • Np. reset CSS
• Elements
  • Style dla podstawowych elementów HTML, np. button, które będą wspólne dla wszystkich przedstawicieli tego elementu
• Objects
  • selektory oparte o klasy, definiują strukturę strony lub komponentu, tak jak w OOCSS (fajny przykład oddzielenia struktury od stylu w Smashing Magazine)
• Components
  • ta sekcja to definicja styli poszczególnych komponentów UI (Komponenty najczęściej składają się z klas obiektów i komponentów)
• Utilities
  • pomocnicze klasy, które pozwalają nadpisać w szczególnych przypadkach wszelkie właściwości przypisane na wyższych poziomach odwróconego trójkąta.

Linki

• Więcej o ITCSS (freeCodeCamp)
• Opis ITCSS (xfive.co)