Hogyan lehet a CSS - A útmutatót visszacsatolni

Ha a kezelhető és optimalizált kódbázist szeretnénk, a CSS refaktorálásnak elengedhetetlen részét kell képeznie a front-end fejlesztési munkafolyamatnak. Amikor visszacsatoljuk a CSS-t, mi tisztítsuk meg és reorganizáljuk a meglévő kódunkat anélkül, hogy új funkciókat vagy hibákat rögzítenénk.

A refaktorálás segít megakadályozza a CSS robbanást, javítja a kód olvashatóságát és újrafelhasználhatóságát, és a CSS gyorsabbá és gyorsabbá teszi a végrehajtást.

A refakciót általában egy idő után kell elvégezni, mivel még a tömör és szervezett kódbázissal kezdődött projektek is előbb-utóbb elkezdenek elveszíteni az egyértelműségüket; következetesség, elavult szabályok és ismétlődő kódrészek jelennek meg; és elkezdjük felülírni a stílusokat, és egyre több hacket és megoldást alkalmazunk.

A legjobb módja annak, hogy a CSS-kód alapjaink karbantarthatóak legyenek, az az, hogy ragaszkodjunk hozzá “korai refaktor, gyakori refaktor” ökölszabály. Ebben a hozzászólásban megnézzük néhány tippet arról, hogyan tudunk hatékony CSS-refaktorezési folyamatot lefolytatni.

1. Végezze el a kezdeti auditot

Ahhoz, hogy jobb képet kapjunk arról, amire szükségünk van a visszacsatolásra, a legjobb egy átfogó ellenőrzéssel kezdje meg, hogy lássuk, mi van jelenleg.

Számos nagyszerű online eszköz segíthet nekünk ebben a törekvésben. A CSSDig egy hatékony Chrome-kiterjesztés, amely elemzi a webhely CSS-jét, és feltárja annak gyengeségeit, mint például a túlzottan specifikus választók vagy ismétlődő tulajdonságok.

A fel nem használt CSS a nem használt CSS szabályokat vizsgálja, míg a szöszeszközök, például a CSS Lint lehetővé teszik a kompatibilitás, a karbantarthatóság és egyéb problémák gyors megtalálását..

Fontos továbbá, hogy a kódot manuálisan ellenőrizzék az első ellenőrzés során, mivel az építészeti szinten sok probléma csak így lehetséges.

2. Kezelhető terv létrehozása

A munkakódok refaktorozása mindig ijesztő feladat, de megkönnyíthetjük a fájdalmat, ha egy tervet készítünk arról, hogy mit kell tennünk, fel kell szedni a refaktorozási folyamatot a kezelhető darabokra, és megvalósítható ütemtervet készíthetünk.

A CSS refactoring-ben fontos dolog, amit mindig figyelembe kell venni: néhány olyan dolgot, amit reflexorunk, pl. megváltoztatja a választóneveket szükséges a vonatkozó HTML- és JavaScript-fájlok kódjának módosításához is.

Ezért jó ötlet nyomon követheti ezeket a további módosításokat, amelyeket végre kell hajtania, és építsük fel őket a refactoring menetrendünkbe az elsődleges CSS-hez kapcsolódó feladatokkal együtt.

3. Nyomon követése

Mielőtt elkezdené a refactoringet, elengedhetetlen lépés készítsen biztonsági másolatot az eredeti fájljainkról. A verzió-vezérlőrendszer, például a Git vagy a Subversion bevezetése munkafolyamatunkban is jelentősen javíthatja a refactoring folyamatot, hiszen nyilvántartást kapunk a soron következő lépésekről, és mi vissza tud térni egy korábbi szakaszhoz, ha a dolgokat újra szeretnénk szerkeszteni.

4. Tartsa be a kódolási stílus útmutatóját

A koherens kódolási útmutató jelentősen javíthatja a kód olvashatóságát és karbantarthatóságát, így mielőtt elkezdenénk a refektort kezdeni, elengedhetetlen állítsa be a CSS kódolási stílus útmutatót.

A döntő fontos dolog a következők:

• elnevezési egyezmények
• formázási szabályok
• nyilatkozatot
• egységek és értékek, amelyeket használni akarunk
• kommentálási szabályok

Ha nem szeretnénk saját kódolási útmutatót létrehozni, akkor használhatunk más személyeket is, például a ThinkUp-ot, amely megtalálható a Githubban.

Nem elég, ha csak egy kódolási stílusú útmutatót vezetünk be ragaszkodj hozzá, amikor átírjuk a kódot a refaktorálás során, és mindenki mástól elvárható aki dolgozik a projektünkön.

5. Állítson be egy koherens fájlstruktúrát

Miután készen álltunk az előkészületekre, az első dolog, amit meg kell tennünk, hogy hozzunk létre egy megfelelő CSS fájlstruktúrát, amely figyelmet fordít a CSS lépcsőzetes jellegére..

Elsősorban a projekttől függ, hogy hogyan lehet legjobban megszervezni a fájljainkat, de vannak olyan univerzális szabályok, mint például egy különálló normalize.css CSS reset stílusok fájlja, egy külön global.css olyan globális stílusok esetében, amelyeket az egész projektben használnak, és a harmadik fél könyvtárait külön mappában tárolja.

Ha biztonságban akarunk játszani a CSS fájlstruktúránkkal, akkor készen állunk olyan architektúrákra is, mint az SMACSS vagy az ITCSS, amelyek hatékony technikákat kínálnak hogyan lehet a CSS-fájlokat skálázható módon rendezni.

6. Szabaduljon meg a nem használt és ismétlődő szabályoktól

Egy idő múlva a CSS-fájlok rendszerint bőségesek maradnak a fel nem használt szabályokban, amelyeket meg kell ismernünk és meg kell tisztítanunk a refactoring során. Számos online eszköz áll rendelkezésre vizsgálja meg ezeket az elavult szabályokat, és néha azt is lehetővé teszi számunkra, hogy gyorsan árokozzuk őket.

A legismertebb eszköz erre a célra valószínűleg az UnCSS, a Node.js modul, amely lehetővé teszi a fel nem használt CSS szabályok gyors megszüntetését, és olyan kifinomult konfigurációs lehetőségeket is biztosít számunkra, amelyek megkönnyítik a tisztítási folyamat finomhangolását.

Fontos figyelembe venni, hogy mi nem feltétlenül szeretné eltávolítani a fel nem használt szabályokat minden a CSS fájlokat, például globális, visszaállítási vagy harmadik fél stíluslapjaiból, így kell kizárják őket tisztítás közben.

Az elavult szabályokkal együtt az ismétlődő szabályok túlzott kódolási és teljesítményveszteségekhez is vezetnek. A CSS Purge Node.js modul segítségével eltávolíthatjuk őket, de együtt dolgozhatunk CSS linters, hogy megkereshessük a párhuzamos szabályokat CSS fájljainkban.

7. Csökkentse a specificitást

A CSS-választó specifitását a benne lévő belső szelektorok számából és típusaiból számítják ki. A CSS-specifitást 4 számjegyű számként fejezzük ki, amely a legegyszerűbb, ha ezt a vizuális CSS-specifikációs számológépet nézzük meg:

A legalacsonyabb specifitás (0001) olyan szelektorokhoz tartozik, amelyek csak egy általános HTML-elemre vonatkoznak, mint például

vagy

. Minél több belső szelektor van egy összetett szelektorban, annál nagyobb a specificitása.

Bizonyos szelektorok, például id vagy az inline stílusokból érkező szelektorok magasabb prioritásokkal rendelkeznek, mert felülbírálják az általánosabb szelektorokhoz tartozó stílusokat. Például a. \ T # id1 kiválasztó 0100.

A refaktorálás során a cél a szelektorok sajátosságainak csökkentése (rövid ideig tartani), amennyire csak lehetséges a nagyobb specificitású szelektorok jelentősen csökkentik a választó újrafelhasználhatóságát, és vezet egy puffadt kódbázishoz.

A nagy specifitású szelektorok három fő típusa a következő:

1. Minősített szelektorok, mint például p.class1 (a p a címke itt nincs szükség, mivel lehetetlenné teszi ugyanazon osztály használatát más HTML elemekkel)
2. Mélyen beágyazott szelektorok, mint például .class1 .class2 .class3 .class4…
3. azonosítók, mint például # id1

Az online eszközök, mint például az 1. lépésben említett CSSDig, felhasználhatók a magas specifitású szelektorok gyors megtalálására. Hasznos lehet egy szabály létrehozása a kódolási stílusban a dolgok, mint például a fészkelés maximális szintje, vagy a használat korlátozása. id szelektor.

8. Weed Out !fontos szabályok

CSS szabályok, amelyeket a !fontos nyilatkozat felülírja a szokásos stílusszabályokat. használata !fontos szabályokat előbb-utóbb következetlen kódot eredményez. Nem véletlen, hogy a legtöbb szöszkészítő eszköz hibaként jelöl.

Ha gyorsan kell írni a CSS-t, az egyszerűségük miatt kezdhetünk bízni velük.

A fő probléma !fontos nyilatkozatok szerint, ha a jövőben felül akarjuk őket felülírni, még többet kell tennünk !fontos használatban lévő nyilatkozatok, ezért a legjobb, ha a refaktorozás során lehetőség szerint ki lehet őket süllyeszteni.

9. Tisztítsa meg a mágikus számokat és a kemény kódolt értékeket

A mindennapi CSS munkafolyamatunk során néha olyan problémákba ütközünk, amelyeket nem tudunk megoldani, és úgynevezett mágikus számok, értékek, amelyek valamilyen okból működnek, de nem értjük miért. Vegyük például a következő példát:

 .class1 pozíció: abszolút; top: 28px; balra: 15,5%; 

A mágikus számok fő problémája az, hogy ők vannak körülményes, és ők testesítik meg a “programozás permutációval” antipattern. A refaktorozási folyamat során el kell távolítanunk ezeket az önkényes szabályokat a kódunkból, és helyettesítsük őket ésszerűbb megoldásokkal, ahol csak lehetséges.

Ugyanez a hüvelykujjszabály érvényes kemény kódolású értékek is. Valószínűleg a kemény kódolású értékek leggyakoribb előfordulása a vonalmagasság szabályaiban található:

 / * rossz, extra fix vonalmagasság szabályokat kell hozzáadnunk a .class1 * / .class1 font-size: 20px; vonalmagasság: 24px;  / * jó, a rugalmas vonalmagasság szabályt a gyermekelemek is biztonságosan használhatják * / .class1 font-size: 20px; vonal magassága: 1,2; 

A nehezen kódolt értékek a kódunkat kevésbé jövőképesek és merevebbek, így a refaktorálás részeként fel kell emelni őket, és cserélje ki őket rugalmas értékekkel.

10. Refactor egységek és értékek

A karbantartás és hibakeresés megkönnyítése a jövőben, valamint a különböző egységek használatából eredő hibák elkerülése érdekében em és px, egyszerre kell a relatív és abszolút értékek használatára vonatkozó következetes szabályok betartása.

Ha a múltban következetlenül használtuk őket, át kell alakítanunk őket, hogy tömör rendszert képezzenek

Ha túl sok hasonló színt használunk webhelyünkön, akkor bölcs dolog is lehet racionalizálja a színsémát az általunk használt színek számának csökkentésével. (Itt van egy hozzászólás arról, hogyan válasszon egy webes színsémát gyakorlati módon.)