8 najboljših praks za poimenovanje razredov in ID-jev CSS v projektu JavaScript

Pravila poimenovanja za razrede in ID-je CSS imajo pomembno vlogo pri razumevanju in vzdrževanju kode v projektu JavaScript. Uporabljena imena lahko povečajo jasnost, ponovno uporabnost in prilagodljivost kodne baze. Pri poimenovanju razredov in ID-jev CSS v projektu JavaScript je pomembno upoštevati najboljše prakse.

1. Uporabite semantična imena

Izbira imen, ki natančno pojasnjujejo funkcijo ali namen elementa, je ključnega pomena. Semantična imena zagotavljajo smiseln kontekst in olajšajo razumevanje kode.

Na primer, namesto uporabe tradicionalnih imen, kot je škatla oz nosilec, poskusite uporabiti imena, kot je glava oz stranska vrstica ki odražajo posebno vlogo komponente.

/* Primer semantičnih imen */
.glava {}
.sidebar {}

2. Uporabite konvencije o doslednem poimenovanju

Pri poimenovanju razredov in ID-jev CSS je ključna doslednost. Uporaba istega standarda poimenovanja na vseh področjih omogoča preprostejše vzdrževanje strukture kodne baze.

Konvenciji o poimenovanju BEM (Block Element Modifier) ​​in OOCSS (Object-Oriented CSS) sta najbolj zaželena pravila poimenovanja.

Konvencijo o poimenovanju OOCSS lahko uporabite za pisanje kode CSS, ki je modularna, obvladljiva in razširljiva. Tukaj je ilustracija, kako lahko ustvarite navigacijski meni z uporabo OOCSS:

/* Struktura */
.nav {
zaslon: flex;
v slogu seznama: nobeden;
}
.nav__item {
margin-desno: 1rem;
}
.nav__link {
besedilo-okras: nobeden;
barva: #333;
}
/* Videz */
.nav__link:lebdi {
besedilo-okras: podčrtaj;
}

V tem primeru imate dva različna dela kode za navigacijski meni, enega za strukturo in enega za videz. Del o videzu opisuje barve in druge sloge, ki dajejo privlačen videz, medtem ko del o strukturi pojasnjuje, kako in kje bodo elementi menija nameščeni.

3. Izogibajte se imenskim prostorom

V CSS so imenski prostori semantične strukture, ki vam omogočajo, da zagotovite predpono imenskega prostora za njihove izbire. Za razlikovanje med moduli, knjižnicami ali drugimi deli kodne baze, ki bi lahko imeli nasprotujoča si imena razredov, se uporablja predpona imenskega prostora.

Ta funkcija je uporabna, vendar lahko povzroči težave s specifičnostjo in vzdrževanjem.

Ena največjih pomanjkljivosti imenskih prostorov je težava pri obravnavanju specifičnosti izbirnika. Predpona imenskega prostora lahko naredi izbor bolj specifičen, kar oteži preglasitev slogov v prihodnosti.

To vodi do napihnjenosti kode CSS, kar je zmedeno in težko vzdrževati skozi čas.

Vzemimo na primer:

/* Z imenskim prostorom */
.my-module.vsebina {
Barva ozadja: modra;
}
/* Brez imenskega prostora */
.modul-header {
Barva ozadja: rdeča;
}
.modul-vsebina {
Barva ozadja: rumena;
}

Predpona imenskega prostora .my-module in .vsebina oba se uporabljata v glavnem bloku kode. Izbira je zaradi tega bolj natančna, zaradi česar je preglasitev prihodnjega sloga bolj zahtevna.

V drugem delu je imenski prostor nadomeščen z opisnimi imeni razredov .modul-header in .modul-vsebina. Poleg lažjega razumevanja kode je to tudi preprostejše za vzdrževanje.

Uporaba imenskih prostorov vašemu programu dodaja nepotrebno zapletenost, zlasti če veliko ljudi dela na različnih delih istega projekta. Morda boste težko razumeli in spreminjali kodo drug drugega, saj lahko različne ekipe uporabljajo različne predpone imenskega prostora.

Uporabite imena razredov, ki so na primer opisna:

.glava {
Barva ozadja: rdeča;
}
.vsebina {
Barva ozadja: rumena;
}

Z uporabo opisnih imen razredov lahko odpravite zahtevo po imenskih prostorih in ohranite svojo kodno zbirko dobro strukturirano in lahko razumljivo.

4. Izogibajte se globalnim imenom

Pri projektih JavaScript je ključnega pomena izogibanje globalnim imenom za razrede in ID-je CSS. Globalna imena otežujejo vzdrževanje kode in povečujejo možnost tveganja poimenovanja. Če želite zagotoviti trajnejšo in razširljivo kodno zbirko, je dobro, da uporabite natančnejša imena znotraj obsega komponente ali modula.

Razmislite o spodnjem primeru:

 Nepravilna uporaba globalnih imen 
<divrazred="posoda">
<divrazred="stranska vrstica">
 Vsebina tukaj 
div>
div>

Generična imena razredov stranska vrstica in posoda v zgornjem primeru so dovzetni za navzkrižja z drugimi slogovnimi listi ali kodo JavaScript znotraj projekta. Na primer, če dve slogovni listi določata isto .sidebar razreda, enega z modrim ozadjem in drugega z rdečim ozadjem, bo barva stranske vrstice odvisna od tega, kateri slogovni list se nazadnje naloži. To lahko povzroči nepričakovane in nepredvidljive rezultate.

Bolje je, da uporabite bolj natančna imena, ki obsegajo zadevno komponento ali modul, da zmanjšate te težave.

Oglejte si izboljšano različico.

 Izboljšano s posebnimi imeni 
<divrazred="header__container">
<divrazred="sidebar__content">
 Vsebina tukaj 
div>
div>

V spremenjeni različici imena razredov glava__vsebnik in sidebar__content pojasnite, čemu je vsak element namenjen in kaj počne.

Uporaba določenih imen zmanjša tveganje sporov pri poimenovanju in zagotavlja, da slogi vplivajo samo na pričakovane komponente znotraj njihovih komponent ali modulov.

5. Uporabite konvencijo poimenovanja BEM

Konvencija o poimenovanju BEM (Block Element Modifier) ​​je priljubljena za poimenovanje razredov in ID-jev CSS v projektih JavaScript. BEM zagotavlja strukturiran in modularen način poimenovanja elementov, spodbuja ponovno uporabo in olajša vzdrževanje kodnih baz.

BEM konvencije so sestavljene iz blokov, elementov in modifikatorjev. Element visoke ravni ali samostojna komponenta se imenuje blok. Elementi so sestavni deli bloka, ki se opirajo na kontekst bloka. Modifikatorji lahko spremenijo videz ali obnašanje bloka ali elementa.

Tukaj je primer uporabe konvencije o poimenovanju BEM:

/* Primer konvencije o poimenovanju BEM */
/* Blokiraj */
.glava {} 
/* Element bloka */
.header__logo {} 
.header__menu {}
/* Modifikator elementa */
.header__menu--aktiven {} 

Zgornja slika prikazuje a glava blok z a logotip in a meni element. The meni element prejme aktivna spremeni, da pokaže, da je postal aktiven.

Hitro lahko identificirate temeljne komponente in povezave med različnimi deli, s čimer naredite strukturo in hierarhijo baze kode jasnejši.

6. Uporabite predpone ali pripone

Imenom razredov in ID-jev CSS lahko dodate dodatne nastavitve tako, da jim dodate predpono ali naknadno, zlasti v večjih projektih. Uporabite lahko predpono, kot je js- za označevanje, da razred ali ID ponuja zmožnosti JavaScript. konvencije poimenovanja JavaScript skupaj s temi poimenovanji CSS vam lahko dolgoročno prihranijo čas in trud.

 HTML s predpono JavaScript 
<gumbrazred="js-preklop">Preklopigumb>
<divid="js-modal">Modalnodiv>

7. Uporabite opisna imena

Z opisnimi imeni lahko bolje razumete namen, funkcijo ali vsebino elementa.

Razmislite o spodnjem primeru:

/* Neopisna imena */
.modra škatla {
/* Slogi tukaj */
}
a {
/* Slogi tukaj */
}

Imena razredov modra škatla in a v zgornjem primeru ne posredujejo ustreznih informacij o komponentah, na katere se sklicujejo. Odsotnost opisnega poimenovanja vam lahko oteži hitro razumevanje namenov ali vlog določenih komponent v programu.

Uporabite opisna imena, ki natančno pojasnijo vlogo elementa izboljšati berljivost in vzdržljivost kode.

Razmislite o izboljšanem primeru spodaj:

/* Opisna imena */
.kartica izdelka {
/* Slogi tukaj */
}
.navigacijska povezava {
/* Slogi tukaj */
}

Imena razredov kartica izdelka in navigacijska povezava v posodobljeni različici razvidno, čemu vsak element služi. S temi opisnimi imeni bosta raziskovanje in urejanje kode preprostejša.

Uporaba opisnih imen koristi sedanjim in potencialnim prihodnjim razvijalcem, ki delajo na kodni bazi. Ko čez nekaj časa ponovno obiščete kodo, lahko preprosto razumete strukturo in delovanje kosov.

8. Uporabljajte kratka in jedrnata imena

Čeprav so značilna imena bistvena, je pomembno tudi, da so jedrnata. Dolga imena razredov in ID-jev lahko otežijo branje in vzdrževanje kode. Poskusite najti ravnovesje med kratkostjo in podrobnostjo. Poleg tega razmislite o uporabi dobro znanih akronimov ali okrajšav v kontekstu projekta.

Razmislite o primeru, ko želite uporabiti CSS za prilagoditev navigacijskega menija na vašem spletnem mestu. Uporabite lahko krajša, natančnejša imena, npr nav-item oz nav-povezava namesto dolgih, kot navigacijski vmesnik oz glavna-navigacijska povezava.

.nav-item {
/* Slogi za elemente navigacijskega menija */
}
.nav-link {
/* Slogi za navigacijske povezave */
}

Uporaba akronimov ali popularnih okrajšav v kontekstu projekta, kot npr nav za navigacijo, lahko drugim programerjem olajša razumevanje kode.

Najboljše prakse za poimenovanje razredov in ID-jev CSS

V projektu JavaScript je ključno ustrezno poimenovati razrede in ID-je CSS za berljivost kode, vzdrževanje in razširljivost.

Lahko poenostavite slogovne liste in izboljšate kakovost kode. Vzeti čas za določitev dobrih konvencij o poimenovanju se bo dolgoročno obrestovalo, saj boste vi in ​​drugi lažje razumeli in vzdrževali kodno zbirko.