Podstawy CSS obiektowego (OOCSS)

Rozwój frontendu przebiega szybko dzięki wielu nowym technikom dodawanym każdego roku. Deweloperzy mogą zmagać się ze wszystkim. Pomiędzy Sass a PostCSS łatwo jest zgubić się w morzu narzędzi programistycznych.

Nowszą techniką jest CSS zorientowany obiektowo, nazywany w skrócie OOCSS. To nie jest narzędzie, ale raczej metodologia pisania CSS, która ma na celu uczynić CSS modularnym i obiektowym.

W tym poście chciałbym przedstawić podstawowe podstawy OOCSS, i jak te pomysły mogą być zastosowane do pracy w sieci frontend. Ta technika może nie być zrozumiała dla każdego dewelopera, ale warto zrozumieć nowe koncepcje, aby zdecydować, czy przepływ pracy może z niej skorzystać.

Co sprawia, że ​​obiekt CSS jest zorientowany obiektowo?

Programowanie obiektowe (OOP) to paradygmat programowania, na którym się koncentruje tworzenie obiektów wielokrotnego użytku i nawiązywanie relacji między nimi, w przeciwieństwie do programowania proceduralnego, które porządkuje kod w procedury (procedury, podprogramy lub funkcje).

OOP stał się powszechnie używany w obu Języki JavaScript i backend w ciągu ostatnich kilku lat, ale organizowanie CSS zgodnie z jego zasadami jest wciąż nową koncepcją.

The “obiekt” w OOCSS odnosi się do Element HTML lub cokolwiek z tym związane (jak klasy CSS lub metody JavaScript). Na przykład może istnieć obiekt widgetu paska bocznego, który może być replikowany w różnych celach (rejestracja biuletynu, bloki reklam, najnowsze posty itp.). CSS może celuj w te obiekty masowo co sprawia, że ​​skalowanie staje się proste.

Podsumowując wpis GitHub OOCSS, obiekt CSS może składać się z czterech rzeczy:

1. Węzły HTML DOM
2. Deklaracje CSS dotyczące stylu tych węzłów
3. Komponenty, takie jak obrazy tła
4. Zachowania JavaScript, detektory lub metody powiązane z obiektem

Mówiąc ogólnie, CSS jest zorientowany obiektowo, gdy się go rozważa klasy, które można ponownie wykorzystać i możliwość kierowania do wielu elementów strony.

Wielu programistów powiedziałoby, że OOCSS jest łatwiejszy do dzielenia się z innymi i łatwiejszy do odebrania po miesiącach (lub latach) nieaktywnego rozwoju. Jest to porównywalne z innymi metodami modułowymi, takimi jak SMACSS, które mają bardziej rygorystyczne zasady kategoryzacji obiektów w CSS.

Strona FAQ OOCSS zawiera kilka informacji, jeśli chcesz dowiedzieć się więcej. Twórca Nicole Sullivan często mówi o OOCSS i jego powiązaniach z nowoczesnym tworzeniem stron internetowych.

Oddzielna struktura od stylu

Dużą częścią OOCSS jest pisanie kodu, który oddziela strukturę strony (szerokość, wysokość, marginesy, dopełnienie) od wyglądu (czcionki, kolory, animacje). To pozwala niestandardowe skórowanie do zastosowania na wielu elementach strony bez wpływu na strukturę.

Jest to również przydatne do projektowania komponentów, które mogą być poruszał się po układzie łatwo. Na przykład a “Najnowsze posty” widget na pasku bocznym powinien być ruchomy w stopce lub nad zawartością, zachowując podobne style.

Oto przykład OOCSS dla a “Najnowsze posty” widget, który w tym przypadku jest naszym obiektem CSS:

 / * Struktura * / .side-widget szerokość: 100%; padding: 10px 5px;  / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; kolor: # 2b2b2b; rozmiar czcionki: 1,45em;  

Zauważ, że układ jest zarządzany za pomocą .boczny widget klasa, która może być zastosowana również do wielu elementów paska bocznego wygląd jest zarządzany za pomocą .ostatnie posty klasa, która może być również używana do skórek innych widżetów. Na przykład, jeśli .ostatnie posty Widget został przeniesiony do stopki, może nie mieć takiego samego ustawienia, ale może mieć taki sam wygląd i styl.

Spójrz także na ten przykład paska bocznego z CodePen. Używa wyraźnego oddzielenia klas dla pływaków i wyrównania tekstu, tak że replikacja nie wymaga dodatkowego kodu CSS.

Oddzielny kontener od treści

Oddzielenie treści od elementu kontenera to kolejna ważna zasada OOCSS.

Mówiąc prościej, oznacza to, że należy unikać używania selektorów podrzędnych, gdy tylko jest to możliwe. Podczas dostosowywania dowolnych unikalnych elementów strony, takich jak łącza kotwiczące, nagłówki, cytaty blokowe lub listy nieuporządkowane, należy nadać im unikalne klasy, a nie selektory potomków.

Oto prosty przykład:

 / * OOCSS * / .sidebar / * zawartość paska bocznego * / h2.sidebar-title / * specjalne style elementów h2 * / / * Non-OOCSS * / .sidebar / * ta sama zawartość paska bocznego * / .sidebar h2 / * dodaje więcej specyfiki niż potrzeba * / 

Chociaż używanie drugiego formatu kodu nie jest przerażające, zaleca się stosowanie pierwszego formatu, jeśli chcesz pisać czysty OOCSS.

Wytyczne dotyczące rozwoju

Trudno jest określić dokładne specyfikacje, ponieważ programiści stale debatują nad celem OOCSS. Ale tu są kilka sugestii, które mogą pomóc w napisaniu czystszego kodu OOCSS:

• Pracować z klasy zamiast identyfikatorów do stylizacji.
• Spróbuj powstrzymać się od wielopoziomowej specyfiki klasy potomków chyba że jest to potrzebne.
• Definiować unikalne style z powtarzalnymi klasami (np. pływaki, clearfix, unikalne stosy czcionek).
• Rozszerz elementy z celowanymi klasami zamiast klas macierzystych.
• Uporządkuj swój arkusz stylów na sekcje, rozważ dodanie spisu treści.

Pamiętaj, że programiści powinni nadal używać identyfikatorów do kierowania JavaScript, ale nie są one wymagane w CSS, ponieważ są zbyt szczegółowe. Jeśli jeden obiekt używa identyfikatora do stylizacji CSS, nigdy nie może być replikowany, ponieważ identyfikatory są unikalnymi identyfikatorami. Jeśli używasz wtedy tylko klas do stylizacji dziedziczenie staje się znacznie łatwiejsze do przewidzenia.

Ponadto klasy mogą być łączone ze sobą w celu uzyskania dodatkowych funkcji. Pojedynczy element może mieć dołączone klasy 10+. Chociaż 10+ klas na jednym elemencie nie jest czymś, co osobiście polecam, pozwala programistom na gromadzenie biblioteki stylów wielokrotnego użytku dla nieograniczonej liczby elementów strony.

Nazwy klas w OOCSS są nieco kontrowersyjne i nie są w kamieniu. Wielu programistów woli utrzymywać klasy krótkie i trafne.

Popularny jest również futerał na wielbłądzie .errorBox zamiast .pole błędu. Jeśli spojrzysz na nazewnictwo klas w dokumentacji OOCSS, zauważysz, że przypadek wielbłąda to “urzędnik” zalecenie. Nie ma nic złego w myślnikach, ale z reguły najlepiej stosować się do wytycznych OOCSS.

OOCSS + Sass

Większość twórców stron internetowych już kocha Sassa i szybko wyprzedziła społeczność frontendową. Jeśli jeszcze nie wypróbowałeś Sassa, warto dać mu szansę. Umożliwia pisanie kodu za pomocą zmiennych, funkcji, metod zagnieżdżania i kompilacji, takich jak funkcje matematyczne.

W kompetentnych rękach Sass i OOCSS mogą być meczem w niebie. Doskonały artykuł na ten temat znajdziesz na blogu The Sass Way.

Na przykład, używając Sassa @poszerzać dyrektywę można zastosować właściwości jednej klasy do innej klasy. Właściwości nie są duplikowane, ale zamiast tego dwie klasy są połączone z selektorem przecinka. W ten sposób możesz aktualizować właściwości CSS w jednym miejscu.

Jeśli ciągle piszesz arkusze stylów, to by to oszczędzało godziny pisania i pomoc automatyzuj proces OOCSS.

Pamiętaj też o tym obsługa kodu jest dużą częścią OOCSS. Używając Sass, twoja praca staje się łatwiejsza dzięki zmiennym, miksom i zaawansowanym narzędziom do tworzenia linek powiązanych z obiegiem pracy.

Kluczowym atrybutem wspaniałego kodu OOCSS jest możliwość dzielenia się nim z kimkolwiek, nawet sam w późniejszym terminie i będziesz w stanie go odebrać z łatwością.

Rozważania dotyczące wydajności

OOCSS ma działać płynnie i bez zamieszania. Twórcy starają się jak najlepiej nie powtarzać się na każdym kroku, w rzeczywistości jest to przesłanka rozwoju DRY. Z czasem technika OOCSS może prowadzić do setek klas CSS z indywidualnymi właściwościami stosowanymi dziesiątki razy w danym dokumencie.

Ponieważ OOCSS jest wciąż nowym tematem, trudno dyskutować na temat wzdęcia. Wiele plików CSS kończy się nadęciem o małej strukturze, podczas gdy OOCSS zapewnia sztywną strukturę i (najlepiej) mniej nadęty. Największym problemem wydajnościowym byłby HTML, w którym niektóre elementy mogą gromadzić garść różnych klas dla struktury i projektu układu.

Interesujące dyskusje na ten temat znajdziesz na stronach takich jak Stack Overflow i CSS-Tricks.

Moim zaleceniem jest próba zbudowania przykładowego projektu i zobaczenie, jak to działa. Jeśli zakochasz się w OOCSS, może to radykalnie zmienić sposób kodowania stron internetowych. Alternatywnie, jeśli go nienawidzisz, wciąż uczysz się nowej techniki i krytycznie zastanawiasz się nad jej działaniem. Bez względu na wszystko wygrana-wygrana.

Uzyskaj zajęty Pisanie OOCSS

Najlepszym sposobem na nauczenie się czegokolwiek w tworzeniu stron internetowych jest praktyka. Jeśli już rozumiesz podstawy CSS, jesteś na dobrej drodze!

Ponieważ OOCSS nie wymaga wstępnego przetwarzania, możesz wypróbować go z internetowym IDE, takim jak CodePen. Proste projekty są najlepsze do rozpoczęcia i ulepszania swojej wiedzy od tego momentu.

Spójrz na te zasoby, aby kontynuować swoje badania w rozwijającej się dziedzinie OOCSS.

• Oficjalna strona OOCSS
• Zorientowany obiektowo CSS: co, jak i dlaczego
• OOCSS + Sass = Najlepszy sposób na CSS
• Wprowadzenie do CSS obiektowego