Bevezetés a CCSS (komponens CSS), CSS

CCSS vagy komponens CSS. Ez az architektúra, amely egyszerűsíti az előállítását CSS nagy webes alkalmazások.

Nagy Web alkalmazások általában tartalmaznak egy csomó CSS ​​fájlok dolgozik különböző fejlesztők.

Az Advent egy ilyen nagy számú keretszabályok, iránymutatások, eszközök és módszerek (OOCSS, SMACSS, BEM, stb), a fejlesztők kell egy CSS építészet, amely biztosítani fogja a könnyű karbantartás, menedzsment és méretezés projektekben.

Mint mérnök felület, úgy vélem, hogy a web komponens alapú fejlesztés, ez az, amire szüksége van. Web Components egy sor szabályt, hogy a munka révén a W3C. Ezek lehetővé teszik számunkra, hogy lezárja a jelölésre és stílusokat, újrafelhasználható elemek HTML. Valóban zárt.

Ez azt jelenti, hogy meg kell gondolni a fejlesztési CSS-alapú összetevőket. Míg a böngésző gyártók végre ezeket a szabványokat, fel tudjuk használni a tokozása szoftver.

Nézzük meg, mi a CCSS vannak, és hogyan lehet felhasználni arra, hogy konfigurálja a CSS architektúra összetett internetes alkalmazásokat.

elemek CCSS

Az alábbiakban az alapvető elemek teljes egészében vagy módosított formában, hogy elérje az optimális konfigurációját architektúra CCSS.

SMACSS, ez hozta létre Jonathan Snook. és áll, skálázható és moduláris felépítésű CSS (skálázható architektúra befolyásoló és CSS). Inkább ez a stílus kalauz, mint a keret. További információ arról, hogyan használják a szerkezet CCSS. Olvasd el a cikket SMACSS.

BEM-ben alapította a fejlesztők Yandex. Ez áll a "Block", "Element", "módosító" ( "egység", "pont", "módosító"). Ez a módszer új megközelítést kínál a fejlesztés webes felületek. További információk a BEM megtalálható a kiváló cikkében Harry Roberts.

Sass - ez CSS szuper erőkre. Én nagyon ajánlom a nevét, de akkor is használhatja a kevesebb. További információ megtalálható a dokumentációban Sass.

Iránytű tartalmaz osztály definíciók; egy kiterjesztés Sass. Ez egy csomó további eszközök. Arra használják, hogy hozzon létre összeállítások szennyeződések és Sass.

Iránytű szennyeződések szinte mindig használható, amikor szükségünk van előtagokat. Ismét használata igen kívánatos, vagy a saját használhatja Bourbon.

elvek CCSS

Most nézzük meg az alapelveit CCSS.

komponens alapján

Létrehozása kis, független komponensek, amelyek felhasználhatók a különböző helyeken. Többször használható CSS ​​komponensek lehet elhelyezni különböző részein a DOM-fa, és nem igényel a használata csak bizonyos elemeket.

Ha szükséges, akkor kell használni kiegészítő elemek a HTML. hogy lehetővé teszik, hogy újra komponenst.

A modularitás és izolációs

Components kell minden szükséges egy bizonyos részét a felhasználói felület és a középpontjában egy elemet. Mindegyik komponenst kell különíteni, azaz, hogy függetlennek kell lennie a többi komponens.

Isolation még fontosabb, mint a lehetőséget kód újrafelhasználásának, mivel ismételt használata növelheti a függés és a kapcsolatok száma, hogy végül egyre kevesebb által ellenőrzött CSS.

Lehetőség elrendezés

Összeállításakor a CSS csökkenteni kell az időt meg kell írni a CSS. és ennek megfelelően több időre van szükségük, hogy módosítsa a HTML-osztályú elemeket, módosítsa azokat, illetve új stílusokat.

Mert minden fejlesztő sokkal könnyebb lesz CSS-kód blokkok designer „Lego”, mint hogy részt vegyenek a CSS háborúban. CSS osztályok építőkövei, hogy a használt rajzstílusok.

előreláthatóság

A kiszámíthatóság azt jelenti, hogy ha csinál CSS. Ön stílusa szabályok viselkednek, mint ahogy várnánk. Ez azért fontos, mert a nagy alkalmazások, amelyek sok oldalt. Kerülje a túlzottan bonyolult szelektor és az osztály nevét, mert lehet, hogy a CSS-kód kiszámíthatatlan.

dokumentálása

A legtöbb ember úgy gondolja, hogy a CSS nem magától értetődő. Tény, hogy ez általában nem így van! CSS elemek egyértelműen dokumentálni kell, hogy a leírásokat is részletesen kifejtette, hogy mit és hogyan kell használni.

könyvtár struktúra

Az alábbiakban a könnyebb olvashatóság egy példa a mappa struktúrát. Azt is írt egy példát CCSS beállítások adattár GitHubról:

Csak meg kell szerkeszteni / létrehozni fájlokat SCSS / mappa fa. felett. Ez megkönnyíti, hogy frissítse a külső könyvtár található ext / könyvtárba.

Számos alkalmazás támogatja a külső CSS -freymvorkami mint Bootstrap vagy Foundation. úgyhogy fel őket ebben a példában az ext / könyvtárba. Bár természetesen lehet jó, ha minden CSS -Codes írásbeli semmiből; Azonban, akkor a fent leírt módszerrel.

Folder alkatrészek / kiválóan használható AngularJS. de lehet testre más keretek vagy alkalmazások. További részleteket fogok beszélni erről a „Architecture” című részt.

Oldal HTML. beleértve az összes fájlt a mappában .css stílus /. tartalmazza az összes összeállított CSS-kód (a Grunt, Compass, stb.) Soha nem változtatja őket.

Nevek Egyezmény - Egyszerűsített BEM

• u-className - globális alap osztályok / segédprogram osztályokba;
• img-className - globális kép osztályokba;
• animálni-className - a globális animációs osztályokba;
• ComponentName - szabványos alkatrészek (B);
• ComponentName-elementName - alkotóelemei (E);
• ComponentName - modifierName - komponens módosító (M).

Megjegyzés: a stílus nevét UpperCamelCase alkatrészeket. a fő elem; Ez azt jelenti, hogy a felső része az alkatrész. Az elemek nevei és módosítók - elementName és modifierName. volt. Ne használjon kötőjelet (-), hogy külön az alkatrész nevét, hiszen kezdetét jelzi az elem / elemneveket.

Építészeti és Design

Nézzük meg az architektúra szerint épül az elvek a CCSS.

Grunt egy nagy eleme a futó feladatokat automatizálja számos rutin műveletek (például CSS vagy HTML ellenőrzés, válogatás).

Vannak más elemek feladatok futtatásához; Az ideális munkafolyamat tartalmaznia kell olyan elem, amely nyomon követi a fájlok, amelyek a fejlődési folyamat, és újrafordítani a CSS amikor módosítja.

fájlok szervezése

Vegyünk egy pillantást a mappa szerkezet, amely egy származéka SMACSS. Megjegyzés: a könyvtár ext /. amely tartalmazza az összes külső keretek (például Bootstrap). Több mint egy egyszerű módosítása és meghosszabbítása a változásokat kell tenni nincs benne, és a bázis / mappát.

alap / - az a hely, ahol tárolja a globális alaptípus az alkalmazás által használt egészére.
_base.scss - alaptípus csak szelektor elemekkel. Ezek egyfajta „CSS-kapcsolók”.
_base-classes.scss - az összes közüzemi osztályok használnak az egész alkalmazás különböző reprezentációk, komponensek és oldalak. Használt előtagja u- osztályban.
images.scss forrásaként használt SCSS összeállítás. Meg kell határoznia és beépíteni az összes kép helyszínen adat URI. /app/styles/images.css generált ezt a fájlt.
_animate.scss tartalmazza az összes osztály összes animációs alkalmazást.
_bootstrap-overrides.scss csak azokat a fájlokat, melyek megváltoztatták a keretet. Előfordul, hogy a kijelölt szintet szelektor a keret, olyan nagy, hogy felülírják igényel további választókat. Annak módosítása, hogy globálisan nem lehet végrehajtani keretében SCSS komponenst. Ehelyett minden globális változások mennek itt.

alkatrészek

A példában konfiguráció, közzétett GitHub. Azt, hogy az világosabb, hozzon létre egy külön mappába.

Ha az alkalmazás kicsi, akkor gyűjteni őket egy mappába. Minden alkatrész összhangban létrehozott módosított egyezmény BEM neveket. együtt használják CamelCase.

Ez adott nekem egy hatalmas plusz, mint stimulált többi csapat, hogy kövesse a szintaxis BEM. Lehetőség van arra is, hogy a félreértések elkerülése végett kihúzása során a használatát BEM jellegzetes stílusát, annak szimbólumok - - __ és generáló ezek az osztályok nevei module-name__child-name - módosító név!

Fontos az is, hogy az eljárás meghatározására CSS osztályok a komponens tükrözi képviseletét HTML. Ez megkönnyíti a szkennelés, kinevezése stílusok, szerkesztése és alkalmazása osztályok.

Végül jó, hogy van egy webes alkalmazás kiterjedt stílus kalauz, és kövesse az iránymutatás CSS és Sass (például megszünteti annak szükségességét, hogy @extend).

például CCSS

Lásd a minta kódot CSS beállításokat.

Itt egy példa komponens Sass:

Ezt a kódot összeállítani a következő CSS:

És a HTML tag lehet kinézni:

Használhat egyszerűsített BEM-szennyezést. amely erre a célra kell a referencia-választó egyszerűbb, mint @ a root.

A Sass 3.3+ együttműködni a BEM sokkal könnyebb lett, ami nekünk a lehetőséget, hogy támogassa és fenntartsa kódot, ami könnyen érthető.

A részvétel

A részvétel a fejlesztési anyagok közzétett GitHub. formájában kéri, hogy adjunk több példákkal, magyarázatokkal stb Ez nagyon hasznos lesz.

Fordítása a cikk «Bemutatkozik CCSS (Component CSS)» készítettünk egy csapat barátságos Web design projekt tól Z-ig