Bevezetés az ITCSS webes fejlesztőkbe

Van egy csomó nagyszerű módszer CSS kód strukturálása, és mindegyikük különböző módon működik. A legnépszerűbbek az OOCSS és az SMACSS, de van egy kevésbé ismert módszer is ITCSS (fordított háromszög CSS) készítette Harry Roberts.

Ez nem könyvtár vagy keret, hanem egy kódolási módszertan ez méretezhető és könnyen kezelhető. Az ITCSS előnyei a egyszerű kódrendszer kisebb fájlméretekre és a CSS architektúrájának jobb megértésére.

Az ITCSS nem mindenkinek szól, de professzionális módja annak, hogy a kódolási folyamat során világosan megnézhesse a stíluslapokat. Menjünk be az ITCSS mögötti fogalmakba, és nézzük meg, hogyan lehet őket alkalmazni a webes projektekben.

Mi az ITCSS?

A CSS megszervezésének modern módjai gyakran visszaesnek modularizálást vagy CSS objektumok absztrakt ötletek felépítése.

Az Inverted Triangle CSS új ötlete a rétegelt módja a CSS-tulajdonságok felosztásának sajátosságaik és fontosságuk alapján. Ez egy kevésbé ismert módszer, mint az SMACSS és az OOCSS - bár mindkettő kombinálható az ITCSS-szel.

Mivel az ITCSS többnyire saját tulajdonú, nincs részletes szabálykönyv a használatáról. Csak a meghatározott elvek halmaza rendelkezésünkre áll. A szerző róluk szól az alábbi videóban.

Alapértelmezés szerint az ITCSS ugyanazokat az elveket használja, mint az OOCSS nagyobb elválasztással specifitáson alapul. Tehát ha már ismeri az OOCSS-t, tekintse meg ezt egyedülállónak alternatív CSS architektúra megpróbálni.

Íme néhány az ITCSS használatának legnagyobb előnyei:

• Az oldalobjektumok saját CSS / SCSS fájljaikra oszthatók újrahasználhatóság. Egyszerű másolni / beilleszteni és kiterjeszteni minden objektumot más projektekbe.
• A specifitás mélysége tőled függ.
• Van nincs beállított mappaszerkezet, és nem szükséges az előfeldolgozó eszközök használata.
• A más módszerekből, például a CSS modulokból származó fogalmak egyesíthetők a hozzon létre saját hibrid munkafolyamatot.

Az ITCSS rendszer

Nézzük meg, hogyan működik az inverz háromszögmodell a következő ábra a Lubos Kmetko posztjáról.

Az invertált háromszög sík tetejétől az alsó végig a csúcsig terjedő irányú áramlás szimbolizál egy a specifitás növekedése. Ez összpontosítson a kevésbé specifikusra megkönnyíti az osztályok ismételt használatát egy webhelyen többször.

A háromszög minden alszakaszát külön fájlnak vagy fájlcsoportnak tekinthetjük, bár nem kell kódot írni ilyen módon. A Sass / Less felhasználók számára érthetőbb az import funkció miatt. Gondoljunk csak az egyes részekre mint módszertanra újrafelhasználható CSS-kód felosztása és megszervezése.

Nézzük gyorsan az invertált háromszög minden egyes szakasza a csúcsról lefelé haladva.

• Beállítások - Előfeldolgozó változók és módszerek (nincs tényleges CSS kimenet)
• Eszközök - Keverékek és funkciók (nincs tényleges CSS kimenet)
• Generikus - A CSS visszaállíthatja a következőket: Eric Meyer visszaállítása, Normalize.css vagy saját kódja
• Elements - Egyetlen HTML elem szelektorok osztály nélkül
• tárgyak - Az OOCSS módszertanát követő oldalszerkezet osztályai
• Alkatrészek - Esztétikai osztályok bármilyen és minden oldalelem kialakításához (gyakran kombinálva az objektumosztályok szerkezetével)
• Trumps - A legkülönlegesebb stílusok a háromszögben bármi mást felülírni

Az invertált háromszög minden rétege lehet az Ön igényeihez igazítva. Tehát ha nem használ CSS előfeldolgozót, akkor nem kell a Beállítások vagy az Eszközök rétegek.

Nyugodtan értelmezheti az egyes alfejezeteket, ahogy látja. Például, Jordan Koschei elmagyarázza, hogyan kombinálta a struktúrát és az esztétikát az objektumosztályokba, és nagyon keveset hagyott az Alkotóelemek részben.

Az ITCSS-nek van nem nehéz és gyors szabályok amit követned kell. Nincs ITCSS-megfelelőségi ellenőrző, és senki sem sikoltozik rád, hogy enyhén megváltoztassa ezt a modellt.

Bár az ITCSS alkotója, Harry Roberts érdekelte, hogy a saját felhasználási módjait belső felhasználásra bízza, megtalálható egy az ITCSS nyílt forráskódú példája ebben a GitHub repóban. Ezt a CSS varázsló számlája adja, amely Harry Roberts személyes oldala.

BEM + IT = BEMIT elnevezés

Az egyik legnépszerűbb CSS elnevezési rendszer a BEM. Ez a Block-Element-Modifier-t jelenti, és egy nagyon speciális szintaxist követ.

A BEM minden egyes eleme a CSS osztályok elnevezési konvencióját írja le:

• Blocks az egyes elemek osztályai, amelyek reprodukálhatók és önállóak.
• Elements mindig egy blokk része
• módosítók mindig módosítson egy blokkot vagy elemet, hogy kissé megváltoztassa a megjelenését (be / ki, aktív / inaktív, fix, statikus, kiemelés / semleges).

BEMIT az elnevezési egyezmény elfogadta az ITCSS, amely ötleteket kölcsönöz a BEM-nek, miközben új ötleteket valósít meg az ITCSS segítségével.

A BEM szintaxis nagyon specifikus szabályokat határoz meg. Az alábbiakban egy minta látható a BEM weboldaláról:

. .form - téma-xmas  .form - egyszerű  .form__input  .form__submit  .form__submit - letiltva  

A blokkok nevei szétválasztás nélkül vannak, vagy a neveket elválasztja egy kötőjel vagy egy aláhúzás. Az elemek két aláhúzást használnak, és az adott blokknak megfelelő belső elemeket írnak le. A módosítók ugyanúgy működnek, de két azonosítót használnak az azonosításhoz.

Harry mélyebben beleolvad a BEMIT-be ebben a blogbejegyzésben. Leírása nagyon tömör, és azt mutatja, hogy az ITCSS valódi jellege játszani barátságos más CSS módszertanokkal.

Harry meghatározza névterek objektumok számára megjelennek az egyes főosztálynevek előtagjai. Megoszlanak o- objektumokhoz, c- komponensekre, és u- segédprogramokhoz (mint például a törlési vagy szöveges központosítás).

Íme néhány példakód, ami képviseli tipikus BEMIT elnevezési egyezmények.

  
... 
 
 

Azt is javasolja, hogy használja a @ a média stílusain alapuló osztályok utótagja. Így a .o-media az osztály megváltozhat .o-media @ lg nagy képernyők, és .o-media @ md közepes méretű képernyőkhöz.

Személy szerint úgy gondolom, hogy a további utótagok túlságosan összeomlott az alapvető webes projektekhez. Azt hiszem, a legtöbb fejlesztő inkább a közös média lekérdezéseket használja, és az osztályokat átírja különböző töréspontokon. De nem mondhatom, hogy a módszer helyes vagy rossz, és bárki külön-külön eldöntheti, hogy akar-e használni a BEMIT-t vagy sem.

Nagyon ajánlom, hogy olvassa el ezt az intro BEMIT cikket, hogy többet megtudjon arról, hogy miért bővítette az ITCSS BEM-t, és hogyan szeretné megnevezni a CSS osztályait.

Az ITCSS összefoglalható szervezeti módszer írásra újrafelhasználható és méretezhető CSS. A BEM a preferált névszintaxis és a BEMIT kiterjeszti ezt a munkára a névterek pontosabb és felismerhetőbb kóddal.

Sokat kell tanulni, és ha új vagy a CSS-nél, akkor ez egy nehéz koncepció lesz. De ha hajlandó megtanulni, biztos vagyok benne, hogy meglepődni fog az ITCSS-kód karcsú jellege miatt.

Csomagolás

A front-end fejlesztők mindig szeretnék optimalizálni a munkafolyamatukat. Az ITCSS egy újabb módszer, amely hozzájárulhat a bonyolult webhelyek strukturálásának javított módszeréhez.

A nehézség az, hogy megtanulják, hogyan működik a valós projektmunkában. Ha megvan a türelmed, és megtanulod a tanulást, akkor az ITCSS-t érdemes hozzáadni az eszköztárhoz. Annak ellenére, hogy nem találtam semmilyen hivatalos dokumentumot, még mindig sok erőforrás áll rendelkezésre az ITCSS-ről.

• Kezelje a nagyszabású webprojekteket az új CSS architektúrával ITCSS (Creativebloq.com)
• CSS projektek kezelése az ITCSS - prezentációs diákokkal (Speakerdeck.com)
• CSS projektek ITCSS-el (1 órás videó bemutató)
• ITCSS - Érdekes módja a nagyszabású projektek megszervezésének (Css-tricks.com)

(Cover photo via speakerdeck.com)