Hogyan optimalizálható a CSS kódstílus-útmutatókkal

Amikor a tervezők a stílusvezetőkről beszélnek, általában azt jelentik egy jóváhagyott kézikönyv a koherens megjelenés és érzés egy weboldal vagy alkalmazás egy jól megtervezett színséma, tipográfia és felhasználói felület ez az egész projektben használható.

A webfejlesztésben is használhatunk egy másik típusú stílusú útmutatót, és ugyanolyan fontos, de sokkal ritkábban beszélünk: magának a kódnak az útmutatója. A kódstílus-útmutatók inkább a fejlesztőknek szólnak, mint a tervezők, és fő célja a CSS vagy más kód optimalizálása.

A megfelelő kódstílus-útmutatók használatba vétele a jobb szervezett, következetes kódbázis, javított kód olvashatóság és több karbantartható kód. Nem véletlen, hogy a főbb technológiai vállalatok, például a Google, az AirBnB vagy a Dropbox jól használják őket.

Ebben a bejegyzésben megvizsgáljuk, hogyan tudjuk CSS kódstílus-útmutatók segítségével intelligensen optimalizálni a CSS-t.

Kódstílus-útmutatók vs. mintakönyvtárak

Iparágunkban bizonyos fokú bizonytalanság érhető el, amit stílusvezetőnek hívhatunk. Egy lista külön például a kifejezéshez szinonimát használ minta könyvtár ebben a cikkben, de más álláshelyeken is be tudjuk ütni ezt a fajta definíciót.

Másrészt vannak olyan kiadványok is, mint a CSS Tricks vagy a Brad Frost blogja, amelyek megkülönböztetik a kódstílus-útmutatókat a mintakönyvtáraktól. Ez utóbbi megközelítés valószínűleg közelebb hoz minket egy jól optimalizált weboldalhoz, mint lehetővé teszi számunkra, hogy a kódot és a tervezést külön kezeljük, ezért ezt a hozzászólást használjuk.

A kódstílus-útmutatók és a mintakönyvtárak tartalmazzák a stílusstratégiát, de másfajta. Mintakönyvtárak, mint például a Bootstrap, a Zurb Alapítvány, a BBC Global Experience Language, vagy a MailChimp mintakönyvtára, egy olyan felhasználói felületet biztosít, amely előzetes CSS osztályokkal, tipográfiával, színsémával, néha rácsrendszerrel és más tervezési mintákkal rendelkezik..

A CSS kódstílus-útmutatók, mint például az Evernote vagy a ThinkUp (vagy az intro-ban említettek), tartalmazzák a CSS írásának szabályai beleértve a dolgokat elnevezési egyezmények, fájlstruktúra, tulajdonságrendelés, kódformázás, és mások.

Ne feledje, hogy az élő stílusvezető generátorok, például a KSS, a Styledown vagy a Pattern Lab, mintakönyvtárak létrehozása és nem kódolási stílus útmutatók. Míg a mintakönyvtárak is nagyon hasznosak és emelik a webfejlesztési folyamatot, nem teszik lehetővé, hogy a kódot optimalizáljuk.

Készítse el a CSS kódstílus útmutatóját

A CSS kódstílus-útmutató végső célja az, hogy biztosítsuk, hogy egy egységes, könnyen debuggálható kódbázissal dolgozhassunk, melyeket a fejlesztők írnak, akik ugyanazokat a kódolási szabályokat követik. CSS kódstílus-útmutató létrehozása eltarthat egy kis időt, de megéri az erőfeszítést, mivel csak egyszer kell tennünk. Ezután ugyanazt a stílus útmutatót használhatjuk a különböző projektekben.

Fontos megjegyezni, hogy a legjobb stílus útmutatók ne csak a stílusszabályokat tartalmazza, hanem példákat is jó és rossz használat, mivel így a fejlesztők intuitívabban érthetik meg a szabályokat.

Például az AirBnB jó és rossz példákat mutat a fejlesztők számára az alábbi könnyen emészthető módon:

Fájlstruktúra

Először is meg kell találnunk egy logikát, amely szerint megszervezzük a CSS fájljainkat. Kisebb projekteknél egy CSS-fájl elég lehet, de nagyobbak számára mindig jobban törje meg a kódot, és összevonja a külön fájlokat később a gyártás során.

Néhány stílusvezető, mint például a ThinkUp, szintén figyelmeztet minket nem használja a beágyazott vagy beágyazott stílusokat kivéve, ha elkerülhetetlen; ez is hasznos szabály, amit érdemes alkalmazni.

fészekrakó

A fészkelés a CSS-ben nagyszerű tulajdonság, de időnként el lehet hagyni az irányítást. Senki sem érzi magát különösen boldognak, különösen egy frusztráló hibakeresési folyamat közepén, és ilyenkor az ilyen hosszú szelektorokba ütközik:

 .class_1 .class_2 # id_1 # id_2 li a span color: #bad; 

Szóval mindig jó ésszerű fészkelési határértéket, például a GitHub három szintet választott a stílus útmutatójában. A fészkelés korlátozásával arra is kényszeríthetjük magunkat, hogy írjunk egy jobb strukturált kódot.

Elnevezési szabályok

A CSS szelektorok számára a koherens elnevezési szabályok használata elengedhetetlen, ha meg akarjuk érteni a kód hónapjainkat vagy akár évekkel később. Sok megoldás van ott, és csak egy szigorú szabályt kell követnünk azaz egy választó neve nem kezdődhet számmal.

A választó elnevezésben használt négy gyakori stílus van .kisbetű, .under_scores, .kötőjel-es, és .lowerCamelCase. Jó, ha bármelyiküket választjuk, de ugyanazt a logikát kell követnünk az egész projektben.

használata csak szemantikai választónevek az is elengedhetetlen, ha szeretnénk értelmes kóddal rendelkeznek. Például ahelyett, hogy .piros gombot (ami nem mutatja, hogy mi a gomb), jobb, ha használjuk .riasztás gomb nevét (ami azt mondja, hogy mit csinál), így lehetővé tesszük a fejlesztőknek (és a jövőnknek is), hogy megértsék, mit tesz az említett gomb.

Ráadásul ha azt szeretnénk, hogy a vörös színről a jövőben megváltoztassuk a színét, akkor könnyedén megtehetjük a problémát. Vannak olyan előzetes CSS elnevezési egyezmények is, mint a BEM (Block, Element, Modifier) ​​egyezmény következetes elnevezési struktúrát eredményez egyedi és értelmes nevekkel.

Formázási szabályok

A kódformázás olyan dolgokat foglal magában, mint például a szóköz, a lapok, a bemélyedés, a távolságok, a sorszakok stb. Használata. A formázás során nem létezik egy általánosan jó vagy rossz módszer, az egyetlen hüvelykujjszabály az, hogy válasszon olyan koherens szabályokat, amelyek olvasható kódot eredményeznek, és kövesse őket.

A Dropbox például megköveteli a fejlesztőknek, hogy a kettőspont után tereket helyezzenek el az ingatlan-nyilatkozatokban, míg az Evernote két szóközt használ a bemélyedéshez. Olyan sok formázási szabályt állíthatunk be, amennyire elégedettek vagyunk soha nem több, mint amennyire lehetséges.

Nyilatkozat

A rendezett dolgokat mindig könnyebb látni, és CSS-nyilatkozatok megrendelése (az értékekkel rendelkező tulajdonságok) egy olyan szabály szerint, amely értelme, jobb szervezett kódot eredményez.

Tekintse meg például a WordPress tulajdonságrendelési szabályait, meghatározza a következő egyszerű, de logikai alapvonalat a megrendeléshez, amelyben a tulajdonságok csoportosításuk szerint:

1. Kijelző
2. Positioning
3. Box modell
4. Színek és tipográfia
5. Más

Egységek és értékek

Az egységek és értékek használatának eldöntése nem csak a következetes kódmegjelenítés szempontjából fontos, hanem ha nem is teszünk, akkor valami furcsa

Csak képzelje el a helyszínt, amely felváltva használja px, em, és rem hosszmérések. Nem csak rosszul néz ki a kódszerkesztőben, de valószínűleg néhány elem meglepően kicsi vagy nagy lesz az adott webhelyen.

A színértékekről (hexadecimális, rgb vagy hsl) is döntéseket kell hoznunk, és azt is, hogy szeretnénk-e rövidített tulajdonságokat használni és mely szabályokat kell alkalmazni. Minden olyan CSS kódstílus-útmutatóban található utasítás, amelybe behatoltam, vagyis az. ne adjon meg 0 értékű egységet (tényleg, csak nem).

.osztály // jó árrés: 0; // rossz margó: 0px; // rossz margó: 0em; // rossz árrés: 0rem; 

kommentálva

A kommentálási kód minden nyelven fontos, de a CSS-ben ez nem csak a hibakeresést és a dokumentáció készítését teszi lehetővé, hanem a CSS szabályokat logikai csoportokba is sorolja. Használhatjuk a / *… * / vagy a // ... a CSS-ben való megjegyzések stílusa, a fontos dolog maradjon következetes a projektünkkel kapcsolatos megjegyzésekkel.

Idiomatikus CSS például létrehoz egy értelmes kommentálási rendszert, amely még néhány alapvető ASCII művészetet használ, és gyönyörűen szervezett kódot eredményez: