Základy objektově orientovaného CSS (OOCSS) t

Vývoj frontendu se pohybuje rychle s mnoha novými technikami přidanými každý rok. Pro vývojáře to může být zápas, aby udrželi krok se vším. Mezi Sass a PostCSS je snadné se ztratit v moři vývojových nástrojů.

Jednou novější technikou je objektově orientovaná CSS, která se také nazývá OOCSS. To není nástroj, ale spíše metodika psaní CSS, jejímž cílem je CSS modulární a objektové.

V tomto příspěvku bych chtěl představit základní principy OOCSS, a jak lze tyto myšlenky aplikovat na webovou práci frontendu. Tato technika se nemusí dotýkat každého vývojáře, ale stojí za to pochopit nové koncepty a rozhodnout se, zda by z toho mohl mít prospěch váš pracovní postup.

Co dělá CSS objektově orientovaný?

Objektově orientované programování (OOP) je programové paradigma, na které se zaměřuje vytváření opakovaně použitelných objektů a navázání vztahů na rozdíl od procesního programování, které organizuje kód do postupů (rutiny, podprogramy nebo funkce).

OOP se stal široce používaným v obou JavaScript a backend jazyky v posledních letech, ale pořádání CSS podle jeho principů je stále novým konceptem.

“objekt” v OOCSS odkazuje na HTML element nebo cokoli s ním spojené (jako CSS třídy nebo JavaScript metody). Můžete mít například objekt sidebar widgetu, který by mohl být replikován pro různé účely (registrace zpravodaje, reklamní bloky, nedávné příspěvky atd.). CSS může cílit tyto objekty en-masse což činí škálování hračkou.

Při shrnutí položky GOCHub OOCSS může objekt CSS sestávat ze čtyř věcí:

1. HTML uzly DOM
2. CSS deklarace o stylu těchto uzlů
3. Komponenty jako obrázky na pozadí
4. Chování JavaScriptu, posluchači nebo metody spojené s objektem

Obecně řečeno, CSS je objektově orientovaná, když uvažuje třídy, které jsou opakovaně použitelné a cílení na více prvků stránky.

Mnozí vývojáři by řekli, že OOCSS je snazší sdílet s ostatními a snazší je vyzvednout po měsících (nebo letech) neaktivního vývoje. To je srovnatelné s jinými modulárními metodami jako je SMACSS, která má přísnější pravidla pro kategorizaci objektů v CSS.

OOCSS FAQ stránka má spoustu informací, pokud jste zvědaví dozvědět se více. A tvůrkyně Nicole Sullivanová často mluví o OOCSS a o tom, jak to souvisí s moderním vývojem webu.

Samostatná struktura ze stylu

Velká část OOCSS je psaní kódu, který odděluje strukturu stránky (šířka, výška, okraje, vycpávky) od vzhledu (fonty, barvy, animace). To dovoluje vlastní skinování aplikovat na více prvků stránky bez ovlivnění struktury.

To je také užitečné pro navrhování komponent, které mohou být pohybovat kolem rozvržení s lehkostí. Například, a “Poslední příspěvky” widget v postranním panelu by měl být pohyblivý do zápatí nebo nad obsah při zachování podobných stylů.

Zde je příklad OOCSS pro a “Poslední příspěvky” widget, který je v tomto případě objektem CSS:

 / * Struktura * / .side-widget width: 100%; polstrování: 10px 5px;  / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; barva: # 2b2b2b; velikost písma: 1.45em;  

Všimněte si toho rozložení je řízen pomocí .side-widget třídy, která by mohla být použita i pro více prvků sidebar, zatímco vzhled je řízen pomocí .Poslední příspěvky třídy, která by mohla být také použita pro další widgety. Například, pokud .Poslední příspěvky widget byl přesunut do zápatí, nemusí mít stejné umístění, ale může mít stejný vzhled a dojem.

Podívejte se také na tento příklad sidebar z CodePen. Používá zřetelné oddělení tříd pro plováky a zarovnání textu, takže replikace nebude vyžadovat další kód CSS.

Oddělte kontejner od obsahu

Oddělení obsahu od jeho kontejnerového prvku je dalším důležitým principem OOCSS.

Jednoduše řečeno to znamená, že byste se měli vyvarovat používání dětských voličů, kdykoli je to možné. Když přizpůsobujete jakékoli jedinečné prvky stránky, jako jsou kotevní odkazy, záhlaví, blokové komentáře nebo neuspořádané seznamy, měli byste jim dát spíše jedinečné třídy než sestupné selektory..

Zde je jednoduchý příklad:

 / * OOCSS * / .sidebar / * sidebar obsah * / h2.sidebar-title / * speciální styly elementů h2 * / / * Non-OOCSS * / .sidebar / * stejný obsah bočního panelu * / .sidebar h2 / * přidává více specifičnosti, než je potřeba * / 

Ačkoli to není hrozné používat druhý kódový formát, je to velmi doporučeno následovat první formát, pokud chcete psát čistý OOCSS.

Pokyny pro rozvoj

Je těžké přiblížit přesné specifikace, protože vývojáři neustále diskutují o účelu OOCSS. Ale tady jsou některé návrhy, které vám pomohou napsat čistší kód OOCSS:

• Pracovat s třídy namísto ID pro styling.
• Zkusit zdržet se víceúrovňové specifičnosti třídy potomků pokud to není nutné.
• Definovat jedinečné styly s opakovatelnými třídami (např. plováky, clearfix, jedinečné svazky písem).
• Rozšiřte prvky s cílenými třídami než mateřské třídy.
• Uspořádejte svůj styl do sekcí, zvážit přidání obsahu.

Vývojáři by měli stále používat ID pro cílení JavaScriptu, ale pro CSS to není nutné, protože jsou příliš konkrétní. Pokud jeden objekt používá ID pro styl CSS, nemůže být nikdy replikován, protože ID jsou jedinečné identifikátory. Pokud používáte pouze třídy pro styling pak dědictví se stává mnohem snazší předvídat.

Kromě toho mohou být třídy připoutány dohromady pro další funkce. Jediný prvek by mohl mít 10 + třídy připojené k němu. Zatímco 10+ tříd na jednom prvku není něco, co bych osobně doporučil, umožňuje vývojářům shromažďovat knihovnu opakovaně použitelných stylů pro neomezené prvky stránky.

Názvy tříd v rámci OOCSS jsou poněkud kontroverzní, a ne v kameni. Mnozí vývojáři dávají přednost tomu, aby třídy zůstaly krátké a na místě.

Velbloudí případ je také populární, například .errorBox namísto .chybové pole. Pokud se podíváte na třídu pojmenování v dokumentaci OOCSS, všimnete si případu velbloudů “oficiální” doporučení. Na pomlčkách není nic špatného, ​​ale zpravidla je nejlepší postupovat podle pokynů OOCSS.

OOCSS + Sass

Většina webových vývojářů již Sass miluje a rychle překonala komunitu frontendu. Pokud jste ještě nesnažili Sass, stojí to za to, že to uděláte. To vám umožní psát kód s proměnnými, funkce, vnoření a metody kompilace jako matematické funkce.

V kompetentních rukou by Sass a OOCSS mohli být zápasem v nebi. Na blogu Sass Way najdete vynikající zápis.

Například pomocí Sass @rozšířit můžete použít vlastnosti jedné třídy na jinou třídu. Vlastnosti nejsou duplikovány, ale místo toho jsou tyto dvě třídy kombinovány s voličem čárky. Tímto způsobem můžete aktualizovat vlastnosti CSS na jednom místě.

Pokud jste neustále psaní stylesheets by to ušetřit hodin psaní a pomoc automatizovat proces OOCSS.

Také si to pamatujte údržba kódu je velkou součástí OOCSS. Pomocí Sassu se vaše práce stává jednodušší díky proměnným, mixům a pokročilým nástrojům lintingu, které jsou vázány na pracovní postup.

Klíčovým atributem velkého OOCSS kódu je schopnost sdílet ji s kýmkoli, i sami v pozdější době, a být schopen vyzvednout to s lehkostí.

Úvahy o výkonu

OOCSS má pracovat plynule a bez velkého zmatku. Vývojáři se snaží co nejlépe ne opakovat se na každém kroku, ve skutečnosti je to předpoklad rozvoje DRY. Postupem času může technika OOCSS vést ke stovkám CSS tříd s jednotlivými vlastnostmi, které jsou v daném dokumentu použity několikrát.

Vzhledem k tomu, že OOCSS je stále nové téma, je obtížné argumentovat na téma bloat. Mnoho CSS souborů skončí nafouknuté malou strukturou, zatímco OOCSS poskytuje tuhou strukturu a (ideálně) méně bloat. Největší zájem o výkon by byl v HTML, kde některé prvky mohou hromadit několik různých tříd pro strukturu struktury a design.

Zajímavé diskuse na toto téma naleznete na stránkách, jako je Stack Overflow a CSS-Tricks.

Moje doporučení je pokusit se vytvořit vzorový projekt a zjistit, jak to jde. Pokud se zamilujete do OOCSS, může to radikálně změnit způsob, jakým kódujete webové stránky. Alternativně, pokud nenávidíte, stále se učíte novou techniku ​​a kriticky přemýšlíte o tom, jak funguje. Je to výhra bez ohledu na to, co.

Získejte obsazeno Zápis OOCSS

Nejlepší způsob, jak se naučit něco ve vývoji webu, je praxe. Pokud již chápete základy CSS, pak jste na dobré cestě!

Protože OOCSS nevyžaduje předzpracování, můžete to zkusit s online IDE, jako je například CodePen. Jednoduché projekty jsou nejlepší pro začátek a zlepšení vašich znalostí odtamtud.

Podívejte se na tyto zdroje a podpořte svůj výzkum v rozvíjející se oblasti OOCSS.

• Oficiální stránky OOCSS
• Objektově orientované CSS: Co, Jak a proč
• OOCSS + Sass = nejlepší způsob, jak CSS
• Úvod do objektově orientované CSS