Polub bloga na fejsie!

Metodyki CSS #1 – OOCSS

4

Jak to ostatnio często u mnie bywa, pomysł na ten wpis podrzucił mi jeden z czytelników bloga. Poprosił on o omówienie metodyk CSS takich jak OOCSS, BEM czy SMACSS. Uznałem, że to świetny pomysł jednak zamiast omawiać to wszystko w jednym wpisie postanowiłem rozbić to na kilka krótszych. Powstanie więc mini-seria wpisów, a dziś przedstawiam jej pierwszą część!

Zgodnie z tym co możesz przeczytać w tytule dzisiejszego wpisu, zajmiemy się dziś metodyką OOCSS czyli Object Oriented CSS. Myślę, że najlepiej zacząć właśnie od niej bo jest chyba najprostsza.

Co to jest OOCSS?

Object Oriented CSS, jak sama nazwa wskazuje, czerpie inspirację z programowania obiektowego. Główną motywacją tego podejścia jest zwiększenie re-używalności kodu CSS, a przez to ułatwienie jego utrzymywania. Innymi słowy chodzi o to aby uczynić CSS bardziej modularnym i zorientowanym obiektowo. Należy przy tym pamiętać, że jest to tylko metodyka pisania stylów, samemu więc trzeba dbać o to aby nasz kod był zgodny z OOCSS…

W podejściu OOCSS wyróżnia się pojęcie „obiektu” rozumianego jako kawałek kodu HTML (pojedyncze elementy bądź całe ich grupy) wraz z odpowiadającymi mu klasami CSS oraz ewentualnie jakimś kodem JavaScript. Obiekty takie mogą być oczywiście re-używane w wielu miejscach aplikacji. Przykładem takiego obiektu może być na przykład element input wraz ze stylami (w tym odpowiadającymi za błędy walidacji) oraz walidacją po stronie JavaScript. Obiektem może być też jednak cały formularz, na przykład rejestracji na Newsletter.

W związku z powyższym, obiekty takie należy mieć na uwadze już na etapie projektowania struktury dokumentu HTML. Można powiedzieć, że od początku trzeba „myśleć w OOCSS”, a mają nam w tym pomóc dwie podstawowe reguły, którymi należy się kierować:

  • separacja struktury od stylu
  • separacja kontenerów i zawartości

Poniżej postaram się omówić te dwie zasady trochę bardziej szczegółowo.

Separacja struktury od stylu

Chodzi tutaj o utworzenie najpierw klas bardziej globalnych, które definiować będą ogólną strukturę obiektów danego rodzaju. Następnie należy utworzyć klasy bardziej wyspecjalizowane, odpowiedzialne za specyficzny styl obiektu w zależności od sytuacji. Najczęściej przytaczanym przykładem jest element button więc i ja się na nim oprę:

  • na początek zdefiniujemy klasę btn odpowiedzialną za definicję struktury wszystkich guzików na stronie: chcemy na przykład, aby wszystkie przyciski miały zaokrąglone rogi, wyśrodkowany tekst, używały czcionki Arial o rozmiarze 14px i jeszcze kilka domyślnych ustawień
  • następnie zdefiniujemy klasy btn-primary, btn-cancel oraz btn-special i nadamy im style w zależności od ich przeznaczenia

W pliku CSS mogłoby to wyglądać mniej więcej jak poniżej:

Wykorzystanie powyższych klas w kodzie HTML mogłoby wyglądać na przykład tak:

Jak widzisz, wic polega na tym, że nadając elementom style strukturalne definiujemy ogólny ich wygląd, a dodatkowo możemy ustawiać im specyficzny wygląd w zależności od potrzeb.

P.S. Robiąc „research” do tego wpisu natknąłem się na dodatkowy „poziom” separacji, który uważam za całkiem fajne podejście (znajdziesz o tym w jednym z linków jakie podałem na końcu wpisu). Chodzi mianowicie o klasy odpowiedzialne za rozmiar obiektów. W naszym przykładzie moglibyśmy mieć w takim przypadku klasy btn-small, btn-medium oraz btn-large, które modyfikowałyby rozmiar czcionki oraz wartość właściwości padding.

Separacja kontenerów i zawartości

Druga zasada OOCSS mówi o rozdzieleniu stylów dla kontenerów oraz zawartości. Myślę, że najłatwiej będzie mi to przedstawić po prostu na przykładzie – spójrzmy najpierw na HTML:

Jakże często w „spaghetti” CSS możemy znaleźć takie style dla powyższego HTML’a:

Co jest nie tak z tym kodem? Ano style dla elementów h1 są uzależnione od miejsca, w którym dany element się znajduje… Wedle OOCSS obiekt powinien wyglądać tak samo, niezależnie w jakim kontenerze go umieściliśmy. Jeśli więc mimo wszystko chcemy dodać jakąś modyfikację w konkretnym przypadku powinniśmy użyć specyficznej klasy:

Dzięki temu, nasz przykładowy HTML wyglądałby teraz jak poniżej:

Takie podejście ułatwia nam utrzymanie kodu – jeśli chcemy przywrócić danemu elementowi wygląd domyślny, wystarczy usunąć z niego specyficzną klasę. Poza tym mamy pewność, że element, który nie ma żadnej klasy na pewno posiada domyślne ustawienia.

Podsumowanie

To tyle w pierwszej części mini-cyklu o metodykach CSS. Jak widzisz, OOCSS to całkiem proste reguły… Wprowadzenie tej metodyki wymaga jednak trochę pracy na początku, a także przestawienia programistów na odpowiedni sposób myślenia.

P.S. Poniżej lista tekstów na temat OOCSS, do których również warto, moim zdaniem, zajrzeć:


Wpis ten jest częścią serii na temat metodyk CSS – poniżej linki do wszystkich części serii:

REACT, REDUX, REACT-ROUTER - KURSY ON-LINE

Chcesz od podstaw poznać tajniki React, Redux oraz react-router? Zapraszam do moich szkoleń on-line:

Przejdź do szkoleń
  • Marcin Kopeć

    Witam,
    bardzo ciekawy artykuł.
    W firmie z którą współpracowałem przez 1.5 roku koderzy z większym expem niż ja właśnie wymagali
    zagnieżdżeń styli(w LESS) które Pan(i nie tylko) zakwestionował.
    mam tutaj na myśli właśnie coś takiego

    .meta h1 {…

    przedstawiałem minusy takiego rozwiązania(szczególnie bardziej złożonego nestingu) podobnie jak Pan ale musiałem tak robić i wyrobiłem w sobie złe nawyki których…teraz muszę się oduczyć 🙁
    Kolesie potrafili zagnieżdżać wszystko jak lecie tylko po to żeby było zagnieżdżone. Problem w tym że znacznie utrudnia to re-using.
    Z niecierpliwością czekam na drugą część.
    Pozdrawiam

    • No tak to jest w tym zawodzie, że przez różne decyzje projektowe nie zawsze robimy coś na codzień optymalnie… Myślę, że najważniejsze to mieć świadomość, że można lepiej/inaczej – wtedy trudniej będzie tym złym podejściom wejść w nawyk. Dzięki za komentarz 😉

  • veranoo

    Nie widziałem, że moja prośba tak szybko będzie zrealizowana. Czekam na następną cześć. Pozdrawiam

  • Wygląda na to że od dawna stosuje te zasady nie wiedząc że mają jakąś konkretną nazwę 😁

Google Analytics Alternative