Kūrėjai dažnai susiduria su CSS klasių ir ID įvardijimu. Vadovaukitės šiais geriausios praktikos pavyzdžiais, kad pavadinimai būtų efektyvūs.

CSS klasių ir ID pavadinimų suteikimo taisyklės vaidina svarbų vaidmenį suprantant ir palaikant kodą „JavaScript“ projekte. Naudojami pavadinimai gali pagerinti kodų bazės aiškumą, pakartotinį naudojimą ir lankstumą. Įvardijant CSS klases ir ID „JavaScript“ projekte svarbu laikytis geriausios praktikos.

1. Naudokite semantinius pavadinimus

Labai svarbu pasirinkti pavadinimus, kurie tiksliai paaiškina elemento funkciją ar paskirtį. Semantiniai pavadinimai suteikia prasmingą kontekstą ir palengvina kodo supratimą.

Pavyzdžiui, vietoj tradicinių pavadinimų, pvz dėžė arba laikiklis, pabandykite naudoti tokius pavadinimus kaip antraštę arba šoninė juosta kurie atspindi specifinį komponento vaidmenį.

/* Semantinių pavadinimų pavyzdys */
.antraštė {}
.šoninė juosta {}

2. Naudokite nuoseklias įvardijimo taisykles

Nuoseklumas yra labai svarbus vardinant CSS klases ir ID. Naudojant tą patį pavadinimų standartą visame pasaulyje, lengviau išlaikyti kodų bazės struktūrą.

instagram viewer

BEM (Block Element Modifier) ​​ir OOCSS (Object-Oriented CSS) pavadinimų suteikimo sutartys yra labiausiai pageidaujamos pavadinimo sutartys.

Galite naudoti OOCSS pavadinimų suteikimo konvenciją, norėdami parašyti modulinį, valdomą ir keičiamo dydžio CSS kodą. Čia yra iliustracija, kaip galite sukurti naršymo meniu naudojant OOCSS:

/* Struktūra */
.nav {
ekranas: lankstus;
sąrašo stiliaus: nė vienas;
}


.nav__item {
paraštė-dešinė: 1rem;
}


.nav__link {
tekstas-dekoravimas: nė vienas;
spalva: #333;
}


/* Išvaizda */


.nav__link:užveskite pelės žymeklį {
tekstas-dekoravimas: pabraukti;
}

Šiame pavyzdyje yra dvi skirtingos naršymo meniu kodo dalys: viena struktūra ir kita išvaizda. Išvaizdos dalyje aprašomos spalvos ir kiti stiliai, suteikiantys patrauklią išvaizdą, o struktūros skyriuje paaiškinama, kaip ir kur bus išdėstyti meniu elementai.

3. Venkite vardų erdvių

CSS vardų erdvės yra semantinės struktūros, leidžiančios pasirinkti vardų erdvės priešdėlį. Norint atskirti modulius, bibliotekas ar kitas kodų bazės dalis, kurių klasių pavadinimai gali prieštarauti, naudojamas vardų erdvės priešdėlis.

Ši funkcija yra naudinga, tačiau gali sukelti specifiškumo ir priežiūros problemų.

Vienas iš didžiausių vardų erdvių trūkumų yra sunku valdyti parinkiklio specifiškumą. Vardų erdvės priešdėlis gali padaryti pasirinkimą konkretesnį, todėl ateityje bus sunkiau nepaisyti stilių.

Tai veda prie CSS kodo išsipūtimo, o tai painu ir sudėtinga išlaikyti laikui bėgant.

Paimkite, pavyzdžiui:

/* Su vardų erdve */
.mano modulis.turinys {
fono spalva: mėlyna;
}


/* Be vardų erdvės */


.module-header {
fono spalva: raudona;
}


.modulis-turinys {
fono spalva: geltona;
}

Vardų erdvės priešdėlis .mano modulis ir .turinys abu naudojami pagrindiniame kodo bloke. Dėl to pasirinkimas tampa tikslesnis, todėl ateities stilius tampa sudėtingesnis.

Antroje dalyje vardų erdvė pakeičiama aprašomaisiais klasių pavadinimais .module-header ir .modulis-turinys. Tai ne tik palengvina kodo supratimą, bet ir palengvina jo priežiūrą.

Vardų erdvių naudojimas padidina jūsų programos sudėtingumą, ypač kai daug žmonių dirba su skirtingomis to paties projekto dalimis. Jums gali būti sunku suprasti ir pakeisti vienas kito kodą, nes skirtingos komandos gali naudoti skirtingus vardų erdvės priešdėlius.

Naudokite aprašomuosius klasių pavadinimus, pavyzdžiui:

.antraštė {
fono spalva: raudona;


}


.turinys {


fono spalva: geltona;
}

Naudodami aprašomuosius klasių pavadinimus galite atsisakyti vardų erdvių reikalavimo ir išlaikyti savo kodų bazę gerai struktūrizuotą ir lengvai suprantamą.

4. Venkite visuotinių vardų

„JavaScript“ projektuose labai svarbu vengti visuotinių CSS klasių ir ID pavadinimų. Globalūs pavadinimai apsunkina kodo priežiūrą ir padidina įvardijimo riziką. Norint užtikrinti patvaresnę ir keičiamo dydžio kodų bazę, naudinga naudoti tikslesnius komponento ar modulio pavadinimus.

Apsvarstykite toliau pateiktą pavyzdį:

 Neteisingas visuotinių pavadinimų naudojimas 
<divklasė="konteineris">
<divklasė="šoninė juosta">


 Turinys čia 
div>
div>

Bendrieji klasių pavadinimai šoninė juosta ir konteineris aukščiau pateiktame pavyzdyje yra jautrūs susidūrimams su kitais stiliaus lapais arba „JavaScript“ kodu projekto viduje. Pavyzdžiui, jei du stiliaus lapai nurodo tą patį .šoninė juosta klasė, viena su mėlynu fonu, o kita su raudonu fonu, šoninės juostos spalva priklausys nuo to, kuris stiliaus lapas įkeliamas paskutinis. Dėl to gali atsirasti netikėtų ir nenuspėjamų rezultatų.

Norint sumažinti šias problemas, geriau naudoti tikslesnius pavadinimus, kurie apima atitinkamą komponentą ar modulį.

Pažvelkite į patobulintą versiją.

 Patobulinta konkrečiais pavadinimais 
<divklasė="header__container">
<divklasė="šoninė juosta__turinys">


 Turinys čia 
div>
div>

Pakeistas variantas – klasių pavadinimai header__container ir šoninės juostos__turinys aiškiai nurodykite, kam kiekvienas elementas skirtas ir ką jis daro.

Konkrečių pavadinimų naudojimas sumažina pavadinimų konfliktų riziką ir užtikrina, kad stiliai paveiktų tik numatomus komponentus atitinkamuose jų komponentuose arba moduliuose.

5. Naudokite BEM pavadinimo konvenciją

BEM (Block Element Modifier) ​​pavadinimų suteikimo konvencija yra populiari suteikiant CSS klases ir ID pavadinimus „JavaScript“ projektuose. BEM suteikia struktūrinį ir modulinį elementų pavadinimo būdą, skatina pakartotinį naudojimą ir palengvina kodų bazių priežiūrą.

BEM konvencijas sudaro blokai, elementai ir modifikatoriai. Aukšto lygio elementas arba atskiras komponentas vadinamas bloku. Elementai yra bloko sudedamosios dalys, kurios priklauso nuo bloko konteksto. Modifikatoriai gali pakeisti bloko ar elemento išvaizdą ar elgesį.

Štai pavyzdys, naudojant BEM pavadinimų susitarimą:

/* BEM pavadinimo konvencijos pavyzdys */
/* Blokuoti */
.antraštė {} 


/* Bloko elementas */
.header__logotipas {} 
.header__menu {}
/* Elemento modifikatorius */
.header__menu – aktyvus {}

Aukščiau pateiktoje iliustracijoje pavaizduota a antraštę blokas su a logotipas ir a Meniu elementas. The Meniu prekė gauna aktyvus pakeisti, kad parodytų, jog jis suaktyvėjo.

Galite greitai nustatyti pagrindinius komponentus ir ryšius tarp įvairių dalių, todėl kodų bazės struktūra ir hierarchija tampa aiškesnė.

6. Naudokite priešdėlius arba priesagas

Galite pridėti papildomų nustatymų prie CSS klasių ir ID pavadinimų pridėdami juos prieš arba po pataisos, ypač didesniuose projektuose. Galite naudoti priešdėlį kaip js– nurodyti, kad klasė ar ID siūlo „JavaScript“ galimybes. „JavaScript“ pavadinimų suteikimo taisyklės kartu su šiomis CSS pavadinimų sutartimis ilgainiui gali sutaupyti laiko ir pastangų.

 HTML su JavaScript priešdėliu 
<mygtukąklasė="js-toggle">Perjungtimygtuką>
<divid="js-modal">Modalinisdiv>

7. Naudokite aprašomuosius pavadinimus

Galite geriau suprasti elemento paskirtį, funkciją ar turinį naudodami aprašomuosius pavadinimus.

Apsvarstykite toliau pateiktą pavyzdį:

/* Neapibūdinamieji pavadinimai */
.mėlyna dėžutė {
/* Stiliai čia */
}
a {
/* Stiliai čia */
}

Klasių pavadinimai mėlyna dėžutė ir a pirmiau pateiktame pavyzdyje neperduoda jokios svarbios informacijos apie komponentus, kuriuos jie nurodo. Jei nėra aprašomojo pavadinimo, jums gali būti sunku greitai suprasti tam tikrų programos komponentų tikslus ar vaidmenis.

Naudokite aprašomuosius pavadinimus, kurie tiksliai paaiškina elemento vaidmenį pagerinti kodo skaitomumą ir priežiūrą.

Apsvarstykite toliau pateiktą patobulintą pavyzdį:

/* Apibūdinamieji pavadinimai */
.produktas-kortelė {
/* Stiliai čia */
}
.navigation-link {
/* Stiliai čia */
}

Klasių pavadinimai prekė-kortelė ir navigacijos nuoroda atnaujintoje versijoje aiškiai parodykite, kokiam tikslui skirtas kiekvienas elementas. Su šiais aprašomaisiais pavadinimais kodo tyrinėjimas ir redagavimas bus paprastesnis.

Aprašomųjų pavadinimų naudojimas yra naudingas dabartiniams ir potencialiems būsimiems kūrėjams, dirbantiems su kodų baze. Kai po kurio laiko dar kartą peržiūrėsite kodą, galite lengvai suprasti dalių struktūrą ir veikimą.

8. Naudokite trumpus ir glaustus vardus

Nors išskirtiniai pavadinimai yra labai svarbūs, taip pat svarbu, kad jie būtų glausti. Dėl ilgų klasių ir ID pavadinimų kodą gali būti sunkiau skaityti ir prižiūrėti. Stenkitės išlaikyti pusiausvyrą tarp trumpo ir išsamaus. Be to, projekto kontekste apsvarstykite galimybę naudoti gerai žinomus akronimus ar santrumpas.

Apsvarstykite atvejį, kai norite naudoti CSS, norėdami tinkinti savo svetainės naršymo meniu. Galite naudoti trumpesnius, konkretesnius pavadinimus, pvz nav-elementas arba navigacijos nuoroda vietoj ilgų kaip navigacijos sąsaja arba pagrindinė navigacijos nuoroda.

.nav-elementas {
/* Naršymo meniu elementų stiliai */
}
.nav-link {
/* Naršymo nuorodų stiliai */
}

Naudojant akronimus ar populiarias santrumpas projekto kontekste, pvz nav dėl navigacija, gali daug lengviau suprasti kodą kitiems programuotojams.

Geriausia CSS klasių ir ID pavadinimų suteikimo praktika

„JavaScript“ projekte labai svarbu tinkamai pavadinti CSS klases ir ID kodo skaitomumui, priežiūrai ir mastelio keitimui.

Galite supaprastinti stiliaus lapus ir pagerinti kodo kokybę. Skirdami laiko geroms pavadinimų taisyklėms nustatyti, ilgainiui atsipirks, nes jums ir kitiems bus lengviau suprasti ir prižiūrėti kodų bazę.