Kehittäjät kamppailevat usein CSS-luokkien ja tunnuksien nimeämisen kanssa. Noudata näitä parhaita käytäntöjä tehokkaan nimeämisen varmistamiseksi.

CSS-luokkien ja -tunnusten nimeämiskäytännöillä on merkittävä rooli koodin ymmärtämisessä ja ylläpidossa JavaScript-projektissa. Käytetyt nimet voivat parantaa koodikannan selkeyttä, uudelleenkäytettävyyttä ja joustavuutta. Parhaiden käytäntöjen noudattaminen on tärkeää nimettäessä CSS-luokkia ja tunnuksia JavaScript-projektissa.

1. Käytä semanttisia nimiä

On tärkeää valita nimet, jotka selittävät tarkasti elementin tehtävän tai tarkoituksen. Semanttiset nimet tarjoavat merkityksellisen kontekstin ja helpottavat koodin ymmärtämistä.

Esimerkiksi sen sijaan, että käytät perinteisiä nimiä, kuten laatikko tai pidin, kokeile käyttää nimiä kuten otsikko tai sivupalkki jotka kuvastavat komponentin erityistä roolia.

/* Esimerkki semanttisista nimistä */
.header {}
.sivupalkki {}

2. Käytä johdonmukaisia ​​nimeämiskäytäntöjä

Johdonmukaisuus on avainasemassa CSS-luokkien ja tunnuksien nimeämisessä. Saman nimeämisstandardin käyttäminen kautta linjan tekee koodikannan rakenteen ylläpidosta yksinkertaisempaa.

BEM (Block Element Modifier) ​​ja OOCSS (Object-Oriented CSS) nimeämiskäytännöt ovat suosituimpia nimeämiskäytäntöjä.

Voit käyttää OOCSS-nimeämiskäytäntöä modulaarisen, hallittavan ja skaalautuvan CSS-koodin kirjoittamiseen. Tässä on esimerkki siitä, miten voit luo navigointivalikko OOCSS: n avulla:

/* Rakenne */
.nav {
näyttö: flex;
listatyyliin: ei mitään;
}


.nav__item {
marginaali-oikea: 1rem;
}


.nav__link {
teksti-sisustus: ei mitään;
väri: #333;
}


/* Ulkomuoto */


.nav__link:hover {
teksti-sisustus: korostaa;
}

Tässä esimerkissä navigointivalikon koodissa on kaksi erillistä osaa, toinen rakennetta ja toinen ulkoasua varten. Ulkoasuosassa kuvataan värejä ja muita tyylejä, jotka antavat sille houkuttelevan ilmeen, kun taas rakenneosassa kerrotaan, miten ja mihin valikon kohdat sijoitetaan.

3. Vältä nimiavaruuksia

CSS: ssä nimiavaruudet ovat semanttisia rakenteita, joiden avulla voit antaa nimitilan etuliitettä valinnoilleen. Jotta voidaan erottaa moduulit, kirjastot tai muut koodikannan osat, joilla voi olla ristiriitaisia ​​luokkanimiä, käytetään nimitilan etuliitettä.

Tämä ominaisuus on kuitenkin hyödyllinen, mutta se voi aiheuttaa erityis- ja ylläpidettävyysongelmia.

Yksi nimiavaruuksien suurimmista haitoista on valitsinspesifisyyden käsittelyn vaikeus. Nimitilan etuliite voi tehdä valinnasta tarkemman, mikä vaikeuttaa tyylien ohittamista tulevaisuudessa.

Tämä johtaa CSS-koodin turvotukseen, joka on hämmentävää ja haastavaa ylläpitää ajan myötä.

Otetaan esimerkiksi:

/* Nimiavaruudella */
.my-moduuli.sisältö {
taustaväri: sininen;
}


/* Ilman nimiavaruutta */


.module-header {
taustaväri: punainen;
}


.moduuli-sisältö {
taustaväri: keltainen;
}

Nimitilan etuliite .my-moduuli ja .sisältö Molempia käytetään koodin päälohkossa. Tämän seurauksena valinta tarkentuu, mikä tekee tulevaisuuden tyylistä haastavampaa.

Toisessa osassa nimiavaruus korvataan kuvaavilla luokkien nimillä .module-header ja .moduuli-sisältö. Sen lisäksi, että koodi on helpompi ymmärtää, se myös helpottaa sen ylläpitoa.

Nimiavaruuksien käyttäminen lisää tarpeetonta monimutkaista ohjelmaa, varsinkin kun monet ihmiset työskentelevät saman projektin eri osissa. Sinun voi olla vaikea ymmärtää ja muuttaa toistensa koodia, koska eri joukkueet voivat käyttää erilaisia ​​nimiavaruuden etuliitteitä.

Käytä kuvailevia luokkien nimiä esimerkiksi:

.header {
taustaväri: punainen;


}


.sisältö {


taustaväri: keltainen;
}

Käyttämällä kuvaavia luokkanimiä voit poistaa nimiavaruuksien vaatimuksen ja pitää koodikantasi hyvin jäsenneltynä ja helposti ymmärrettävänä.

4. Vältä yleisiä nimiä

JavaScript-projekteissa on tärkeää välttää globaaleja nimiä CSS-luokille ja -tunnuksille. Globaalit nimet vaikeuttavat koodin ylläpitoa ja lisäävät nimeämisriskejä. Kestävämmän ja skaalautuvamman koodikannan varmistamiseksi on hyvä käyttää tarkempia nimiä komponentin tai moduulin sisällä.

Harkitse alla olevaa esimerkkiä:

 Yleisten nimien virheellinen käyttö 
<divluokkaa="kontti">
<divluokkaa="sivupalkki">


 Sisältö täällä 
div>
div>

Yleiset luokkien nimet sivupalkki ja kontti yllä olevassa esimerkissä ovat alttiita törmäyksille muiden tyylisivujen tai JavaScript-koodin kanssa projektin sisällä. Jos esimerkiksi kaksi tyylisivua määrittävät saman .sivupalkki luokkaa, joista toinen taustalla on sininen ja toinen punaisella, sivupalkin väri riippuu siitä, mikä tyylisivu latautuu viimeksi. Tästä voi syntyä odottamattomia ja arvaamattomia tuloksia.

Näiden ongelmien minimoimiseksi on parempi käyttää tarkempia nimiä, jotka kattavat asianomaisen komponentin tai moduulin.

Katso paranneltu versio.

 Parannettu erityisillä nimillä 
<divluokkaa="header__container">
<divluokkaa="sivupalkki__sisältö">


 Sisältö täällä 
div>
div>

Muutetussa versiossa luokkien nimet header__container ja sivupalkki__sisältö Tee selväksi, mitä varten kukin elementti on tarkoitettu ja mitä se tekee.

Tiettyjen nimien käyttäminen vähentää nimeämisristiriitojen riskiä ja varmistaa, että tyylit vaikuttavat vain niiden vastaavien komponenttien tai moduulien oletettuihin komponentteihin.

5. Käytä BEM-nimeämissopimusta

BEM (Block Element Modifier) ​​-nimeämiskäytäntö on suosittu CSS-luokkien ja tunnusten nimeämisessä JavaScript-projekteissa. BEM tarjoaa jäsennellyn ja modulaarisen tavan nimetä elementtejä, edistää uudelleenkäytettävyyttä ja helpottaa koodikantojen ylläpitoa.

BEM-yleissopimukset koostuvat lohkoista, elementeistä ja muokkaajista. Korkean tason elementtiä tai erillistä komponenttia kutsutaan lohkoksi. Elementit ovat lohkon komponenttiosia, jotka riippuvat lohkon kontekstista. Modifioijat voivat muuttaa lohkon tai elementin ulkonäköä tai käyttäytymistä.

Tässä on esimerkki BEM-nimeämiskäytännöstä:

/* Esimerkki BEM-nimeämiskäytännöstä */
/* Estä */
.header {} 


/* Lohkon elementti */
.otsikko logo {} 
.header__menu {}
/* Elementin muuntaja */
.header__menu -- aktiivinen {}

Yllä oleva kuva näyttää a otsikko lohko a logo ja a valikosta elementti. The valikosta kohde vastaanottaa aktiivinen muuttaa osoittamaan, että se on aktivoitunut.

Voit nopeasti tunnistaa peruskomponentit ja eri osien väliset yhteydet, mikä tekee koodikannan rakenteen ja hierarkian selkeämmän.

6. Käytä etuliitteitä tai jälkiliitteitä

Voit lisätä lisäasetuksia CSS-luokka- ja ID-nimiin lisäämällä ne etu- tai jälkiliitteisiin, erityisesti suuremmissa projekteissa. Voit käyttää etuliitettä kuten js- osoittaa, että luokka tai tunnus tarjoaa JavaScript-ominaisuudet. JavaScriptin nimeämiskäytännöt yhdistettynä näihin CSS-nimeämiskäytäntöihin voi säästää aikaa ja vaivaa pitkällä aikavälillä.

 HTML JavaScript-etuliitteellä 
<-painikettaluokkaa="js-toggle">Vaihda-painiketta>
<divid="js-modal">Modaalinendiv>

7. Käytä kuvaavia nimiä

Voit ymmärtää elementin tarkoituksen, toiminnon tai sisällön paremmin kuvaavien nimien avulla.

Harkitse alla olevaa esimerkkiä:

/* Ei-kuvailevat nimet */
.sininen laatikko {
/* Tyylit täällä */
}
a {
/* Tyylit täällä */
}

Luokkien nimet sininen laatikko ja a yllä olevassa esimerkissä ei lähetä asiaankuuluvaa tietoa komponenteista, joihin ne viittaavat. Kuvailevan nimeämisen puuttuminen voi vaikeuttaa tiettyjen ohjelman sisällä olevien komponenttien tarkoitusten tai roolejen nopeaa ymmärtämistä.

Käytä kuvaavia nimiä, jotka selittävät tarkasti elementin roolin parantaa koodin luettavuutta ja ylläpidettävyyttä.

Harkitse alla olevaa parannettua esimerkkiä:

/* Kuvailevat nimet */
.tuote-kortti {
/* Tyylit täällä */
}
.navigointilinkki {
/* Tyylit täällä */
}

Luokkien nimet tuote-kortti ja navigointi-linkki päivitetyssä versiossa tee selväksi, mitä tarkoitusta kukin elementti palvelee. Koodin tutkiminen ja muokkaaminen on yksinkertaisempaa näiden kuvaavien nimien avulla.

Kuvaavien nimien käyttäminen hyödyttää koodikannan parissa työskenteleviä nykyisiä ja potentiaalisia tulevia kehittäjiä. Kun palaat koodiin jonkin ajan kuluttua, voit helposti ymmärtää kappaleiden rakenteen ja toiminnan.

8. Käytä lyhyitä ja ytimekkäitä nimiä

Vaikka erottavat nimet ovat tärkeitä, on myös tärkeää pitää ne tiiviinä. Pitkät luokka- ja tunnusnimet voivat vaikeuttaa koodin lukemista ja ylläpitämistä. Yritä löytää tasapaino lyhyen ja yksityiskohtaisuuden välillä. Harkitse lisäksi tunnettujen lyhenteiden tai lyhenteiden käyttöä projektin yhteydessä.

Harkitse tapausta, jossa haluat käyttää CSS: ää verkkosivustosi navigointivalikon mukauttamiseen. Voit käyttää lyhyempiä, tarkempia nimiä, kuten nav-kohde tai nav-linkki pitkien sijaan nav-käyttöliittymä tai Main-navigation-link.

.nav-kohde {
/* Navigointivalikon kohteiden tyylit */
}
.nav-linkki {
/* Navigointilinkkien tyylit */
}

Lyhenteiden tai suosittujen lyhenteiden käyttäminen projektin yhteydessä, kuten nav varten navigointi, saattaa helpottaa koodin ymmärtämistä muille ohjelmoijille.

Parhaat käytännöt CSS-luokkien ja -tunnusten nimeämiseen

JavaScript-projektissa on erittäin tärkeää nimetä CSS-luokat ja tunnukset oikein koodin luettavuuden, ylläpidon ja skaalautuvuuden kannalta.

Voit yksinkertaistaa tyylisivuja ja parantaa koodin laatua. Kun varaat aikaa hyvien nimeämiskäytäntöjen laatimiseen, se kannattaa pitkällä aikavälillä, koska sinun ja muiden on helpompi ymmärtää ja ylläpitää koodikantaa.