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:

.btn {
  display: inline-block;
  text-align: center;
  border-radius: 3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000;
  padding: 5px 10px;
}

.btn-primary {
  background: #47c4ff;
}

.btn-cancel: {
  background: #b5b5b5;
  color: #fff;
}

.btn-special: {
  background: #ff0000;
  font-size: 20px;
}

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

<button class="btn btn-primary">Submit</button>
<button class="btn btn-cancel">Cancel</button>

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:

<section class="meta">
  <h1>Meta</h1>
</section>
<article class="post">
  <h1>Post title</h1>
</article>

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

.meta h1 {
  font-size: 1em;
}

.post h1 {
  font-size: 1.2em;
}

Co jest nie tak z tym kodem? Ano style dla elementów h1uzależ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:

h1 {
  font-size: 1em;
}

h1.post-header {
  font-size: 1.2em;
}

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

<section class="meta">
  <h1>Meta</h1>
</section>
<article class="post">
  <h1 class="post-header">Post title</h1>
</article>

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: