Wprowadzenie do ITCSS dla programistów internetowych

Jest kilka świetnych metod strukturyzacja kodu CSS, i wszystkie działają na różne sposoby. Najpopularniejszymi są OOCSS i SMACSS, ale jest też mniej znana metoda zwana ITCSS (odwrócony trójkąt CSS) stworzony przez Harry'ego Robertsa.

To nie jest biblioteka ani framework, ale metodologia pisania kodu to skalowalne i łatwe do manipulowania. Korzyści z ITCSS wahają się od prosta organizacja kodu do mniejszych rozmiarów plików i lepszego zrozumienia architektury CSS.

ITCSS nie jest dla wszystkich, ale zapewnia profesjonalny sposób przeglądania arkuszy stylów z jasnością podczas procesu kodowania. Zagłębmy się w koncepcje ITCSS i zobaczmy, jak można je zastosować do projektów internetowych.

Czym jest ITCSS?

Nowoczesne sposoby organizacji CSS często się powracają modularyzacja lub Obiekty CSS konstruować abstrakcyjne pomysły.

Nowa idea CSS Inverted Triangle to warstwowy sposób dzielenia właściwości CSS na podstawie ich poziomu specyficzności i znaczenia. Jest to mniej znana metoda w porównaniu do SMACSS i OOCSS - choć obie mogą być łączone z ITCSS.

Ponieważ ITCSS jest głównie zastrzeżone, nie ma szczegółowej księgi zasad dotyczącej jej użycia. Tylko a zestaw szczegółowych zasad jest do naszej dyspozycji. Autor mówi o nich w filmie poniżej.

Domyślnie ITCSS używa tych samych zasad, co OOCSS, ale z większą separacją w oparciu o specyfikę. Jeśli znasz już OOCSS, potraktuj to jako unikatowe alternatywna architektura CSS próbować.

Oto niektóre z największych zalet korzystania z ITCSS:

• Obiekty stron można podzielić na własne pliki CSS / SCSS możliwość ponownego użycia. Łatwo jest skopiować / wkleić i rozszerzyć każdy obiekt w inne projekty.
• Głębokość specyficzności jest zależy od Ciebie.
• Jest brak ustawionej struktury folderów, i nie wymaga użycia narzędzi przetwarzania wstępnego.
• Możesz połączyć koncepcje z innych metodologii, takich jak moduły CSS, do stwórz swój własny hybrydowy przepływ pracy.

System ITCSS

Przyjrzyjmy się, jak działa model odwróconego trójkąta, korzystając z poniższej ilustracji z posta Lubosa Kmetki.

Kierunkowy przepływ od płaskiego wierzchołka odwróconego trójkąta do końca na dole symbolizuje wzrost specyficzności. To skup się na mniejszej specyficzności ułatwia wielokrotne ponowne użycie klas w witrynie.

Każda podsekcja trójkąta może być traktowana jako oddzielny plik lub grupa plików, chociaż nie musisz pisać kodu w ten sposób. Ma to większy sens dla użytkowników Sass / Less z powodu funkcji importowania. Pomyśl o każdej podsekcji jako metodologii dla dzielenie i organizowanie kodu CSS wielokrotnego użytku.

Rzućmy okiem na każda sekcja odwróconego trójkąta przemieszczanie się od góry w dół do końcówki.

• Ustawienia - Zmienne i metody preprocesora (brak rzeczywistego wyjścia CSS)
• Przybory - Mixiny i funkcje (brak rzeczywistego wyjścia CSS)
• Rodzajowy - Resetowanie CSS, które może obejmować reset Erica Meyera, Normalize.css lub własną partię kodu
• Elementy - Pojedyncze selektory elementów HTML bez klas
• Obiekty - Klasy struktury strony zazwyczaj zgodne z metodologią OOCSS
• składniki - Klasy estetyczne do stylizacji dowolnych i wszystkich elementów strony (często połączone ze strukturą klas obiektów)
• Atuty - Najbardziej specyficzne style do nadpisywania czegokolwiek innego w trójkącie

Każda warstwa odwróconego trójkąta może być dostosowane do Twoich potrzeb. Jeśli więc nie używasz preprocesora CSS, nie będziesz potrzebować warstw Ustawienia lub Narzędzia.

Powinieneś swobodnie interpretować każdą podsekcję, jeśli uznasz to za stosowne. Na przykład Jordan Koschei wyjaśnia, jak połączył strukturę i estetykę w klasy obiektów, pozostawiając bardzo niewiele w sekcji Komponenty.

ITCSS ma brak sztywnych zasad że musisz podążać. Nie ma sprawdzania zgodności z ITCSS i nikt nie będzie na ciebie krzyczeć za nieznaczną zmianę tego modelu.

Chociaż twórca ITCSS, Harry Roberts, był zainteresowany utrzymaniem swoich metod na użytek wewnętrzny, można go znaleźć przykład otwartego oprogramowania ITCSS w tym repozytorium GitHub. Jest obsługiwany przez konto CSS Wizardry, które jest osobistą stroną Harry'ego Robertsa.

BEM + IT = BEMIT Naming

Jednym z najpopularniejszych schematów nazewnictwa CSS jest BEM. Oznacza to modyfikator elementu bloku i ma bardzo szczególną składnię.

Każdy element w BEM opisuje konwencję nazewnictwa dla klas CSS:

• Bloki są klasami dla poszczególnych elementów, które mogą być replikowane i samodzielne.
• Elementy są zawsze częścią bloku
• Modyfikatory zawsze modyfikuj blok lub element, aby nieznacznie zmienić jego wygląd (włącz / wyłącz, aktywny / nieaktywny, stały, statyczny, podświetlony / neutralny).

BEMIT to konwencja nazewnictwa przyjęte przez ITCSS, który pożycza pomysły od BEM podczas wdrażania nowych pomysłów z ITCSS.

Składnia BEM określa bardzo szczegółowe reguły. Poniżej znajduje się próbka ze strony internetowej BEM:

.form  .form - theme-xmas  .form - simple  .form__input  .form__submit  .form__submit - disabled  

Bloki mają nazwy bez separacji lub nazwy oddzielone jednym myślnikiem lub jednym podkreśleniem. Elementy używają dwóch podkreśleń i opisują elementy wewnętrzne zgodne z tym konkretnym blokiem. Modyfikatory działają w ten sam sposób, ale używają dwóch kresek do identyfikacji.

Harry zagłębia się głębiej w BEMIT w tym wpisie na blogu. Jego opis jest bardzo zwięzły i pokazuje, że prawdziwą naturą ITCSS jest graj przyjaźnie z innymi metodologiami CSS.

Harry definiuje przestrzenie nazw dla obiektów pojawia się jako przedrostki dla każdej głównej nazwy klasy. Załamują się jak o- dla obiektów, do- dla komponentów i u- dla narzędzi (takich jak clearfix lub centrowanie tekstu).

Oto przykładowy kod reprezentujący typowe konwencje nazewnictwa BEMIT.

  
… 
 
 

Zaleca także używanie @ przyrostek dla klas opartych na stylach mediów. Więc .o-media klasa może się zmienić na .o-media @ lg dla dużych ekranów i .o-media @ md dla ekranów średniej wielkości.

Osobiście uważam, że dodatkowe przyrostki to zbyt zawiły dla podstawowych projektów internetowych. Myślę, że większość programistów wolałaby używać zwykłych zapytań medialnych i przepisywać klasy w różnych punktach przerwania. Ale nie mogę powiedzieć, że albo metoda jest dobra, albo zła, i każdy może indywidualnie zdecydować, czy chce używać BEMIT, czy nie.

Gorąco polecam przeczytanie tego artykułu wstępnego BEMIT, aby dowiedzieć się więcej o tym, dlaczego ITCSS rozszerzył BEM, i jak możesz nazwać swoje klasy CSS.

ITCSS można podsumować jako metoda organizacyjna do pisania wielokrotnego użytku i skalowalny CSS. BEM to preferowana składnia nazewnictwa i BEMIT rozszerza to do pracy z przestrzeniami nazw dla bardziej specyficznego i rozpoznawalnego kodu.

Jest wiele do nauczenia się, a jeśli jesteś nowy w CSS, będzie to trudna koncepcja do złamania. Ale jeśli chcesz się uczyć, gwarantuję, że będziesz zaskoczony eleganckim charakterem kodu ITCSS.

Zawijanie

Deweloperzy front-end zawsze starają się zoptymalizować przepływ pracy. ITCSS to kolejna metoda, która może przyczynić się do ulepszonej metody strukturyzacji złożonych stron internetowych.

Trudność polega na nauce, jak działa w prawdziwej pracy nad projektem. Jeśli masz chęć i chęć do nauki, ITCSS może być coś wartego dodania do twojego zestawu narzędzi. Mimo że nie znalazłem żadnej oficjalnej dokumentacji, nadal jest wiele zasobów online, aby dowiedzieć się o ITCSS.

• Zarządzaj dużymi projektami internetowymi z nową architekturą CSS ITCSS (creativebloq.com)
• Zarządzanie projektami CSS za pomocą ITCSS - Prezentacje slajdów (speakerdeck.com)
• Projekty CSS z ITCSS (prezentacja wideo 1 godz.)
• ITCSS - ciekawy sposób organizowania dużych projektów (css-tricks.com)

(Zdjęcie na okładce przez speakerdeck.com)