8 bevált gyakorlat a CSS-osztályok és -azonosítók elnevezéséhez JavaScript-projektben

A CSS-osztályok és azonosítók elnevezési konvenciói jelentős szerepet játszanak a JavaScript-projektek kódjának megértésében és karbantartásában. A használt nevek javíthatják a kódbázis egyértelműségét, újrafelhasználhatóságát és rugalmasságát. A bevált gyakorlatok követése fontos a CSS-osztályok és azonosítók elnevezésekor egy JavaScript-projektben.

1. Használjon szemantikus neveket

Nagyon fontos, hogy olyan neveket válasszunk, amelyek pontosan megmagyarázzák az elem funkcióját vagy célját. A szemantikus nevek értelmes kontextust biztosítanak, és könnyebben érthetővé teszik a kódot.

Például a hagyományos nevek használata helyett, mint pl doboz vagy tartó, próbáljon meg olyan neveket használni, mint fejléc vagy oldalsáv amelyek tükrözik az összetevő sajátos szerepét.

/* Példa szemantikai nevekre */
.fejléc {}
.oldalsáv {}

2. Használjon következetes elnevezési konvenciókat

A konzisztencia kulcsfontosságú a CSS-osztályok és azonosítók elnevezésekor. Ugyanazon elnevezési szabvány használata egyszerűbbé teszi a kódbázis szerkezetének karbantartását.

A BEM (Block Element Modifier) ​​és az OOCSS (Object-Oriented CSS) elnevezési konvenciók a legelőnyösebb elnevezési konvenciók.

Az OOCSS elnevezési konvenció segítségével moduláris, kezelhető és méretezhető CSS-kódot írhat. Itt van egy szemléltetés, hogyan teheted hozzon létre egy navigációs menüt OOCSS használatával:

/* Szerkezet */
.nav {
kijelző: Flex;
lista stílusú: egyik sem;
}
.nav__item {
margó-jobb: 1rem;
}
.nav__link {
szöveg-dekoráció: egyik sem;
szín: #333;
}
/* Kinézet */
.nav__link:lebeg {
szöveg-dekoráció: aláhúzás;
}

Ebben a példában a navigációs menü kódjának két különálló része van, az egyik a szerkezetre, a másik pedig a megjelenésre. A megjelenés rész leírja azokat a színeket és egyéb stílusokat, amelyek vonzó megjelenést kölcsönöznek, míg a struktúra rész elmagyarázza, hogyan és hol helyezkednek el a menüelemek.

3. Kerülje a névtereket

A CSS-ben a névterek olyan szemantikai struktúrák, amelyek lehetővé teszik, hogy névtér-előtagot adjon a kijelöléseikhez. Annak érdekében, hogy különbséget lehessen tenni a modulok, könyvtárak vagy a kódbázis egyéb részei között, amelyeknek ütköző osztálynevei lehetnek, a névtér előtagot kell használni.

Ez a funkció hasznos, de konkrétsági és karbantarthatósági problémákat okozhat.

A névterek egyik legnagyobb hátránya a szelektor-specifikusság kezelésének nehézsége. A névtér előtagja konkrétabbá teheti a kijelölést, megnehezítve a stílusok jövőbeni felülbírálását.

Ez a CSS-kód felfúvódásához vezet, ami zavaró és kihívást jelent az idő múlásával fenntartani.

Vegyük például:

/* Névtérrel */
.my-modul.tartalom {
háttérszín: kék;
}
/* Névtér nélkül */
.modul-header {
háttérszín: piros;
}
.modul-tartalom {
háttérszín: sárga;
}

A névtér előtagja .my-modul és .tartalom mindkettőt a fő kódblokkban használják. Ennek eredményeként a kiválasztás precízebbé válik, és nagyobb kihívást jelent a jövő stílusának felülmúlása.

A második részben a névteret leíró osztálynevek helyettesítik .modul-header és .modul-tartalom. Amellett, hogy könnyebben érthetővé teszi a kódot, egyszerűbb a karbantartása is.

A névterek használata szükségtelenül bonyolulttá teszi a programot, különösen akkor, ha többen dolgoznak ugyanannak a projektnek különböző részein. Előfordulhat, hogy nehéz megérteni és megváltoztatni egymás kódját, mivel a különböző csapatok eltérő névtér előtagokat használhatnak.

Használjon leíró jellegű osztályneveket, például:

.fejléc {
háttérszín: piros;
}
.tartalom {
háttérszín: sárga;
}

A leíró osztálynevek használatával megszüntetheti a névterekre vonatkozó követelményt, és a kódbázist jól strukturált és könnyen érthető formában tarthatja.

4. Kerülje a globális neveket

A JavaScript-projektekben kritikus fontosságú a CSS-osztályok és azonosítók globális neveinek elkerülése. A globális nevek megnehezítik a kód karbantartását, és növelik az elnevezési kockázatok lehetőségét. A tartósabb és skálázható kódbázis biztosítása érdekében célszerű pontosabb neveket használni egy-egy összetevő vagy modul hatókörén belül.

Tekintsük az alábbi példát:

 A globális nevek helytelen használata 
<divosztály="tartály">
<divosztály="oldalsáv">
 Tartalom itt 
div>
div>

Az általános osztálynevek oldalsáv és tartály a fenti példában érzékenyek a projekten belüli más stíluslapokkal vagy JavaScript kóddal való ütközésre. Például, ha két stíluslap ugyanazt adja meg .oldalsáv osztályban, az egyik kék, a másik piros háttérrel, az oldalsáv színe attól függ, hogy melyik stíluslap töltődik be utoljára. Ebből váratlan és előre nem látható eredmények adódhatnak.

A problémák minimalizálása érdekében jobb, ha pontosabb neveket használunk, amelyek a megfelelő összetevőn vagy modulon belülre terjednek ki.

Nézz meg egy továbbfejlesztett verziót.

 Konkrét nevekkel javítva 
<divosztály="fejléc__tároló">
<divosztály="sidebar__content">
 Tartalom itt 
div>
div>

A megváltozott változatban az osztálynevek header__container és oldalsáv__tartalom világossá tenni, hogy az egyes elemek mire valók és mit csinálnak.

Konkrét nevek használata csökkenti az elnevezési ütközések kockázatát, és biztosítja, hogy a stílusok csak a megfelelő összetevőikben vagy moduljaikban lévő várható összetevőkre legyenek hatással.

5. Használja a BEM elnevezési egyezményt

A BEM (Block Element Modifier) ​​elnevezési konvenció népszerű a CSS-osztályok és azonosítók elnevezésére JavaScript-projektekben. A BEM strukturált és moduláris módot biztosít az elemek elnevezésére, ösztönzi az újrafelhasználhatóságot, és megkönnyíti a kódbázisok karbantartását.

A BEM konvenciók blokkokból, elemekből és módosítókból állnak. Egy magas szintű elemet vagy egy önálló komponenst blokknak nevezünk. Az elemek a blokk azon részei, amelyek a blokk kontextusára támaszkodnak. A módosítók megváltoztathatják egy blokk vagy elem megjelenését vagy viselkedését.

Íme egy példa a BEM elnevezési konvenció használatára:

/* Példa a BEM elnevezési megállapodáshoz */
/* Blokk */
.fejléc {} 
/* A blokk eleme */
.fejléc logó {} 
.header__menü {}
/* Az elem módosítója */
.header__menu -- aktív {} 

A fenti ábra a fejléc blokk a logó és a menü elem. A menü tétel megkapja a aktív módosítsa, hogy jelezze, hogy aktívvá vált.

Gyorsan azonosíthatja az alapvető összetevőket és a különböző részek közötti kapcsolatokat, így a kódbázis szerkezete és hierarchiája világosabbá válik.

6. Használjon előtagokat vagy utótagokat

A CSS-osztály- és azonosítónevekhez további beállításokat is hozzáadhat elő- vagy utótaggal, különösen nagyobb projekteknél. Használhat hasonló előtagot js- annak jelzésére, hogy egy osztály vagy azonosító JavaScript-képességeket kínál. JavaScript elnevezési konvenciók ezekkel a CSS-elnevezési konvenciókkal párosulva időt és erőfeszítést takaríthat meg hosszú távon.

 HTML JavaScript előtaggal 
<gombosztály="js-toggle">Váltásgomb>
<divid="js-modal">Modaldiv>

7. Használjon leíró neveket

A leíró nevek révén jobban megértheti egy elem célját, funkcióját vagy tartalmát.

Tekintsük az alábbi példát:

/* Nem leíró jellegű nevek */
.kék doboz {
/* Stílusok itt */
}
a {
/* Stílusok itt */
}

Az osztályok nevei kék doboz és a a fenti példában nem továbbítanak releváns információkat az általuk hivatkozott összetevőkre vonatkozóan. A leíró elnevezés hiánya megnehezítheti a programon belüli egyes összetevők céljának vagy szerepének gyors megértését.

Használjon olyan leíró neveket, amelyek pontosan megmagyarázzák az elem szerepét javítja a kód olvashatóságát és karbantarthatóságát.

Tekintsük az alábbi javított példát:

/* Leíró nevek */
.termék-kártya {
/* Stílusok itt */
}
.navigation-link {
/* Stílusok itt */
}

Az osztályok nevei termék-kártya és navigációs link a frissített verzióban nyilvánvalóvá tegyék, hogy az egyes elemek milyen célt szolgálnak. Ezekkel a leíró nevekkel egyszerűbben felfedezheti és szerkesztheti a kódot.

A leíró nevek használata a kódbázison dolgozó jelenlegi és potenciális jövőbeli fejlesztők számára előnyös. Ha egy idő után újra átnézi a kódot, könnyen megértheti a darabok szerkezetét és működését.

8. Használjon rövid és tömör neveket

Míg a megkülönböztető nevek elengedhetetlenek, az is fontos, hogy tömörek legyenek. A hosszú osztály- és azonosítónevek megnehezíthetik a kód olvashatóságát és karbantartását. Próbáljon egyensúlyt teremteni a rövidség és a részletesség között. Ezenkívül fontolja meg a jól ismert mozaikszavak vagy rövidítések használatát a projekt kontextusában.

Fontolja meg azt az esetet, amikor CSS-t szeretne használni webhelye navigációs menüjének testreszabásához. Használhat rövidebb, pontosabb neveket, mint pl nav-elem vagy nav-link hosszúak helyett, mint nav-interfész vagy fő-navigációs link.

.nav-elem {
/* Stílusok a navigációs menüelemekhez */
}
.nav-link {
/* Stílusok a navigációs hivatkozásokhoz */
}

Rövidítések vagy népszerű rövidítések használata a projekt kontextusában, mint pl nav számára navigáció, sokkal könnyebben érthetővé teheti a kódot más programozók számára.

A CSS-osztályok és -azonosítók elnevezésének bevált gyakorlatai

A JavaScript-projektekben kulcsfontosságú a CSS-osztályok és azonosítók megfelelő elnevezése a kód olvashatósága, karbantartása és méretezhetősége érdekében.

A stíluslapokat egyszerűbbé teheti, és javíthatja a kód minőségét. Ha időt szánunk a jó elnevezési konvenciók meghatározására, az hosszú távon kifizetődik, mivel megkönnyíti Önnek és másoknak a kódbázis megértését és karbantartását.