Az objektumorientált CSS alapjai (OOCSS)

A Frontend fejlesztése gyorsan fejlődik, és minden évben új technikákkal bővül. Ez a harc lehet a fejlesztők számára, hogy lépést tartsanak mindennel. A Sass és a PostCSS között könnyen eltévedhet a fejlesztési eszközök tengerében.

Egy újabb technika az Objektum-orientált CSS, amelyet rövid ideig OOCSS-nek is neveznek. Ez nem egy eszköz, hanem egy CSS-írási módszer, amelynek célja a CSS moduláris és objektum alapú.

Ebben a bejegyzésben szeretném bemutatni a az OOCSS alapvető alapjai, és hogyan lehet ezeket az elképzeléseket a frontend webes munkájára alkalmazni. Előfordulhat, hogy ez a technika nem fog minden fejlesztővel foglalkozni, de érdemes megérteni az új fogalmakat, hogy eldöntse, hogy a munkafolyamata hasznos lehet-e.

Mi teszi CSS objektum-orientált?

Az objektumorientált programozás (OOP) egy olyan programozási paradigma, amely a hangsúlyt fekteti újrafelhasználható objektumok létrehozása és kapcsolatok kialakítása közöttük, az eljárási programozással szemben, amely a kódot eljárásokba rendezi (rutinok, szubrutinok vagy funkciók).

Az OOP mindkettőben széles körben használatos A JavaScript és a backend nyelvek az elmúlt években azonban a CSS szervezése elvek szerint még mindig új koncepció.

A “tárgy” az OOCSS-ben egy HTML elem vagy bármi, ami ehhez kapcsolódik (például a CSS osztályok vagy a JavaScript módszerek). Például előfordulhat, hogy van egy oldalsáv-widget-objektum, amelyet különböző célokra lehet másolni (hírlevél-feliratkozás, hirdetési blokkok, legújabb hozzászólások stb.). CSS lehet célozza meg ezeket az objektumokat ami a szél méretezését teszi lehetővé.

Az OOCSS GitHub bejegyzésének összegzése egy CSS objektum négy dologból állhat:

1. A DOM HTML csomópontja
2. CSS nyilatkozatok a csomópontok stílusáról
3. Az összetevők, mint a háttérképek
4. JavaScript-viselkedések, hallgatók vagy egy objektumhoz kapcsolódó módszerek

Általában véve a CSS objektumorientált, amikor úgy véli osztályok, amelyek újrahasználhatók és célozható több oldalelemre.

Sok fejlesztő azt mondaná, hogy az OOCSS könnyebb megosztani másokkal, és könnyebb felvenni az inaktív fejlesztés hónapjait (vagy éveit) követően. Ez összehasonlítható más moduláris módszerekkel, mint például az SMACSS, amely szigorúbb szabályokat tartalmaz a CSS-ben lévő objektumok kategorizálására.

Az OOCSS GYIK oldalon van egy csomó információ, ha kíváncsi vagy többet megtudni. És Nicole Sullivan alkotó gyakran beszél az OOCSS-ről és arról, hogyan kapcsolódik a modern webfejlesztéshez.

Külön szerkezet a stílusból

Az OOCSS nagy része olyan kód írása, amely elválasztja az oldalszerkezetet (szélesség, magasság, margók, padding) a megjelenéstől (betűtípusok, színek, animációk). Ez lehetővé teszi egyéni nyúzás többoldalas elemekre kell alkalmazni a szerkezet befolyásolása nélkül.

Ez hasznos lehet olyan alkatrészek tervezésekor is, amelyek lehetnek az elrendezés körül mozog könnyedén. Például a “Legutóbbi hozzászólások” az oldalsávon lévő widgetnek mozgathatónak kell lennie a láblécben vagy a tartalom felett, miközben hasonló stílusokat kell fenntartania.

Íme egy példa az OOCSS számára a “Legutóbbi hozzászólások” widget, amely ebben az esetben a CSS-objektumunk:

 / * Szerkezet * / .side-widget szélesség: 100%; párnázás: 10px 5px;  / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; szín: # 2b2b2b; font-size: 1.45em;  

Figyelj rá elrendezés a .side-modult osztály, amely több oldalsáv elemre is alkalmazható, miközben megjelenés a .Legutóbbi hozzászólások osztály, amely más widgetek bőrét is használhat. Például, ha a .Legutóbbi hozzászólások a widgetet a láblécre mozgatták, előfordulhat, hogy nem ugyanaz a pozícionálás, de ugyanaz a megjelenés és érzés lehet.

Tekintse meg ezt a oldalsáv példát a CodePen-től. Az úszókra és a szövegbeállításokra az osztályok elkülönülését választja úgy, hogy a replikáció nem igényel extra CSS kódot.

Külön tartalom a tartalomról

Tartalom elválasztása a konténerelemtől az OOCSS egy másik fontos elve.

Egyszerűbb értelemben ez csak azt jelenti, hogy kerülje a gyermek szelektorok használatát, amikor csak lehetséges. Az egyedi oldalelemek, például a horgony linkek, fejlécek, blokkjegyek vagy rendezetlen listák testreszabásakor egyedi osztályokat kell adnia nekik, mint a leszármazóknak..

Íme egy egyszerű példa:

 / * OOCSS * / .sidebar / * oldalsáv tartalma * / h2.sidebar-title / * speciális h2 elem stílusok * / / * Nem OOCSS * / .sidebar / * azonos oldalsáv tartalma * / .sidebar h2 / * több specifitást ad hozzá, mint a szükséges * / 

Bár a második kódformátum használata nem szörnyű, ajánlatos az első formátumot követni, ha tiszta OOCSS-t szeretne írni..

Fejlesztési iránymutatások

Nehéz a pontos előírásokat szögezni, mert a fejlesztők folyamatosan vitatják az OOCSS célját. De itt vannak néhány javaslat, amely segít tisztább OOCSS-kód megírásában:

• Dolgozik vele osztályok helyett az azonosítók a stílus.
• Megpróbálni tartózkodjanak a többszintű leszármazott osztály-specifitástól hacsak nem szükséges.
• Határozza egyedi stílusok ismétlődő osztályokkal (pl. úszók, törmelék, egyedi betűtípusok).
• Bővítse az elemeket célcsoportokkal a szülõ osztályok helyett.
• A stíluslap rendezése szekciókba, fontolja meg a tartalomjegyzék hozzáadása.

Ne feledje, hogy a fejlesztőknek továbbra is használnia kell az ID-ket a JavaScript-célzáshoz, de nem szükségesek a CSS-hez, mert túl specifikusak. Ha egy objektum azonosítót használ a CSS stílushoz, soha nem lehet másolni, mivel az azonosítók egyedi azonosítók. Ha csak osztályokat használ a stílushoz az öröklés sokkal könnyebb megjósolni.

Ezenkívül az osztályok további funkciók láncolhatók. Egy elemnek 10 + osztályba lehetne csatlakozni. Míg az egyik elemen 10 + osztály nem egyénileg ajánlott, a fejlesztők számára lehetővé teszi, hogy újrafelhasználható stílusok könyvtárát gyűjtsék a korlátlan oldalelemekhez.

Az OOCSS-ben szereplő osztálynevek némileg ellentmondásosak, és nem állnak kőbe. Sok fejlesztő inkább az osztályokat rövid és pontig tartja.

A Camel tok is népszerű, például .errorBox ahelyett .error-box. Ha megnézed az OOCSS dokumentációban szereplő osztályneveket, észre fogod venni a teve esetét “hivatalos” ajánlást. Nincs semmi baj a kötőjelekkel, de általában a legjobb, ha az OOCSS irányelveket követjük.

OOCSS + Sass

A legtöbb webfejlesztő már szereti a Sass-ot, és gyorsan elárasztotta a frontend közösséget. Ha még nem próbálta meg Sass-ot, érdemes egy lövést adni. Lehetővé teszi kódok írását változókkal, funkciókkal, fészkelési és összeállítási módszerekkel, például matematikai funkciókkal.

A kompetens kezekben Sass és az OOCSS lehet egy mennyei mérkőzés. A Sass Way blogján találsz egy kiváló írást erről.

Például a Sass használatával @extend irányelvben az egyik osztály tulajdonságait egy másik osztályra alkalmazhatja. A tulajdonságok nem másolódnak, hanem a két osztály egy vesszőválasztóval kombinálódik. Így egy helyen frissítheti a CSS tulajdonságokat.

Ha folyamatosan írsz stíluslapokat, ez megmentené óra gépelés és segítség automatizálja az OOCSS folyamatot.

Emlékezz erre is A kódkarbantartás az OOCSS nagy része. A Sass használatával könnyebbé válik a munkafolyamatba kötődő változók, mixek és fejlett szerszámok segítségével.

A nagy OOCSS kód kulcsfontosságú attribútuma a képes megosztani mindenkivel, még magad is egy későbbi időpontban, és könnyedén fel tudod venni.

Teljesítmény szempontok

Az OOCSS zavartalanul és sok zavartalanul működik. A fejlesztők megpróbálják a legjobbakat nem minden alkalommal megismételni magukat, valójában ez a DRY fejlesztés mögött. Az OOCSS technika idővel több száz CSS osztályt eredményezhet, amelyek egy adott dokumentumban több tucatnyi egyedi tulajdonsággal rendelkeznek.

Mivel az OOCSS még mindig új téma, nehezen vitatkozhat a puffadás témájában. Számos CSS-fájl kevéssé strukturált, míg az OOCSS merev szerkezetet és (ideális esetben) kevésbé duzzadt. A legnagyobb teljesítmény-aggodalom a HTML-ben lenne, ahol egyes elemek összegyűjthetnek egy sor különböző osztályt az elrendezési struktúrához és a designhoz.

Érdekes megbeszéléseket talál a témáról olyan helyeken, mint a Stack Overflow és a CSS-Tricks.

Javaslatom, hogy próbáltam egy minta projektet építeni, és nézd meg, hogyan megy. Ha beleszeret az OOCSS-be, akkor radikálisan megváltoztathatja a weboldalak kódolását. Alternatív megoldásként, ha utálod, még mindig egy új technikát tanulsz, és kritikusan gondolkodsz arról, hogyan működik. Mindenki nyer, nem számít.

Elfoglalt írás OOCSS

A legjobb módja annak, hogy bármit megtanuljunk a webfejlesztésben, a gyakorlat. Ha már megérted a CSS alapjait, akkor jól jársz!

Mivel az OOCSS nem igényel előfeldolgozást, próbálja ki egy online IDE-vel, például a CodePen-tel. Az egyszerű projektek a legjobbak az induláshoz és a tudás fejlesztéséért.

Tekintse meg ezeket az erőforrásokat, hogy továbbfejlessze az OOCSS fejlődő területén végzett kutatásait.

• OOCSS hivatalos honlapja
• Objektum-orientált CSS: Mi, hogyan és miért
• OOCSS + Sass = A legjobb módja a CSS-nek
• Bevezetés az objektum-orientált CSS-be