Izstrādātāji bieži cīnās ar CSS klašu un ID nosaukšanu. Ievērojiet šīs paraugprakses efektīvai nosaukumu piešķiršanai.
CSS klašu un ID nosaukumu piešķiršanas principiem ir nozīmīga loma koda izpratnē un uzturēšanā JavaScript projektā. Izmantotie nosaukumi var uzlabot kodu bāzes skaidrību, atkārtotu lietojamību un elastību. Nosaucot CSS klases un ID JavaScript projektā, ir svarīgi ievērot labāko praksi.
1. Izmantojiet semantiskos nosaukumus
Ir ļoti svarīgi izvēlēties nosaukumus, kas precīzi izskaidro elementa funkciju vai mērķi. Semantiskie nosaukumi nodrošina jēgpilnu kontekstu un padara kodu vieglāk saprotamu.
Piemēram, tā vietā, lai izmantotu tradicionālos nosaukumus, piemēram, kaste vai turētājs, mēģiniet izmantot tādus nosaukumus kā galvene vai sānjosla kas atspoguļo komponenta īpašo lomu.
/* Semantisko nosaukumu piemērs */
.header {}
.sānjosla {}
2. Izmantojiet konsekventas nosaukumu piešķiršanas konvencijas
Konsekvence ir svarīga, nosaucot CSS klases un ID. Izmantojot vienu un to pašu nosaukumu standartu, ir vieglāk uzturēt kodu bāzes struktūru.
BEM (Block Element Modifier) un OOCSS (Object-Oriented CSS) nosaukšanas konvencijas ir vispiemērotākās nosaukumu piešķiršanas konvencijas.
Varat izmantot OOCSS nosaukumu piešķiršanas konvenciju, lai rakstītu CSS kodu, kas ir modulārs, pārvaldāms un mērogojams. Šeit ir ilustrācija, kā jūs varat izveidot navigācijas izvēlni izmantojot OOCSS:
/* Struktūra */.nav {
displejs: flex;
saraksta stilā: neviens;
}.nav__item {
mala-labais: 1rem;
}.nav__link {
teksta dekorēšana: neviens;
krāsa: #333;
}/* Izskats */
.nav__link:virziet kursoru {
teksta dekorēšana: pasvītrot;
}
Šajā piemērā navigācijas izvēlnei ir divas atšķirīgas koda daļas: viena struktūrai un otra izskatam. Izskata daļā ir aprakstītas krāsas un citi stili, kas piešķir tai pievilcīgu izskatu, savukārt struktūras sadaļā ir paskaidrots, kā un kur tiks izvietoti izvēlnes vienumi.
3. Izvairieties no nosaukumvietām
CSS nosaukumvietas ir semantiskas struktūras, kas ļauj to atlasēm nodrošināt nosaukumvietas prefiksu. Lai atšķirtu moduļus, bibliotēkas vai citas kodu bāzes daļas, kurām varētu būt konfliktējoši klašu nosaukumi, tiek izmantots nosaukumvietas prefikss.
Šī funkcija ir noderīga, taču tā var izraisīt specifikas un apkopes problēmas.
Viens no lielākajiem nosaukumvietu trūkumiem ir grūtības apstrādāt atlasītāja specifiku. Nosaukumvietas prefikss var padarīt atlasi precīzāku, tādējādi apgrūtinot stilu ignorēšanu nākotnē.
Tas noved pie CSS koda uzpūšanās, kas ir mulsinoši un sarežģīti uzturēt laika gaitā.
Ņemiet, piemēram:
/* Ar nosaukumvietu */.mans modulis.saturs {
fona krāsa: zils;
}/* Bez nosaukumvietas */
.module-header {
fona krāsa: sarkans;
}.modulis-saturs {
fona krāsa: dzeltens;
}
Nosaukumvietas prefikss .mans modulis un .saturs abi tiek izmantoti galvenajā koda blokā. Rezultātā atlase kļūst precīzāka, padarot nākotnes stilu svarīgāku par izaicinājumu.
Otrajā daļā nosaukumu telpa tiek aizstāta ar aprakstošiem klašu nosaukumiem .module-header un .modulis-saturs. Tas ne tikai atvieglo koda izpratni, bet arī atvieglo tā uzturēšanu.
Nosaukumvietu izmantošana padara programmu nevajadzīgu sarežģītāku, it īpaši, ja daudzi cilvēki strādā pie dažādām viena projekta daļām. Jums var būt grūti saprast un mainīt vienam otra kodu, jo dažādas komandas var izmantot dažādus nosaukumvietas prefiksus.
Izmantojiet aprakstošus klašu nosaukumus, piemēram:
.header {fona krāsa: sarkans;
}
.saturs {
fona krāsa: dzeltens;
}
Izmantojot aprakstošus klašu nosaukumus, jūs varat atcelt prasību pēc nosaukumvietām un saglabāt savu kodu bāzi labi strukturētu un viegli saprotamu.
4. Izvairieties no globāliem nosaukumiem
JavaScript projektos ir ļoti svarīgi izvairīties no globāliem nosaukumiem CSS klasēm un ID. Globālie nosaukumi apgrūtina koda apkopi un palielina nosaukumu piešķiršanas risku. Lai nodrošinātu ilgstošāku un mērogojamāku kodu bāzi, ir labi, ja komponenta vai moduļa ietvaros izmantojat precīzākus nosaukumus.
Apsveriet tālāk sniegto piemēru:
Nepareiza globālo nosaukumu izmantošana<divklasē="konteiners">
<divklasē="sānjosla">Saturs šeit
div>
div>
Vispārējie klašu nosaukumi sānjosla un konteiners iepriekš minētajā piemērā ir uzņēmīgi pret sadursmēm ar citām stila lapām vai JavaScript kodu projekta iekšienē. Piemēram, ja divas stila lapas norāda vienu un to pašu .sānjosla klase, viena ar zilu fonu un otra ar sarkanu fonu, sānjoslas krāsa būs atkarīga no tā, kura stila lapa tiek ielādēta pēdējā. Tā rezultātā var rasties negaidīti un neparedzami rezultāti.
Lai samazinātu šīs problēmas, labāk ir izmantot precīzākus nosaukumus, kas attiecas uz attiecīgo komponentu vai moduli.
Apskatiet uzlaboto versiju.
Uzlabots ar konkrētiem nosaukumiem<divklasē="header__container">
<divklasē="sidebar__content">Saturs šeit
div>
div>
Mainītajā versijā klašu nosaukumi header__container un sānjoslas__saturs skaidri norādiet, kam katrs elements ir paredzēts un ko tas dara.
Izmantojot konkrētus nosaukumus, tiek samazināts nosaukšanas konfliktu risks un tiek nodrošināts, ka stili ietekmē tikai paredzamos komponentus to attiecīgajos komponentos vai moduļos.
5. Izmantojiet BEM nosaukumu piešķiršanas konvenciju
BEM (Block Element Modifier) nosaukšanas konvencija ir populāra CSS klašu un ID nosaukšanai JavaScript projektos. BEM nodrošina strukturētu un modulāru veidu elementu nosaukšanai, veicina atkārtotu izmantošanu un atvieglo kodu bāzu uzturēšanu.
BEM konvencijas sastāv no blokiem, elementiem un modifikatoriem. Augsta līmeņa elementu vai atsevišķu komponentu sauc par bloku. Elementi ir bloka komponentu daļas, kas balstās uz bloka kontekstu. Modifikatori var mainīt bloka vai elementa izskatu vai uzvedību.
Šeit ir BEM nosaukšanas metodes izmantošanas piemērs:
/* BEM nosaukumu piešķiršanas konvencijas piemērs *//* Bloķēt */
.header {}/* Bloka elements */
.header__logo {}
.header__izvēlne {}
/* Elementa pārveidotājs */
.header__menu — aktīvs {}
Iepriekš redzamajā attēlā parādīts a galvene bloķēt ar a logotips un a izvēlne elements. The izvēlne prece saņem aktīvs mainīt, lai parādītu, ka tas ir kļuvis aktīvs.
Varat ātri identificēt pamatkomponentus un savienojumus starp dažādām daļām, padarot koda bāzes struktūru un hierarhiju skaidrāku.
6. Izmantojiet prefiksus vai sufiksus
Varat pievienot papildu iestatījumus CSS klašu un ID nosaukumiem, pievienojot tiem prefiksu vai pēcfiksāciju, īpaši lielākos projektos. Varat izmantot prefiksu, piemēram js- lai norādītu, ka klase vai ID piedāvā JavaScript iespējas. JavaScript nosaukšanas konvencijas kopā ar šīm CSS nosaukumu piešķiršanas metodēm ilgtermiņā var ietaupīt laiku un pūles.
HTML ar JavaScript prefiksu<poguklasē="js-toggle">Pārslēgtpogu>
<divid="js-modal">Modālsdiv>
7. Izmantojiet aprakstošus nosaukumus
Varat labāk izprast elementa mērķi, funkciju vai saturu, izmantojot aprakstošus nosaukumus.
Apsveriet tālāk sniegto piemēru:
/* Neaprakstoši nosaukumi */.zilā kaste {
/* Stili šeit */
}
a {
/* Stili šeit */
}
Klašu nosaukumi zilā kaste un a iepriekš minētajā piemērā nepārsūta būtisku informāciju par komponentiem, uz kuriem tie attiecas. Aprakstošu nosaukumu trūkums var apgrūtināt ātru noteiktu programmas komponentu mērķu vai lomu izpratni.
Izmantojiet aprakstošus nosaukumus, kas precīzi izskaidro elementa lomu uzlabot koda lasāmību un apkopi.
Apsveriet tālāk sniegto uzlabotu piemēru:
/* Aprakstošie nosaukumi */.product-card {
/* Stili šeit */
}
.navigācijas saite {
/* Stili šeit */
}
Klašu nosaukumi produkts-karte un navigācijas saite atjauninātajā versijā skaidri parāda, kādam nolūkam katrs elements kalpo. Ar šiem aprakstošajiem nosaukumiem koda izpēte un rediģēšana būs vienkāršāka.
Aprakstošu nosaukumu izmantošana dod labumu pašreizējiem un potenciālajiem nākamajiem izstrādātājiem, kuri strādā pie kodu bāzes. Pārskatot kodu pēc kāda laika, jūs varat viegli saprast gabalu struktūru un darbību.
8. Izmantojiet īsus un kodolīgus vārdus
Lai gan atšķirīgi nosaukumi ir svarīgi, ir svarīgi arī saglabāt tos īsus. Gari klašu un ID nosaukumi var apgrūtināt koda lasīšanu un apkopi. Mēģiniet atrast līdzsvaru starp īsu un detalizētu. Turklāt apsveriet iespēju projekta kontekstā izmantot labi zināmus akronīmus vai saīsinājumus.
Apsveriet gadījumu, kad vēlaties izmantot CSS, lai pielāgotu savas vietnes navigācijas izvēlni. Varat izmantot īsākus, konkrētākus nosaukumus, piemēram, nav vienums vai nav-saite nevis gariem patīk nav interfeiss vai galvenā navigācijas saite.
.nav-item {
/* Navigācijas izvēlnes vienumu stili */
}
.nav-link {
/* Navigācijas saišu stili */
}
Izmantojot akronīmus vai populārus saīsinājumus projekta kontekstā, piemēram, nav priekš navigācija, var padarīt kodu daudz vieglāk saprotamu citiem programmētājiem.
CSS klašu un ID nosaukumu piešķiršanas paraugprakse
JavaScript projektā ir ļoti svarīgi pareizi nosaukt CSS klases un ID koda lasāmībai, uzturēšanai un mērogojamībai.
Varat padarīt stila lapas vienkāršākas un uzlabot koda kvalitāti. Atvēlot laiku labu nosaukumu piešķiršanas noteikumu noteikšanai, ilgtermiņā atmaksāsies, jo jums un citiem būs vieglāk saprast un uzturēt kodu bāzi.