Metodyka OOCSS (Object Oriented CSS) – dla stron internetowych

Dzisiaj po raz kolejny zajmę się metodykami/konwencjami CSS. Do tej pory omówiłam już konwersję BEM jeśli macie ochotę możecie o niej poczytać tutaj. Dzisiaj przejdę do kolejnej a więc OOCSS. Warto pamiętać, że metodyka podobnie jak inne ma również wpływ na strukturę kodową strony (np. HTML)

Co to jest metodyka OOCSS?

OOCSS to skrót od Angielskiego wyrażenia Object Oriented CSS czyli tłumacząc to prawie dosłownie Obiektowo Zorientowany CSS. Konwencja ta została zaproponowana w 2008 przez Nicole Sullivan. Metoda została zaczerpnięta wprost z zasad programowania w językach takich jak: Java i Ruby.

W obu tych językach występuję pojęcie obiektowości. Dlatego też stosując tą metodę będziemy starać się tworzyć obiekty z pomocą CSS. Warto tu wspomnieć, że nie stworzy się obiektu w CSS jeśli wcześniej struktura strony nie będzie odpowiednio napisana. A do czego nam to?

W praktyce chodzi o to by niektóre elementy strony mogły być swobodnie przemieszczanie – bez obawy o to że coś przestanie działać. Dlatego istotne jest by strona posiadała odpowiednią strukturę – aby coś takiego było w ogóle możliwe.

W metodzie tej obowiązują 2 zasady separacji:

• struktury od stylu
• kontenerów od ich zawartości

Oddzielenie struktury od stylu

Przykłady:

W OOCSS staramy się tworzyć obiekty bardziej uniwersalne dlatego nie tworzymy takich klas:

.button {
width: 150px;
height: 40px;
background: #ccc;
border-radius: 10px;
}

Prawidłowo będzie rozbić to na 2 obiekty (tak by w przyszłości móc skorzystać w innym miejscu z tego samego kodu):

.button {
width: 150px; 
height: 40px;
}

.skin {
background: #ccc;
border-radius: 10px;
}

Użycie:

<a class="button skin" href="#">Test</a>

Oddzielenie kontenera od zawartości

Przykład:

Tak NIE robimy:

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

Poprawnie będzie tak:

.input-group {
    position: relative;
}
.form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

Odmienny wygląd elementu

Z godnie z założeniami OOCSS takie same obiekty np. h3, h4, <b>; powinny wyglądać wszędzie tak samo. Jednak nie zawsze jest to nam na rękę. W takich przypadkach możemy dodać do  elementów, które chcemy zmienić dodatkowe klasy.

Tak nie robimy:

.sekcja-3 h3{
font-size: 20px;
}
.sekcja-3 h4{
font-size: 18px;
} 

Poprawnie będzie:

h3.newsize{
font-size: 20px;
}
h4.newsize{
font-size: 18px;
} 

Dla obiektów

<div class="sekcja-3">
<h3 class="newsize"></h3>
<h4 class="newsize"></h4>
</div>

Podsumowanie

Jak widać metoda ta jest dość prosta choć wymaga uporządkowania i „powtarzalności”. To co napisałam powyżej to oczywiście wprowadzenie do tej metody. Więcej na jej temat znajdziecie na stronach:

https://github.com/stubbornella/oocss/wiki

https://www.hongkiat.com/blog/basics-of-object-oriented-css/

Źródła:

http://javascript-html5-tutorial.pl/styl-konwencje-i-struktura-css-sass-oocss-bem-rscss-smacss-omg.html

https://www.keycdn.com/blog/oocss

https://www.nafrontendzie.pl/metodyki-css-1-oocss