A jól skálázható, következetes és olvasható CSS megírása kihívást jelent. Különösen akkor, ha a stíluslapok egyre nagyobbak, összetettebbek és nehezebben karbantarthatók. A fejlesztők rendelkezésére álló eszközök a jobb CSS megírásához az előfeldolgozók. Az előfeldolgozó olyan program, amely az egyik típusú adatot átveszi és átalakítja egy másik típusú adattá, és esetünkben a CSS előfeldolgozók olyan előfeldolgozó nyelvek, amelyeket CSS-be fordítanak. Sok CSS előfeldolgozó létezik front-end fejlesztők ajánlunk és használunk, de ebben a cikkben Sass-ra koncentrálunk. Lássuk mit Sass felajánlja , miért előnyösebb választás a többi CSS előfeldolgozóval szemben, és hogyan lehet a legjobban használni.
Mi a Sass és miért érdemes használni?
Azok számára, akik nem tudják, mi a Sass, a legjobb kiindulópont, ha meglátogatják a hivatalos Sass weboldal . A Sass a Syntactically Awesome StyleSheets rövidítése, és a CSS kiterjesztése, amely erőt és eleganciát ad az alapnyelvhez.
A Sass (Syntactically Awesome StyleSheets) segítségével a CSS kódja is félelmetes lesz. Csipog
A Sass CSS előfeldolgozó, sok hatékony funkcióval. A legfigyelemreméltóbb jellemzők változók , kiterjed , és keverékek .
A változók olyan információkat tárolnak, amelyek később újra felhasználhatók, például a színek vagy más általánosan használt értékek. A kiterjesztés segít olyan „osztályok” létrehozásában, amelyek lehetővé teszik a szabályok öröklődését. Mixins, úgy gondolhat, mint a „funkció”. A Sassnak más elképesztő tulajdonságai is vannak a többi előfeldolgozóval összehasonlítva, például a logikai utasítások (feltételes és ciklusos) használata, az egyedi függvények, az integráció más könyvtárakkal, például Iránytű , és még sok más. Ezek a funkciók önmagukban segíthetnek Önnek és csapatának abban, hogy produktívabbak legyenek, és hogy végül jobb CSS-t írhassanak.
Miért van szükség CSS stílus útmutatóra
Sajnos még az előfeldolgozók sem tudnak mindent kijavítani, és segítenek a jó CSS-kód megírásában. Minden fejlesztő előtt álló probléma az, hogy a jelenlegi webalkalmazások egyre nagyobbak. Ezért a kódnak skálázhatónak és olvashatónak kell lennie, és kerülni kell spagetti kód és fel nem használt sorai. Az említett problémák elkerülése érdekében valamilyen szabványra van szükség a csapat számára a mindennapi munkában. Mi az a spagetti kód, és hogyan történik? A spagetti kód a rossz, lassú, ismétlődő és olvashatatlan kód neve. Amikor egy csapat meghatározó irányelvek vagy szabványok nélkül ír nagy alkalmazásokat, minden fejlesztő megírja, mire van szüksége és hogyan akarja. Amikor a fejlesztők sok hibajavítást, gyorsjavítást és javítást írnak, hajlamosak olyan kódot írni, amely megoldja a problémát, de nincs idejük a legjobb módon megírni a kódot. Ezekben a helyzetekben nagyon megszokott, hogy sok olyan CSS-sor kerül a végén, amelyeket már nem használnak az alkalmazás egyetlen szektorában sem. A fejlesztőknek nincs elegendő idejük a kód megtisztítására, és kénytelenek a lehető leggyorsabban közzétenni a javítást. Egy másik ismétlődő helyzet az, hogy a meghibásodott dolgok gyors kijavításához a fejlesztők sok !important -t használnak, ami nagyon hacker kódot eredményez, amelyet nehéz fenntartani, sok váratlan viselkedést eredményez, és később újra kell dolgozni. Mint már említettük, a kód növekedésével a helyzet csak rosszabbá válik.
A cikk célja a szabályok, tippek és bevált gyakorlatok megosztása a jobb Sass megírásához. A Sass-tippek és bevált gyakorlatok összesítése felhasználható Sass-stílusú útmutatóként. Ez a stílus útmutató segít a fejlesztőknek a fent említett helyzetek elkerülésében. A szabályok a könnyebb hivatkozás érdekében logikai szegmensekbe vannak csoportosítva, de végül el kell fogadnia és be kell tartania mindet. Vagy legalábbis a legtöbbjük.
Stílus útmutató
Az ebben a stílus útmutatóban szereplő szabályok és bevált gyakorlatok a sok csapattal való együttműködés tapasztalatai alapján kerülnek elfogadásra. Néhányuk tévedésből származik próbáról, másokat pedig néhány olyan népszerű megközelítés ihletett, mint a BEM. Egyes szabályok esetében nincs konkrét ok, hogy miért és hogyan állították be őket. Néha elegendő a múlt tapasztalata az egyetlen ok. Például annak biztosítása érdekében, hogy a kód olvasható legyen, fontos, hogy minden fejlesztő ugyanúgy írja a kódot, ezért az a szabály, hogy a zárójelek közé ne tegyen szóközt. Vitatkozhatunk azzal, hogy jobb-e beilleszteni a zárójelek közötti teret, vagy sem. Ha úgy gondolja, hogy jobban néz ki, ha a zárójelek között szóköz van, állítsa be ezt a stílus útmutatót és szabályokat a saját igényei szerint. Végül a stílusútmutató fő célja a szabályok meghatározása és a fejlesztési folyamat szabványosabbá tétele.
Általános CSS-szabályok
Az általános szabályokat mindig be kell tartani. Leginkább arra összpontosítanak, hogy miként kell formázni a Sass kódot, hogy következetes és olvasható legyen a kód:
- Behúzáshoz használja a szóközöket a fülek helyett. A legjobb gyakorlat 2 szóköz használata. Ezzel a lehetőséggel elindíthatja saját szent háborúját, és meghatározhatja saját szabályát, és használhat tabulátorokat vagy szóközöket, vagy bármit, ami a legjobban megfelel. Csak az a fontos, hogy meghatározzon egy szabályt, és kövesse azt, miközben következetes.
- Helyezzen el egy üres sort az egyes állítások között. Ezáltal a kód emberileg olvashatóbbá válik, és a kódot emberek írják, igaz?
- Használjon soronként egy választót, így:
selector1, selector2 { } - A zárójelek közé ne tegyen szóközt.
selector { @include mixin1($size: 4, $color: red); } - Használjon egyetlen idézőjelet a karakterláncok és URL-ek csatolásához:
selector { font-family: ‘Roboto’, serif; } - Minden szabály befejezése pontosvesszővel szóköz nélkül:
selector { margin: 10px; } A választókra vonatkozó szabályok
Ezután egy sor szabályt követünk, amelyet a szelektorokkal való kapcsolattartás során használunk:
- Kerülje az azonosító választók használatát. Az azonosítók túl specifikusak, és többnyire JavaScript-műveletekhez használják őket.
- Kerülje a
!importantHa ezt a szabályt kell használnia, ez azt jelenti, hogy valami általában nem stimmel a CSS-szabályaival, és hogy a CSS-je nincs megfelelően felépítve. CSS sok!important-val A szabályokkal könnyen vissza lehet élni, és rendetlenek és nehezen karbantartható CSS-kódok kerülnek a végén. - Ne használja a gyermekválasztót. Ennek a szabálynak ugyanaz az érvelése, mint az azonosítójának. A gyermekválasztók túl specifikusak, és szorosan kapcsolódnak a HTML-struktúrához.
Ha sokat használ! A CSS-ben, akkor rosszul teszi. Csipog
Tartsa rendben a Sass szabályait
Fontos, hogy konzisztens maradjon a kód. Az egyik szabály az, hogy be kell tartania a szabályok sorrendjét. Így más fejlesztők sokkal megértőbb módon olvashatják el a kódot, és kevesebb időt töltenek eligazodásukkal. Itt van a javasolt sorrend:
- Használja a
@extendelső. Ez először tudatta veled, hogy ez az osztály máshonnan örököl szabályokat. - Használja a
@includekövetkező. A mixek és a funkciók tetején való elhelyezése jó, és lehetővé teszi, hogy megtudja, mit fog felülírni (ha szükséges). - Most megírhatja a szokásos CSS osztály- vagy elemszabályokat.
- Helyezzen beágyazott álosztályokat és álelemeket bármely más elem elé.
- Végül írjon más beágyazott választókat, például a következő példában:
.homepage { @extend page; @include border-radius(5px); margin-left: 5px; &:after{ content: ‘’; } a { } ul { } } Néhány elnevezési szokás
A stíluskönyv egy részének elnevezése a két létezőn alapul JÓ és SMACSS a fejlesztők körében népszerűvé vált elnevezési konvenciók. A BEM jelentése Block, Element, Modifier. A YANDEX csapata fejlesztette ki, és a BEM ötlete az volt, hogy segítsen a fejlesztőknek megérteni a HTML és a CSS kapcsolatát a projektben. Az SMACSS viszont a CSS méretezhető és moduláris architektúrája. Útmutató a CSS felépítéséhez a karbantarthatóság lehetővé tétele érdekében.
Azok által inspirálva, a néveljárási szabályaink a következők:
- Minden elemtípushoz használjon előtagot. Előtagolja a blokkokat, például: layout (
l-), modulok (m-) és állapotok (is-). - Használjon két aláhúzást a gyermekelemekhez minden blokkhoz:
.m-tab__icon {} - Használjon két kötőjelet a módosítókhoz minden blokkhoz:
.m-tab--borderless {} Változók
Használjon változókat. Kezdje az általánosabb és globális változókkal, például a színekkel, és hozzon létre egy külön fájlt számukra _colors.scss Ha azt veszi észre, hogy többször is megismétel valamilyen értéket a stíluslap felett, akkor hozzon létre egy új változót ehhez az értékhez. Kérem SZÁRAZ . Hálás lesz, ha meg akarja változtatni ezt az értéket, és amikor csak egy helyen kell megváltoztatnia.
Használjon kötőjelet a változók megnevezéséhez:
$red : #f44336; $secondary-red :#ebccd1; Média lekérdezések
A Sass segítségével írhatja a média lekérdezéseket elem lekérdezésekként. A legtöbb fejlesztő külön fájlba vagy a szabályzataink aljára írja a média lekérdezéseket, de ez nem ajánlott. A Sass segítségével média lekérdezések beágyazásával írhat például a következő példához:
// ScSS .m-block { &:after { @include breakpoint(tablet){ content: ''; width: 100%; } } } Ez létrehoz egy ilyen CSS-t:
ingatlanalapok típusai
// Generated CSS @media screen and (min-width: 767px) { .m-block:after { content: ''; width: 100%; } } Ez a beágyazott média lekérdezési szabály lehetővé teszi, hogy nagyon világosan megismerje, hogy mely szabályokat írja felül, amint az a Sass-kódrészletből is kiderül, ahol megnevezett média lekérdezéseket használnak.
Megnevezett média lekérdezések létrehozásához hozza létre a keveréket a következőképpen:
@mixin breakpoint($point) { @if $point == tablet { @media (min-width: 768px) and (max-width: 1024px) { @content; } } @else if $point == phone { @media (max-width: 767px) { @content; } } @else if $point == desktop { @media (min-width: 1025px) { @content; } } } A médiakérdések elnevezéséről a következő cikkekben olvashat bővebben: Média lekérdezések elnevezése és Írjon jobb média lekérdezéseket a Sass segítségével .
Egyéb szempontok
Végül íme néhány további szempont, amelyet érdemes szem előtt tartania és követnie:
- Soha ne írjon szállító előtagokat. Használat autoprefixer helyette.
- Legfeljebb három mély beágyazott szabályt használjon. Háromnál több beágyazott szint esetén a kód nehezen olvasható, és talán gagyi választót írsz. Végül CSS-kódot ír a HTML-hez való párosításhoz.
.class1 { .class2 { li { //last rules } } } - Ne írjon 50-nél több beágyazott kódot: vagy jobb, ha X-nél több beágyazott kódot nem ír. Állítsa be saját X-jét, de az 50 jó korlátnak tűnik. Ha túllépi ezt a korlátot, akkor a kódblokk valószínűleg nem fér bele a szövegszerkesztő ablakába.
- Írjon egy fő fájlt, ahová az összes blokkját, részét és konfigurációját importálni fogja.
- Először szállítói és globális függőségeket importál, majd szerzői függőségeket, majd elrendezéseket, mintákat, végül pedig az alkatrészeket és blokkokat importálja. Ez azért fontos, hogy elkerüljük a vegyes importokat és a szabályok felülírását, mert a szállítói és a globális szabályokat nem tudjuk kezelni.
- Ne légy szégyenlős, és törd be a kódot a lehető legtöbb fájlban.
Következtetés
A stílusismertető ötlete az, hogy tanácsokat adjon neked a Sass-kód írásmódjának fejlesztésével kapcsolatban. Kérjük, ne feledje, hogy még akkor is, ha nem használja a Sass szolgáltatást, a stílus útmutatóban található tippek és szabályok is alkalmazhatók, és ajánlott betartani, ha Vanilla CSS-t vagy más előfeldolgozót használ. Ismételten, ha nem ért egyet egyik szabálysal sem, akkor változtassa meg a szabályt a gondolkodásmódjának megfelelően. Végül Önön és csapatán múlik, hogy adaptálja-e ezt a stílus útmutatót, használ-e valamilyen más stílus útmutatót, vagy létrehoz egy teljesen újat. Csak határozza meg az útmutatót, és kezdjen el írni egy fantasztikus kódot.
Összefüggő: * SMACSS felfedezése: skálázható és moduláris architektúra a CSS számára *
