8 parimat tava CSS-i klasside ja ID-de nimetamiseks JavaScripti projektis

CSS-i klasside ja ID-de nimetamisreeglitel on JavaScripti projekti koodi mõistmisel ja säilitamisel oluline roll. Kasutatavad nimed võivad parandada koodibaasi selgust, korduvkasutatavust ja paindlikkust. Heade tavade järgimine on oluline JavaScripti projektis CSS-i klasside ja ID-de nimetamisel.

1. Kasutage semantilisi nimesid

Nimede valimine, mis selgitavad täpselt elemendi funktsiooni või eesmärki, on ülioluline. Semantilised nimed pakuvad tähenduslikku konteksti ja muudavad koodi hõlpsamini mõistetavaks.

Näiteks selle asemel, et kasutada traditsioonilisi nimesid nagu kasti või hoidja, proovige kasutada selliseid nimesid nagu päis või külgriba mis peegeldavad komponendi spetsiifilist rolli.

/* Semantiliste nimede näide */
.päis {}
. külgriba {}

2. Kasutage järjekindlaid nimetamiskonventsioone

Järjepidevus on CSS-i klasside ja ID-de nimetamisel võtmetähtsusega. Sama nimetamisstandardi kasutamine kõikjal muudab koodibaasi struktuuri säilitamise lihtsamaks.

BEM (Block Element Modifier) ​​ja OOCSS (Object-Oriented CSS) nimetamiskokkulepped on eelistatuimad nimetamiskokkulepped.

Modulaarse, hallatava ja skaleeritava CSS-koodi kirjutamiseks saate kasutada OOCSS-i nimetamise tava. Siin on näide sellest, kuidas saate luua navigeerimismenüü OOCSS-i kasutamine:

/* Struktuur */
.nav {
kuva: painduv;
nimekirja stiilis: mitte ühtegi;
}
.nav__item {
margin-parem: 1rem;
}
.nav__link {
tekst-kaunistus: mitte ühtegi;
värvi: #333;
}
/* Välimus */
.nav__link:hõljuma {
tekst-kaunistus: joon alla;
}

Selles näites on navigeerimismenüü koodis kaks erinevat osa, üks struktuuri ja teine ​​välimuse jaoks. Välimuse osas kirjeldatakse värve ja muid stiile, mis annavad sellele ahvatleva välimuse, samas kui struktuurijaotis selgitab, kuidas ja kuhu menüüelemendid paigutatakse.

3. Vältige nimeruume

CSS-is on nimeruumid semantilised struktuurid, mis võimaldavad teil anda nende valikute jaoks nimeruumi eesliite. Moodulite, teekide või muude koodibaasi osade eristamiseks, millel võivad olla vastuolulised klassinimed, kasutatakse nimeruumi eesliidet.

See funktsioon on siiski kasulik, kuid see võib põhjustada spetsiifilisuse ja hooldatavusega probleeme.

Nimeruumide üks suurimaid puudusi on valija spetsiifilisuse käsitlemise raskus. Nimeruumi eesliide võib muuta valiku täpsemaks, muutes stiilide alistamise tulevikus keerulisemaks.

See toob kaasa CSS-koodi paisumise, mis on aja jooksul segane ja keeruline säilitada.

Võtke näiteks:

/* Nimeruumiga */
.minu-moodul.sisu {
taustavärv: sinine;
}
/* Ilma nimeruumita */
.module-header {
taustavärv: punane;
}
.mooduli sisu {
taustavärv: kollane;
}

Nimeruumi eesliide .minu-moodul ja .sisu kasutatakse mõlemat koodi põhiplokis. Selle tulemusena muutub valik täpsemaks, muutes tulevase stiili ülimuslikuks keerukamaks.

Teises osas asendatakse nimeruum kirjeldavate klassinimedega .module-header ja .mooduli sisu. Lisaks koodi arusaadavuse hõlbustamisele muudab see ka selle hooldamise lihtsamaks.

Nimeruumide kasutamine muudab teie programmi tarbetult keerukamaks, eriti kui paljud inimesed töötavad sama projekti erinevate osadega. Teil võib olla raske üksteise koodi mõista ja muuta, kuna erinevad meeskonnad võivad kasutada erinevaid nimeruumi eesliiteid.

Kasutage kirjeldavaid klassinimesid, näiteks:

.päis {
taustavärv: punane;
}
.sisu {
taustavärv: kollane;
}

Kasutades kirjeldavaid klassinimesid, võite kaotada nimeruumide nõude ja hoida oma koodibaasi hästi struktureeritud ja hõlpsasti mõistetavana.

4. Vältige globaalseid nimesid

JavaScripti projektides on CSS-i klasside ja ID-de globaalsete nimede vältimine ülioluline. Globaalsed nimed raskendavad koodi hooldamist ja suurendavad riskide nimetamise võimalust. Püsivama ja skaleeritavama koodibaasi tagamiseks on hea, kui kasutate komponendi või mooduli ulatuses täpsemaid nimesid.

Kaaluge allolevat näidet:

 Globaalsete nimede vale kasutamine 
<divklass="konteiner">
<divklass="külgriba">
 Sisu siin 
div>
div>

Üldised klassinimed külgriba ja konteiner ülaltoodud näites on vastuvõtlikud kokkupõrkele projektis muude stiililehtede või JavaScripti koodiga. Näiteks kui kaks laadilehte määravad sama . külgriba klassist, millest üks on sinise ja teine ​​punase taustaga, oleneb külgriba värv sellest, milline laadileht laaditakse viimati. Sellest võivad tekkida ootamatud ja ettearvamatud tulemused.

Nende probleemide minimeerimiseks on parem kasutada vastava komponendi või mooduli piires täpsemaid nimesid.

Vaadake täiustatud versiooni.

 Täiustatud konkreetsete nimedega 
<divklass="päis__konteiner">
<divklass="sidebar__content">
 Sisu siin 
div>
div>

Muudetud versioonis klasside nimed header__container ja külgriba__sisu teha selgeks, milleks iga element on mõeldud ja mida see teeb.

Konkreetsete nimede kasutamine vähendab nimetamiskonfliktide ohtu ja tagab, et stiilid mõjutavad ainult eeldatavaid komponente nende vastavates komponentides või moodulites.

5. Kasutage BEM-i nimede määramise konventsiooni

BEM-i (Block Element Modifier) ​​nimede andmise tava on populaarne JavaScripti projektides CSS-i klasside ja ID-de nimetamiseks. BEM pakub struktureeritud ja modulaarset viisi elementide nimetamiseks, soodustab korduvkasutatavust ja muudab koodibaaside haldamise lihtsamaks.

BEM-i kokkulepped koosnevad plokkidest, elementidest ja modifikaatoritest. Kõrgetasemelist elementi või eraldiseisvat komponenti nimetatakse plokiks. Elemendid on ploki osad, mis sõltuvad ploki kontekstist. Modifikaatorid võivad muuta ploki või elemendi välimust või käitumist.

Siin on näide BEM-i nimetamise tavast:

/* BEM-i nimetamiskonventsiooni näide */
/* Blokeeri */
.päis {} 
/* Ploki element */
.header__logo {} 
.header__menüü {}
/* Elemendi muutja */
.header__menu -- aktiivne {} 

Ülaltoodud joonisel on kujutatud a päis plokk a logo ja a menüü element. The menüü üksus saab aktiivne muuta, et näidata, et see on muutunud aktiivseks.

Saate kiiresti tuvastada põhikomponendid ja erinevate osade vahelised ühendused, muutes koodibaasi struktuuri ja hierarhia selgemaks.

6. Kasutage eesliiteid või järelliiteid

CSS-klassi ja ID-nimedele saate lisada lisaseadeid, lisades need ees- või järelfikseid, eriti suuremate projektide puhul. Võite kasutada eesliidet nagu js- näitamaks, et klass või ID pakub JavaScripti võimalusi. JavaScripti nimetamise kokkulepped koos nende CSS-i nimetamise tavadega võib pikas perspektiivis säästa teie aega ja vaeva.

 HTML JavaScripti eesliitega 
<nuppuklass="js-toggle">Lülitanuppu>
<divid="js-modal">Modaalnediv>

7. Kasutage kirjeldavaid nimesid

Saate paremini mõista elemendi eesmärki, funktsiooni või sisu kirjeldavate nimede kaudu.

Kaaluge allolevat näidet:

/* Mittekirjeldavad nimed */
.sinine kast {
/* Stiilid siin */
}
a {
/* Stiilid siin */
}

Klasside nimed sinine kast ja a ülaltoodud näites ei edasta asjakohast teavet komponentide kohta, millele nad viitavad. Kirjeldava nimetamise puudumine võib raskendada programmi teatud komponentide eesmärkide või rollide kiiret mõistmist.

Kasutage kirjeldavaid nimesid, mis selgitavad täpselt elemendi rolli parandada koodi loetavust ja hooldatavust.

Mõelge allolevale täiustatud näitele:

/* Kirjeldavad nimed */
.toode-kaart {
/* Stiilid siin */
}
.navigatsioonilink {
/* Stiilid siin */
}

Klasside nimed toode-kaart ja navigeerimislink uuendatud versioonis teevad selgeks, millist eesmärki iga element täidab. Nende kirjeldavate nimede abil on koodi uurimine ja redigeerimine lihtsam.

Kirjeldavate nimede kasutamine on kasulik nii praegustele kui ka potentsiaalsetele tulevastele koodibaasi kallal töötavatele arendajatele. Mõne aja pärast koodi uuesti üle vaadates saate hõlpsalt aru osade struktuurist ja toimimisest.

8. Kasutage lühikesi ja sisutihedaid nimesid

Ehkki eristatavad nimed on olulised, on oluline ka nende lühidalt hoidmine. Pikad klassi- ja ID-nimed võivad muuta koodi lugemise ja hooldamise keerulisemaks. Proovige leida tasakaal lühidalt ja üksikasjalikult. Lisaks kaaluge projekti kontekstis tuntud akronüümide või lühendite kasutamist.

Mõelge juhtumile, kus soovite oma veebisaidil navigeerimismenüü kohandamiseks kasutada CSS-i. Võite kasutada lühemaid ja täpsemaid nimesid, näiteks nav-üksus või nav-link pikkade asemel nagu nav-liides või peamine-navigatsioonilink.

.nav-üksus {
/* Navigeerimismenüü üksuste stiilid */
}
.nav-link {
/* Navigeerimislinkide stiilid */
}

Akronüümide või populaarsete lühendite kasutamine projekti kontekstis, nt nav jaoks navigeerimine, võib teiste programmeerijate jaoks koodi palju hõlpsamini mõista.

CSS-i klasside ja ID-de nimetamise parimad tavad

JavaScripti projektis on koodi loetavuse, hoolduse ja skaleeritavuse jaoks ülioluline CSS-i klasside ja ID-de õige nimetamine.

Saate muuta laadilehti lihtsamaks ja parandada koodi kvaliteeti. Heade nimetamistavade paika panemine tasub end pikas perspektiivis ära, kuna see muudab koodibaasi mõistmise ja haldamise nii teile kui ka teistele lihtsamaks.