Marta Sztybor - Zorientowany obiektowo CSS, czyli jak tworzyć layouty aplikacji i nie zwariować

Zorientowany obiektowo CSS
czyli jak tworzyć layouty aplikacji i nie zwariować
Marta Sztybor
@sztyborek
martasztybor.pl

O czym będzie ta prezentacja?
• Do czego właściwie służy CSS i jak działa?
• O co chodzi z tym programowaniem obiektowym?
• Czy w CSS można pisać kod „zorientowany obiektowo”? I
dlaczego jest to nieintuicyjne?
• Jak podejść do projektowania layoutów, aby ułatwić programiście
pracę przy budowaniu strony?
• Jakie są podejścia i metodyki pisania „obiektowego” kodu CSS?
sztyborek martasztybor.pl

W jakim celu powstał CSS?
• Strona internetowa napisana w języku HTML to tak naprawdę
dokument
• Za pomocą CSS możemy stylować elementy zwykle występujące w
dokumentach oraz formularzach
• CSS ma globalną naturę
• Czy to podejście sprawdza się w przypadku aplikacji i dużych
portali internetowych?

Cechy CSS
• Dziedziczenie – elementy podrzędne w HTML uzyskują cechy
rodzica
• Kaskadowość
• Specyficzność – zestaw reguł, który ustala, jakie właściwości ma
uzyskać dany element, jeśli kilka selektorów pasuje do danego
elementu w dokumencie

Przykładowy element
HTML CSS
<li id="doge">
<img src="img/dog1.jpg">
<div class="doge-info">
<h2 class="doge-name">
<a href="/doge">Pieseł</a>
</h2>
<ul class="doge-details">
<li>Samiec</li>
<li>8 lat</li>
</ul>
</div>
<footer class="footer">
<ul class="counter">
<li>93
<span class="icon"></span>
</li>
<li>5
</li>
</ul>
</footer>
</li>
#doge {
font-size: 16px;
background-color: white;
border: 1px solid #ececec;
}
#doge img {
border-radius: 3px;
}
div.doge-info h2 {
color: #333333;
}
#doge footer .counter {
font-size: 11px;
}
.icon {
color: #EF88A8;
}

Nie róbcie tego w domu!
• Użycie takiego kodu będzie kłopotliwe, jeśli dany komponent jest
używany w wielu miejscach aplikacji (brak elastyczności)
• Zbyt duża specyficzność selektorów (kod spaghetti, łatwo
doprowadzić do rozrostu nadpisujących klas)
• Relacja 1:1 selektorów i struktury HTML
• Warto spojrzeć na layout „z lotu ptaka”
• A może pomocne okażą się paradygmaty znane z języków
programowania?

Programowanie obiektowe
• Żyjemy w świecie obiektów – wszystko, co nas otacza to „obiekty”
• W programowaniu obiektowym klasa to abstrakcja. Służy do opisu
cech i zachowania modelowanego rodzaju obiektów
• Definiujemy modele danych jako klasy obiektów

Komponenty aplikacji jako obiekty

Komponenty aplikacji jako obiekty
• Projektując aplikację, aby zachować wizualną spójność tworzymy
powtarzalne wzorce (visual patterns)
• Komponent posiada ściśle zdefiniowane cechy, na które nie ma wpływu jego
umiejscowienie w aplikacji (enkapsulacja)
• Komponent może się składać z innych komponentów (kompozycja)
• W ten sposób możemy budować layout jak z cegiełek albo klocków
• Zaczynamy od najdrobniejszych powtarzających się elementów (np.
przyciski, pola tekstowe), poprzez bardziej złożone (np. menu, komentarze)
kończąc na całych layoutach

CSS z klasą
• Naszą najpotężniejszą bronią przeciwko bałaganowi w kodzie są selektory
klas
• Klasa wskazuje na rodzaj komponentu (programowanie obiektowe)
• Odseparowujemy strukturę komponentu (HTML) od jego wyglądu (CSS)
• Rozwiązujemy problem ze specyficznością

Konwencje i metodyki CSS
• Jako konwencje nazewnicze ułatwiają czytanie i rozumienie kodu (kod się
częściowo sam dokumentuje). Zmuszają do bardziej przemyślanego
nazywania klas i przeciwdziałają konfliktom nazw
• Mogą być powiązane z architekturą komponentów w aplikacji – tworzyć
dodatkową warstwę abstrakcji do opisu jej wyglądu
• Bardziej przejrzysty i przemyślany kod prowadzi do mniejszej liczby
powtórzeń deklaracji. Krótszy plik CSS to szybsze ładowanie stylów na
stronie.

OOCSS
BEM
SMACSS
Atomic Design

Object Oriented CSS (OOCSS)
• Obiekt rozumiemy jako kawałek kodu HTML wraz z odpowiadającymi mu
klasami
• Separacja struktury od stylu
• Separacja kontenerów od ich zawartości

Object Oriented CSS (OOCSS)
HTML CSS
<li class="card">
<img src="dog1.jpg" class="card-img">
<div class="card-info">
<h2 class="card-title">
</h2>
<ul class="card-details">
<li>Samiec</li>
<li>8 lat</li>
</ul>
</div>
<footer class="card-footer">
<li>93
<span class="counter-icon"></span>
</li>
<li>5
<span class="counter-icon"></span>
</li>
</ul>
</footer>
</li>
.card {
font-size: 16px;
}
.card-img {
border-radius: 3px;
}
.card-title {
color: #333333;
}
.counter {
font-size: 11px;
}
.counter-icon {
color: #EF88A8;
}

Dla porównania, przypomnijmy...
HTML CSS
<li id="doge">
<img src="dog1.jpg">
<div class="doge-info">
<h2 class="doge-name">
</h2>
<ul class="doge-details">
<li>Samiec</li>
<li>8 lat</li>
</ul>
</div>
<footer class="footer">
<li>93
</li>
<li>5
</li>
</ul>
</footer>
</li>
#doge {
font-size: 16px;
}
#doge img {
border-radius: 3px;
}
div.doge-info h2 {
color: #333333;
}
#doge footer .counter {
font-size: 11px;
}
.icon {
color: #EF88A8;
}

Block Element Modifier (BEM)
• Blok, Element, Modyfikator
• Blok jest elementem nadrzędnym, wskazuje na komponent
• Element jest częścią składową bloku (subkomponent)
• Modyfikator określa wariant danego komponentu

Block Element Modifier (BEM)
• .block – nazwa klasy określająca blok
• .block__element – nazwa klasy określająca element
• .block—modifier – nazwa klasy określająca modyfikator

Przykładowy element

Jak, będąc projektantem, mogę tworzyć „obiektowe”
layouty?
• Traktuj aplikację jako zbiór pasujących do siebie i reużywalnych
komponentów
• Twórz spójny język wizualny
• Przygotuj UI kit lub bibliotekę komponentów (component library) dla
programisty

Materiały
https://github.com/sztyborek/obiektowy-css-demo
https://codepen.io/sztyborek/pen/RgjJEq
https://codepen.io/sztyborek/pen/ZyaRGE

Marta Sztybor - Zorientowany obiektowo CSS, czyli jak tworzyć layouty aplikacji i nie zwariować

Recommended

Recommended

More Related Content

Similar to Marta Sztybor - Zorientowany obiektowo CSS, czyli jak tworzyć layouty aplikacji i nie zwariować

Similar to Marta Sztybor - Zorientowany obiektowo CSS, czyli jak tworzyć layouty aplikacji i nie zwariować (20)

More from The Awwwesomes

More from The Awwwesomes (7)

Marta Sztybor - Zorientowany obiektowo CSS, czyli jak tworzyć layouty aplikacji i nie zwariować