A CSS-írási módszerek megértése

Ebben a hozzászólásban látni fogjuk milyen CSS írási módszerek, néhány jól ismert módszertan, és hogyan hasznosíthatók számunkra a CSS kód optimalizálása. Kezdjük a legegyszerűbb kérdéssel, hogy megkapjuk a labdát. Mi a módszertan?

Módszertan van módszertani rendszer. Gondoljunk egy olyan módszerre, mint egy módszer arra, hogy valamit szisztematikusan csináljunk, egy bizonyos előre meghatározott módon, hogy a dolgokat elérjük a kívánt eredmény eléréséhez.

A jobb eredmények elérése érdekében, jobb módszereinket javítjuk, a rend megváltoztatása, a lépések egyszerűsítése - bármi is működik gyorsabb és több hatékony.

CSS módszertan

Most beszéljünk a CSS módszertanáról. Csakúgy, mint az egész életében, a CSS-et is írjuk: először a CSS-t írjuk vissza, néhány helyen elrendezési stílusot, néhány elkezd két-három osztályt egy elem kialakításához, néhányan az összes CSS kódot írják be egyetlen fájl.

Előnyben részesített módszereinket időnként saját magunk állapítottuk meg vagy mások befolyásolták, vagy munkahelyünkön, vagy a fentiek miatt. De az idő múlásával a CSS veteránok fogalmaztak meg módszerek a CSS írására ez több rugalmas, definiált, újrafelhasználható, érthető és kezelhető.

Meg fogjuk nézni azokat a megfogalmazott módszereket, amelyek magukban foglalják:

1. OOCSS (Objektum-orientált CSS)
2. BEM (blokk, elem, módosító)
3. ACSS (Atomic CSS)
4. SMACSS (skálázható és moduláris architektúra a CSS számára)

jegyzet: Az alább felsorolt ​​fogalmak egyike sem keverhető össze olyan keretrendszerrel, könyvtárral vagy eszközzel, amely ugyanazzal a névvel és fogalommal bírhat, mint a fenti módszerek. Ez a bejegyzés csak a CSS írására szolgáló módszerekről szól.

1. OOCSS

A Nicole Sullivan által 2008-ban kifejlesztett OOCSS (Object Oriented CSS) kulcsfogalmai közé tartozik a CSS tárgy a struktúra és a vizuális stílusok azonosítása, szétválasztása és a helyalapú stílusok elkerülése.

Az OOCSS-ben, az első lépés, amit Nicole javasol, az az, hogy csináljuk azonosítsa a CSS objektumokat.

“Alapvetően egy CSS "objektum" egy ismétlődő vizuális minta, amelyet egy független HTML, CSS és esetleg JavaScript kódrészletre lehet felvenni. Ezt az objektumot ezután újra felhasználhatja az egész webhelyen. - Nicole Sullivan, Github (OOCSS)“

Vegyük például ezt a struktúrát ezen az oldalon. Itt van valami, ami egy ismétlődő vizuális minta és saját független HTML és / vagy CSS:

Itt kétféle objektum van, egy nagyobb előnézeti kép, amelyet megnevezünk post-preview-primer és egy olyan oldalsávot, melynek neve lesz post-preview-secondary.

Meg kell különálló szerkezet és bőr (azaz az objektumok megjelenését létrehozó stílusok). A két típusú objektum különböző szerkezetekkel rendelkezik, az egyik nagyobb dobozban van, bár hasonlónak tűnik, a bal oldali képek és a jobb oldali címek.

Adjuk meg mindkét objektum képeit egy osztályba post-preview-image és adja hozzá a képet, amely a képet balra helyezi. Ez megakadályozza, hogy megismételjük azt a kódot, ahová a képet a CSS objektumokba helyezzük. Ha vannak más hasonló objektumok, akkor újra használjuk post-preview-image nekik.

A bőr elválasztása az egyszerűbb stílusok esetében is elvégezhető határok vagy hátterek. Ha több objektum van ugyanazzal a kék szegéllyel, külön osztály létrehozása a kék szegély számára és hozzáadjuk az objektumokhoz csökkentse a kék szegélyek kódolásának számát a CSS-ben.

Nicole azt is javasolja nem stílusok hozzáadása a hely alapján, Például a linkek belsejében egy adott divon belül a kijelölés helyett adja meg ezeket a linkeket a kiemelő osztály a megfelelő CSS stílusokkal. Így, amikor ki kell jelölnie egy linket az oldal más részében, újra felhasználhatja a kiemelőosztályt.

Az OOCSS előnyei: Újrafelhasználható vizuális stíluskódok, helymeghatározó kódok, mély beágyazott szelektorok csökkentése.

Hátrányok OOCSS: Az ismétlődő vizuális minták meglehetősen nagy mennyisége nélkül feleslegesnek tűnik az elválasztó szerkezet és a vizuális stíluskódok.

2. BEM

A fejlesztők által a Yandexben 2009-ben kifejlesztett BEM (Block, Element, Modifier) ​​kulcsfogalmai magukban foglalják a Blokk, elem & módosítót és elnevezzük őket.

A “Blokk” lényegében ugyanaz, mint egy “tárgy”(az előző példából), a “elem” a blokk összetevőire vonatkozik (kép, cím, előnézeti szöveg a fentiekben) preview-post- objektumok). A “módosítót” akkor használható, ha egy blokk vagy elem állapota megváltozik, például amikor aktív osztályt ad hozzá egy menüelemhez, hogy kiemelje, az aktív osztály a módosító eszközként működik.

Miután azonosította az összetevőket, nevezze meg őket. Például:

• egy menüblokk lesz az osztály menü
• elemei az osztályba tartoznak menü tétel (a blokk és az elem kettős aláhúzással van elválasztva)
• a menü fogyatékos állapotának módosítója lehet az osztály menu_disabled (a módosítót egy aláhúzás határozza meg)
• egy menüelem letiltott állapotának módosítója lehet menu__item_disabled.

A módosítók esetében is használhatunk kulcs érték az elnevezés formátuma. Például az elavult cikkekhez kapcsolódó menüelemek megkülönböztetéséhez megadhatjuk az osztályt menu__item_status_obsolete, és a függőben lévő dokumentumokra mutató menüelemek kialakításához az osztály neve lehet menu__item_status_pending.

Az elnevezés módosítható az Ön számára. Az ötlet az, hogy képes legyen azonosítani, blokkokat, elemeket és módosítókat az osztálynevekből. Nézze meg a BEM oldalon felsorolt ​​elnevezési rendszert.

A BEM honlapja szintén felsorolja hogyan lehet a blokk, az elem és a módosító szegregáció a CSS fájlrendszerbe hozni. A blokkok tetszik “gombok” és “bemenetek” saját mappáik lehetnek, amelyek az ilyen blokkokhoz kapcsolódó fájlokat (.css, .js) tartalmazzák, ami megkönnyíti a dolgokat, ha ezeket a blokkokat más projektekbe szeretnénk importálni.

A BEM előnyei:Könnyen használható osztálynevek és a mély CSS szelektorok csökkentése.

A BEM hátrányai:Annak érdekében, hogy a nevek sane kinézetük legyenek, a BEM azt tanácsolja, hogy blokkolja a fészkelő sekély.

3. ACSS

Készült híressé a Yahoo, valahol a végén az első évtizede^utca században az ACSS kulcsfogalmai közé tartozik, hogy osztályokat hozunk létre a stílus legtetikusabb szintjére, vagyis egy ingatlanértékpárra, majd szükség szerint HTML-ben használjuk őket.

Nehéz megállapítani, hogy az ACSS (Atomic CSS) először került kialakításra, mivel a koncepció már egy ideig használatban van. A fejlesztők olyan osztályokat használnak, mint a .clearfix overflow: hidden hosszú ideje. Az ötlet az ACSS-ben az van egy osztálya minden újrafelhasználható, nem tartalomhoz kapcsolódó ingatlan-értékpárhoz szükségünk lesz a webhelyünkre, és hozzá kell adnunk ezeket az osztályokat, ha szükséges a HTML elemekhez.

Az alábbiakban egy példa az ACSS alapú osztályokra és arra, hogyan használják őket a HTML-ben.

 .mr-8 margin-right: 8px; .fl-r float: right; 
 

Mint látható, az osztályok száma magas lesz ezzel a módszerrel, és a HTML-t zsúfolja az összes osztály. Ez a módszer nem 100% -ban hatékony, de hasznos lehet, ha kívánja. A Yahoo végül is ezt használja.

Az ACSS előnyei:HTML formázása HTML nélkül.

Az ACSS hátrányai:Túl sok osztály, nem túl szép, és utálhatod.

4. SMACSS

A 2011-ben Jonathan Snook által kifejlesztett SMACSS (méretezhető és moduláris architektúra a CSS-hez) az öt különböző típusú szabályt azonosítja. Ezek alapján az osztálynevek és a nyilvántartási rendszer jön létre.

“Az SMACSS egy módja annak, hogy megvizsgálja a tervezési folyamatot, és hogy a merev keretrendszerek rugalmas gondolkodási folyamatba illeszkedjenek. - Jonathan Snook”

Az SMACSS 5 típusú stílusszabályt azonosít alap, elrendezés, modul, állapot, és téma.

• Az alapstílusok az alap HTML-címkékhez rendelt alapértelmezett stílusok

  , .

• Az elrendezési stílusok az oldal elrendezésének meghatározásához használt stílusok, például a kódolás, ahol a fejléc, a lábléc és az oldalsó menük fognak megjelenni.
• A modulstílusok egy modulhoz hasonlóak, mint a galéria vagy a diavetítés.
• Az állami stílusok olyan elemek kiemelésére szolgálnak, mint a rejtett vagy letiltott állapotok.
• A témát az oldal vizuális sémájának megváltoztatására használják.

A különböző stílusszabályok azonosíthatók az osztálynév elején, például az l-fejlécben (az elrendezéshez) vagy a t-fejléchez (témához). Ezeket a különböző típusú szabályokat is szervezhetjük külön fájlba és mappába.

A SMACSS előnyei:Jobb szervezett kód.

Az SMACSS hátrányai: Nincs.

Van egy ingyenes online könyv, amit olvashat az SMACSS-ről, vagy megvásárolhatja az ebook verzióját, hogy többet tanuljon.

Következtetés

A fenti CSS módszerek rendszerbe fognak adni kezelje és optimalizálja CSS kódjait. Ezek kombinálhatók, például az OOCSS-SMACSS vagy az OOCSS-BEM, vagy a BEM-SAMCSS, hogy megfeleljenek az Ön igényeinek.

Vannak olyan keretek és könyvtárak is, amelyekben a CSS-módszerek végrehajtására szolgáló automatizált rendszer, például:

• OOCSS keretrendszer
• BEM eszközök
• Szerves CSS-keretrendszer (atomi koncepció).