Hogyan kell szőrözni a száját?
Linting stílusú fájlok. Tehát kevesen csinálják. Azonban sok más embernek ellenőriznie kell a stílusfájlokat, különösen a heterogén csapatokban, ahol sokan kódolják a kódot.
Ebben a cikkben fogok beszélni, hogy miért van szükségünk szösz a stílus fájl, és hogyan szőtt stíluslap fájlt a szerelés, a tiszta CSS, és Sass.
belépés
Mi a linting?
Miért kell a CSS-t rendbe hozni?
A stílusfájlok összekapcsolására számos ok van. A szőrösség megőrzi a kód egységességét, hibakódot mutat a kódbázisban, segíti a felesleges kód eltávolítását, és segít a veszélyek elkerülésében a programozók lustasága miatt.
Nézzünk néhány példát.
A Linters nagyon jó a stilisztikai hibák elkapására, amit a fenti kódban láttál. Bár a stilisztikai szabályok, és nem a legfontosabb a vonalzónában, segítenek a kód egységesítésében. Ráadásul nem tudok rólad, de a két fenti hiba az én gyenge pontja.
Ők ugyanolyan jóak, mint a hibás nyomatok (téves nyomatok) fogása, mint a rossz színű példában. Az ilyen típusú hibák megszakíthatják az oldal megjelenését, ha nem kapják meg őket.
Manapság a legtöbb CSS3 tulajdonság már nincs szükség előtagokra. A szőrösség lehetővé teszi, hogy megtalálja a felesleges előtagokat, és törölje az elavult kódot. Bolyhosodé előtagokat különösen hasznos tandem Autoprefixer - ez lehetővé teszi, hogy távolítsa el az összes előtagok a forráskódot, és add meg a szükséges, a beállítástól függően Autoprefixer tekintve a közönséget.
Az ismétlődő tulajdonságok gyakran súlyos hibákat rejtenek. Mi a teendő, ha a fejlesztő átmenetet kívánt az opacitás és a háttérszín tulajdonságok tekintetében? Ebben az esetben az átlátszatlanság átmeneti hatása elvész. A Linging megmutatja ezt a hibát.
Elég meggyőző? Ha nem, folytassa az olvasást.
Bemutatjuk a Stylelintet
A Stylelint egy erőteljes, modern CSS vonalvezetés, amely segít a kódstílus egységességének érvényesítésében és a stíluslapok hibáinak elkerülésében.
Linter a PostCSS-n alapul. így érti minden olyan szintaxist, amely képes a PostCSS elemzésére, beleértve az SCSS (és a Less) kifejezést is.
A PostCSS egy eszköz a stílusok konvertálásához a JS pluginek használatával. Ezek a pluginok ellenőrizhetik a CSS-t, hozzáadhatják a változókat és szennyeződéseket a nyelvhez, lefedik a CSS specifikáció tervezetét, beillesztik a képeket a base64-en keresztül.
A PostCSS és a Stylelint a mi következő stílusunkban szeretnénk összekapcsolni stílusainkat.
Stylelint konfigurációs fájlokat
Stylelint szépsége az, hogy nem hordoz magának egy stílust. A szabálykészleteket a semmiből hozza létre, így lehet olyan arrogáns és makacs, mint amennyit csak akar. Nem kell időt töltenie arra, hogy letiltja a felesleges szabályokat az induláshoz.
A Stylelint szabályok dokumentációja jó kiindulási pont. Szintén használhatja a Stylelint szabvány beállításait. amelyek eléggé elgondoltak ahhoz, hogy azokat a projektjeikhez használhassák.
Egy kicsi fájllal kezdjük a legfontosabbakat. Személy szerint azt gondolom, hogy egy tiszta fájl használata jobb, mint a Stylelint parancs szabványos beállítási fájljának felülbírálása - jobb, ha hozzá szeretné adni a szükséges beállításokat, és nem tilthatja le a kiegészítő fájlt.
Ez így néz ki:
Azt javaslom, hogy alaposan tanulmányozza a Stylelint szabályainak leírását, és módosítsa, létrehozva az ideális konfigurációt a vonalzónához. Most állítsuk össze a gyülekezetünket ezekkel a szabályokkal.
Hogyan viselkedjen a CSS
Kezdjük a tiszta CSS-t. Meg fogsz lepődni, mennyire könnyű felállítani! A telepíteni kívánt eszközök: gulp-postcss. postcss-riporter. és stylelint. Tegyük meg.
És itt van a fájlt Gulp számára, hogy összeadja:
Nehéz volt? 50 sornyi kódot írtam, beleértve a vonalvezetés és a behozatal bevezetését. Egyébként győződjön meg róla, hogy megváltoztatta a forrásútvonalat a projektnek megfelelően!
És meredekebb, hogy csak egy sort kell változtatnia az SCSS támogatásának engedélyezéséhez. Csináljuk most ...
Hogyan viselni a Sasset?
A Linting SCSS fájlok rendkívül egyszerűek a PostCSS segítségével. Az egyetlen különbség a CSS és az SCSS között, hogy a PostCSS-nek tanítania kell a .scss szintaxisának megértését. és olyan egyszerű, mint a postcss-scss telepítése és a fenti feladat egy sorának módosítása.
Itt van a teljes fájl a Gulp számára, hogy lerázzon SCSS fájlokat:
Olyan egyszerű! És ez az! Most már mind a CSS, mind az SCSS fájlokat futtathatja.
A Stylelint bővítmények bővítése
A PostCSShez hasonlóan a Stylelint bővítményekkel bővül, ami valóban elképesztő!
Nézzünk egy kis példa, ahol foszlását segítségével javul az olvashatóság a kód, valamint segít rúgni a lusta fejlesztők, amikor megpróbálnak könnyen megkerülni elfogadott szabványainak CSS kódot a projektben.
Valódi példa: szikrázás a gyakorlatban
Projektvezető, aki szereti kódolni
Mi van ezzel a forgatókönyvvel? A projektmenedzser kezeli egy új webes alkalmazás kifejlesztését, és annak érdekében, hogy ne zavarja a fejlesztőket, maga határozza meg a kódot. Úgy döntött, hogy árnyékot ad a box összetevőhöz: ugorjon. és hozzáadja az állapotot: az összetevő gyermekcsomópontjaihoz való kapcsolattartásra.
Mi lehet rosszabb?
Itt van a kód, amelyet a menedzser hozzáad a projekthez:
A fészekválasztók Sassban rosszak! Használjuk a vonalzót!
A fészkelő kiválasztók szükségszerű gonoszak a Sass segítségével történő fejlesztés során; ez nagyon hasznos, ha helyesen használják, de ez az egyik módja annak, hogy a pokol specifikusságába utazjunk. ha bántalmazták. A fészkelés általában a fejlesztő lustaságának következménye, és ennek eredményeként olyan kódot kapunk, amelyet nehéz elolvasni és rosszul írni. Az első szabály : a lebegés 10 sor lehet a szülő komponens definíciója alatt, ezért nehéz megérteni, hogy mit jelent. Azonban még fontosabb, hogy a fészkelés egyáltalán nem szükséges.
Itt van a CSS, amelyre a fenti szabály kerül összeállításra:
Ha egy csapatban dolgoztam, és valaki ilyen kódot ajánlana fel, akkor nagyon komoly beszélgetést folytatna velem.
A következő fejlesztő, aki jön, és felül akarja állítani ezt a lépcsőzetes szabályt, problémái lesznek. Ennek tudatában azt tanácsolom Önnek, hogy tartózkodjon attól, hogy bármilyen költséget használjon, legalábbis ha nem tudja, mit csinál.
Szerencsére van egy plug-in erre! A Stylelint használatával telepíthetjük a stylelint-statement-max-nesting-depth plugint. és állítsa be a fészek maximális szintjét, hogy elkerülje a felesleges fészket.
És csak adja hozzá a következő kódot a scss-lint a mi Gulp fájl:
Azoknak a csapatoknak, akik tudják, mit csinálnak, a maximális fészekelési határértéket háromra állítanám. (Állítsa be az alábbiakban a tapasztalatlan csapatoknál)
A legfeljebb három fészkelési határértékkel a Stylelint arra kényszeríti a projektmenedzsert, hogy javítsa a kódot. A projektmenedzser meg fog menni, gondolkodni és visszajönni ezzel a kóddal:
A kód javított változata olvashatóbb, de még mindig nem illik. Még mindig van szükség a szelektorok fészkelésére! Linter tudja ezt, és arra kényszeríti a projektmenedzsert, hogy átgondolja a megvalósítását, hogy az összeállítás végigmenjen.
Most már jöttünk valamire! Most elfogadja a vonalzó, és a gyűlés el fog telni. A fenti kód nem rossz, de mindig jobb lehet! Ha nagyon kemény akarsz lenni. teljesen letilthatja a fészket, és csak a @ szabályokat hagyhatja el (például a @ media esetében). Ez arra kényszeríti a csapattagokat, beleértve a projektmenedzsereket is, hogy komolyan gondolják, mit írnak.
Kiváló! A gyülekezési stílusok nélkül, amelyek a kód refactorját tették - ez a veszélyes lustaság nem lett volna elkapva, és a kód minősége fokozatosan romlana.
Remélem most meggyőzöttem róla, hogy a lynting stílusok előnyös befektetés. Linting a barátod. A beruházás olcsó, de megvédi a csapatot a technikai adósságtól a rosszul írott kód formájában.
Jó módon, a barátom egy fejlesztő és tervező!
utószó
A Sass szerelvényt egy kattintással telepítheti
Szeretné használni a Sass lasing erejét, az általános gázmosó gázzal történő kezeléssel együtt, csak egy kis csomag telepítésével?
Azt hiszem. Van egy Slushie nevű szoftverprojektem. olvashat róla a blogomban.
Scotty Vernon (Scotty Vernon) a Wildflame Studios alkotója és rendezője. Olyan projektekkel dolgozott együtt, mint a BBC Sport, a BBC RD és mások. Mindig közel van a twitterhez, szereti a német sört, játszik, és néha ír a harmadik személyben.