A fordított háromszög architektúrája: a nagy CSS-projektek kezelése

Van egy kis feladat, amellyel megoldhat néhány apró stílusproblémát itt-ott. Megtalálta a helyes CSS-szabályokat a javítás alkalmazásához, így gyorsan ledobja ezeket a szabályokat a CSS-fájl aljára, kitolja a módosításokat, majd továbbléphet fontosabb dolgokkal.

Idővel ez néhányszor megtörténik, és még mielőtt tudnád, a CSS-fájlod „alja” néhány száz soros kódból áll, amelyet senki sem ért és senki sem mer eltávolítani, mivel ez elkerülhetetlenül összetörni fog.

Felismeri ezt a forgatókönyvet, mert vagy maga tette ezt, vagy látta, hogy kollégák csinálják ezt? Nos, olvassa el és ígéri meg magának, hogy soha többé nem fogja ezt megtenni, mert itt van egy egyszerűbb módszer a CSS-fájlok kezelésére.

Bemutatjuk az invertált háromszög architektúrát

Az invertált háromszög architektúra, más néven ITCSS, egy módszertan a CSS legeredményesebb és legkevésbé pazarló módon történő strukturálására.

Az ITCSS-t először Harry Roberts vezette be, és legjobban egy fejjel lefelé fordított, réteges háromszöggel lehet megjeleníteni. Az ITCSS logikus és ésszerű módon definiálja a projekt megosztott CSS-szabályait, ugyanakkor szilárd beágyazási és leválasztási szintet biztosít, amely megakadályozza, hogy a nem megosztott CSS-szabályok egymásba ne avatkozzanak.

Az ITCSS nagyon rugalmas, mivel nem kényszeríti Önt olyan konkrét elnevezési módszerek használatára, mint az SMACCS, az OOCSS vagy a BEM.

Az elvek

Az ITCSS úgy működik, hogy az egész CSS-projektet a következő három elv szerint strukturálja:

  1. Általános a kifejezett

    A legáltalánosabb, alacsony szintű, mindenre kiterjedő stílusokkal kezdjük. Ezek lehetnek betűtípus-beállítások vagy például színváltozók, ha SCSS-t használ.

  2. Alacsony vagy magas specificitás

    A legalacsonyabb specificitás-választók a projekt elején jelennek meg. A specifitás folyamatosan növekszik. Így elkerülhetjük a specifitáskonfliktusokat és a specifikusság felülbírálását !important.

  3. Nagy horderejű lokalizált

    A projektünk elején található választók sok DOM-elemre hatással vannak, például a böngészője visszaállítja a stílusokat, míg később a projektünk későbbi választói nagyon lokalizálódnak, például az egyes komponensek egyedi stílusai.

A háromszög rétegek

A fenti elvek betartása azt jelenti, hogy rétegekre kell bontanunk a CSS-t. Minden réteget olyan helyen kell bevezetni, amely megfelel az egyes kritériumoknak.

Gyakran előfordul, hogy a CSS-t például tipográfiai stílusok, űrlapstílusok és egy adott komponens stílusai szerint csoportosítják. Ezeket a csoportokat gyakran nem a leghatékonyabb sorrendben importálják, és ez öröklési vagy sajátossági problémákat okoz.

Az ITCSS-ben minden réteg logikai haladás az utolsótól. Növeli a specifitást, szűkíti az elérhetőséget és egyértelműbbé válik. Ez azt jelenti, hogy a CSS-t könnyebben méretezhetjük, mivel csak kiegészítjük a már meglévőkkel, és nem írjuk felül a korábban írtakat.

A struktúra követésének másik nagy előnye, hogy mindenki mindig tudja, hol találhat bizonyos CSS-szabályokat, amint logikusan vannak elhelyezve. Ezzel elkerülhető, hogy az emberek a fájl aljára dobják CSS-szabályaikat.

Harry Roberts, az ITCSS megalkotója hét réteget fektetett le. A következőképpen rendelte meg őket:

  1. Beállítások

    Ha olyan előfeldolgozót használ, mint az SCSS, akkor ez a kiindulópont. Ebben a rétegben definiálja a változókat.

  2. Eszközök

    Ez a réteg felhasználható szerszámaihoz. Gondoljon azokra a keverékekre és funkciókra, amelyeknek globálisan elérhetőnek kell lenniük. Ha nem kell, csak helyezze őket oda, ahol szükség van rájuk.

  3. Generikus

    Ebben a rétegben elhelyezzük az összes nagyon magas szintű, messzemenő stílust. Ez a réteg gyakran megegyezik az összes projektjén, mivel olyan dolgokat tartalmaz, mint a Normalize.css, a CSS visszaállítások és például a doboz méretezési szabályok.

  4. Elemek

    Ebben a rétegben a csupasz, osztályozatlan HTML elemek stílusait helyezzük el. Elgondolkodhat például a lebegő horgonyok aláhúzásán vagy a különböző fejlécek betűméretén.

  5. Tárgyak

    Az objektumrétegben stilizáljuk azokat az első elemeket, amelyek osztályokkal rendelkeznek. Gondoljon a tartályaira, csomagolóanyagaira vagy soraira. Itt határozhatja meg a rácsot is.

  6. Alkatrészek

    A komponensréteg az a hely, ahol a legtöbb stílusmágia megtörténik, mivel itt fogja kialakítani a felhasználói felület elemeit. Az olyan komponens alapú keretrendszerekben, mint az Angular, a Vue vagy a React, ez az a réteg, ahová az egyes komponensek stílusát importálja, ha azokat nem közvetlenül tartalmazza az összetevő.

  7. Trumps

    A trumps réteg a piszkos réteg. Még akkor is, ha a stílusát az ITCSS alapelvei szerint strukturálja, előfordulhat, hogy használnia !importantkell például néhány harmadik fél stílusának felülbírálását. Tegye ezt ebben a rétegben, mivel ez a legspecifikusabb, lokális és explicit réteg.

A végeredmény

Most, hogy elmagyaráztam a rétegeket, itt az ideje megvizsgálni, hogyan nézhet ki egy egyszerű végeredmény.

// [email protected] "globals";@import "branding";
// [email protected] "mixins";
// [email protected] "normalize";
// [email protected] "fonts";@import "form";
// [email protected] "grid";@import "wrappers";
// [email protected] "header";@import "sidebar";@import "carousel";@import "card";
// [email protected] "overrides";

Következtetés

Ahogy az ITCSS nem kényszerít bizonyos elnevezési konvenciók használatára, nem kényszeríti az összes réteg használatára. Használjon olyan rétegstruktúrát, amely az Ön számára a legjobban megfelel, miközben fenntartja az általános ITCSS-elveket a kifejezett, alacsony vagy magas specifitású és messzemenő lokalizált felé.

Ha észreveszi, hogy felül kell írnia a stílusokat, az szinte mindig azt jelenti, hogy a struktúrája nem hatékony. Ha szeretne többet megtudni erről, javasoljuk, hogy nézze meg ezt a videót:

Állást keres Amszterdamban?

Dolgozom a Sytac-nél, mint Senior front-end fejlesztő, és olyan közép- / vezető fejlesztőket keresünk, akik az Angular, a React, a Java vagy a Scala szakterületre szakosodtak. A Sytac egy ambiciózus tanácsadó vállalat Hollandiában, amely számos elismert vállalatnál dolgozik a banki, légitársasági, kormányzati és kiskereskedelmi szektorban.

Ha úgy gondolja, hogy mire van szüksége a legjobb munkavégzéshez, küldjön egy e-mailt a luuk [dot] gruijs [at] sytac [dot] io e-mail címre, és szívesen elmondanék még valamit.