Michał Strześniewski
Lead Web Developer
KERRIS Group

CSS Workflow 2.0

Architektura ITCSS

Poznajmy się!

Kto z was pracuje jako Frontend Developer?

Czy ktoś z was programuje również w innym języku?

Czy ktoś z was uczęszcza(ł) na / skończył studia informatyczne?

Czy korzystacie z preprocesorów CSS?

Kto z was słyszał o metodologii BEM

A kto z niej na co dzień korzysta?

Kto widział moją poprzednią prezentację, na żywo lub online?

Plan prelekcji

Przypomnienie najważniejszych informacji

Przestrzenie nazw w BEM

Metodologia ITCSS

Praktyczne wykorzystanie

Przypomnienie najważniejszych informacji

Wykorzystujmy preprocesory i pełnie ich możliwości

  • Zmienne,
  • Zagnieżdzenia,
  • Importy,
  • Obliczenia,
  • Mixiny,
  • Funkcje,
  • Listy,
  • i Pętle.

Korzystajmy z metodologii tworzenia arkuszy stylów

  • BEM,
  • SMACCS,
  • OOCSS,
  • itp.

Przestrzegajmy zasad tworzenia dobrego kodu

  • DRY (Nie powtarzaj się),
  • Jedno żródło prawdy,
  • SOLID:
    • Zasada jednej odpowiedzialności,
    • Zasada otwarte-zamknięte,
    • Zasada podstawienia Liskov,
    • Zasada segregacji interfejsów,
    • Zasada odwrócenia zależności,
  • Separacja zagadnień.

Przestrzenie nazw w BEM

Co to jest BEM?

.block__element--modifier

Przykład kodu z wykorzystaniem BEM





    


.button{
    ...
    color: black;
    background: white;
    padding:1em;
}
.button--success{
    background: green;
    color: white;
}
.button--big{
    padding:2em;
}
    

Przestrzenie nazw

Możemy wyróżnić 9 kategorii klas css używanych w naszych projektach:

  • Obiekty (Objects),
  • Komponenty (Components),
  • Klasy pomocnicze (Utility),
  • Klasy motywu (Theme),
  • Klasy zasięgu (Scope),
  • Klasy stanu,
  • Klasy JavaScriptu,
  • Klasy testerów (Quality Assurance),
  • Fixy.

Przestrzenie nazw - Obiekty (Objects)

Obiekty są to bloki ogólne, wielokrotnego użytku o małej specyficzności

Zawierają jedynie kluczowy kod CSS który może zostać wykorzystany przez wiele innych bloków

Przestrzenią nazw dla tej klasy jest "o"

Przestrzenie nazw - Obiekty (Objects)


    .o-layout{}
    .o-layout__elem{}
    .o-list{}
    .o-list__elem{}
    .o-heading{}
    .o-heading--secondary{}
    

Przestrzenie nazw - Komponenty (Components)

Komponenty są to klasy o wysoce sprecyzowanym nazywnictwie

Komponenty to bloki reużywalne lecz w odróznieniu od obiektów są one nakierowane na wykonywanie jedynie swojego przeznaczenia

Przestrzenią nazw dla tej klasy jest "c"

Przestrzenie nazw - Komponenty (Components)


    .c-header{}
    .c-article{}
    .c-menu{}
    .c-prizes()
    .c-footer{}
    

Przestrzenie nazw - Klasy pomocnicze (Utility)

Klasy pomocniczne to klasy o wysokiej specyficzności.

Z ich pomocą możemy dostosować konkretne cechy komponentów w jednoznaczny sposób

Przestrzenią nazw dla tej klasy jest "u"

Przestrzenie nazw - Klasy pomocnicze (Utility)


    .u-align-right{}
    .u-text-upper{}
    .u-text-lower{}
    .u-text-grayscale{}
    .u-hidden{
        display:none!important;
    }
    .u-col-1-2{}
    

Przestrzenie nazw - Klasy motywu (Theme)

Klasy motywu to klasy które determinuja pewne globalne cechy naszego interfejsu

Dzięki tym klasom możemy sterować naszym interfejsem w zależności od aktualnej potrzeby

Przestrzenią nazw dla tej klasy jest "t"

Przestrzenie nazw - Klasy motywu (Theme)


    .t-light{}
    .t-dark{}
    .t-dark .o-layout{
        background: #000;
    }
    

Przestrzenie nazw - Klasy zasięgu (Scope)

Klasy zasięgu oznaczają strefy w których obowiązują najczęściej inne reguły niż w pozostałym interfejsie

Klasy te podobnie jak klasy motywów zmieniają zachowanie elementów wewnątrz danego selektora

Przestrzenią nazw dla tej klasy jest "s"

Przestrzenie nazw - Klasy zasięgu (Scope)


    .s-wysiwyg-content{
        h1{
            font-size:24px;
        }
        h2{
            font-size:20px;
        }
    }
    

Przestrzenie nazw - Klasy stanu

Klasy stanu przekazują informacje o cechach danego obiektu czy komponentu

Zazwyczaj nadawane są poprzez akcje JavaScriptowe

Przestrzenią nazw dla tej klasy jest "is" a także "has"

Przestrzenie nazw - Klasy stanu


    .is-active{}
    .is-hidden{}
    .is-updating()
    .has-children{}

    .c-modal{
        &.is-open{
            display:block;
        }
    }
    

Przestrzenie nazw - Klasy JavaScriptu

Klasy JavaScriptu są to klasy wykorzystywane jako punkt zaczepienia przy tworzeniu funkcjonalności z pomocą skryptów

Nie niosą za sobą żadnych dodatkowych styli

Przestrzenią nazw dla tej klasy jest "js"

Przestrzenie nazw - Klasy JavaScriptu


    .js-tabs
    .js-modal
    .js-send-message
    

Przestrzenie nazw - Klasy testerów (Quality Assurance)

Klasy testerów są to klasy wykorzystywane jako punkt zaczepienia dla funkcjonalności

Nie niosą za sobą żadnych dodatkowych styli

Przestrzenią nazw dla tej klasy jest "qa"

Przestrzenie nazw - Klasy testerów (Quality Assurance)


    .qa-process-success
    .qa-error-login
    

Przestrzenie nazw - Fixy

Klasy które dodajemy aby na szybko naprawić pewną funkcjonalność

Taki kod powinien być jak najszybciej zmieniony poprzez wykorzystanie klas z innych kategorii

Przestrzenią nazw dla tej klasy jest "_"

Przestrzenie nazw - Fixy


    ._c-header{
        height:20px;
        position:absolute;
        top:137px;
    }
    

Zalety wykorzystywania przestrzeni nazw

  • Jasna i sprecyzowane przeznaczenie klas danej kategorii ułatwia wprowadzenie nowych osób do projektu.
  • Przy pomocy rozszerzeń typu IntelliSense pogrupowane nazwy klas pozwalają nam na szybsze i czytelniejsze odnajdowanie potrzebnych nazw
  • Dzięki takiej kategoryzacji tworzymy tzw. "strict mode" dla CSS. Pozwala to nam na automatyzacje pilnowania standardów.
  • Praca z wykorzystaniem tej metodologii automatycznie tworzy nam dokumentację projektu.

Metodologia ITCSS

Co to jest ITCSS?

Inverted Triangle CSS

Co to jest ITCSS?

  • Architektura kodu oparta o strukturą odwróconego trójkąta,
  • Skalowana, zrozumiała i łatwa do zarządzania
  • Jest to metodologia, sposób myślenia na temat tworzenia kodu.
  • Fundament pod budowę frameworków.
  • Bardzo prosty do wdrożenia i nauki system.

Problemy z CSSem przy tworzeniu dużych projektów.

  • Kaskadowość i zależność selektorów od siebie.
  • Brak wymogów pisania kodu
  • Zależność od kolejności pisania kodu
  • Specyficzność

Problemy z CSSem, które sami tworzymy.

  • Brak dokumentacji
  • Brak strukturyzacji
  • Brak znajomości projektu do którego wchodzimy
  • Brak sprawdzania czy coś co piszemy już w kodzie istnieje
  • Dodawanie kodu na koniec arkusza

Sposoby strukturyzacji kodu CSS

  • Odtwarzanie struktury strony,
  • Kategoryzacja zagadnień (typografia, przyciski, etc.)
  • Wszystko na koniec arkusza.

Standardy ITCSS

  • Pisanie kodu w kolejności od najmniej do najbardziej specyficznych elementów
  • Pisanie kodu w kolejności od najwiekszego do najmniejszego zasięgu
  • Pisanie kodu w kolejności od najbardziej ogólnych zagadnień do zagadnień jak najbardziej sprecyzowanych

Podstawowe warstwy ITCSS

  • Settings
  • Tools
  • Generic
  • Elements
  • Object
  • Components
  • Utilities

Ustawienia (Settings)

  • W tym miejscu przechowujemy m.in wszystkie zmienne których używamy w cały projekcie.
  • Ta warstwa ma najszerszy zakres dzialania ponieważ ze zmiennych korzystamy na kazdym jego etapie.

Narzędzia (Tools)

  • W tej warstwie przchowujemy wszystkie mixiny i funkcje których używamy w projekcie.
  • Ta warstwa również ma szeroki zakres ale mniejszy niż ustawienia ponieważ do ich poprawnego działania potrzebujmy zmiennych

Style ogólne (Generic)

  • Jest to pierwsza warstwa która generuje kod CSS
  • Znajdują się w niej style normalizujące takie jak "Reset.css" czy "Normalize.css"
  • Jest to także idealne miejsce na style dla "*" stąd najszerszy zakres działania

Style bazowe (Elements)

  • W tej warstwie wprowadzamy style dla elementów HTML
  • Jest to pierwsza warstwa w której nadajemy już nasze dedykowane style
  • Definiujemy w niej jak ma wyglądać elementy kodu HTML bez klas CSS

Style obiektów (Objects)

  • W tej warstwie wprowadzamy pierwsze klasy
  • Mają to być jak najbardziej ogólne klasy dla obiektów.
  • Obiekty powinny być reużywalne w całej witrynie i uzywane do wielu komponentów

Style komponentów (Components)

  • To jest najbardziej obszerna warstwa.
  • To tu tworzymy sprecyzwane style dla wszystkich komponentów w naszej witrynie
  • Komponenty mogą być reużywalne w całej witrynie ale wypełniają swoje sprecyzowane zadanie

Style pomocnicze (Utillities)

  • To jest najbardziej specyficzna warstwa.
  • Klasy stworzone w tej warstwie mają wykonywać dokładnie jedno sprecyzowane zadanie
  • Jest to idealne miejsce na używanie !important

Podstawowe warstwy ITCSS

  • Settings
  • Tools
  • Generic
  • Elements
  • Objects
  • Components
  • Utilities

Jak radzić sobie w takim razie z RWD

Jak radzić sobie w takim razie z RWD


    

Test2



.u-padding {
  padding: 5px;
}

@media screen and (min-width: 320px) {
  .u-padding\@sm {
    padding: 5px;
  }
}
@media screen and (min-width: 720px) {
  .u-padding\@md {
    padding: 5px;
  }
}
...
    

Praktyczne wykorzystanie

INUIT.CSS vs Bootstrap

  • Inuit.css to czysty framework bazowy skupiający się na strukturze kodu i narzędziach do tworzenia layoutów a nie na jego wyglądzie
  • Inuit.css to starter pod wszystkie duże projekty
  • Bootstrap to narzędzie dające duże możliwości i szybki start w projektach w których nie mamy projektu graficznego
  • Inuit to Framework CSS, Bootstrap to biblioteka gotowych elementów interfejsu.

Bibliografia

More Transparent UI Code with Namespaces

https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

Harry Roberts - Managing CSS Projects with ITCSS

https://csswizardry.net/talks/2014/11/itcss-dafed.pdf

https://www.youtube.com/watch?v=1OKZOV-iLj4

Inuit CSS

https://github.com/inuitcss/inuitcss

CSS Workflow 2.0

Architektura ITCSS