Programeri se često muče s imenovanjem CSS klasa i ID-ova. Slijedite ove najbolje prakse za učinkovito imenovanje.
Konvencije imenovanja za CSS klase i ID-ove imaju značajnu ulogu u razumijevanju i održavanju koda u JavaScript projektu. Imena koja se koriste mogu poboljšati jasnoću baze koda, mogućnost ponovne upotrebe i fleksibilnost. Pri imenovanju CSS klasa i ID-ova u JavaScript projektu važno je pridržavati se najboljih praksi.
1. Koristite semantička imena
Ključno je odabrati nazive koji točno objašnjavaju funkciju ili svrhu elementa. Semantički nazivi daju smislen kontekst i čine kôd lakšim za razumijevanje.
Na primjer, umjesto korištenja tradicionalnih imena kao što su kutija ili držač, pokušajte koristiti imena poput Zaglavlje ili bočna traka koji odražavaju specifičnu ulogu komponente.
/* Primjer semantičkih imena */
.Zaglavlje {}
.bočna traka {}
2. Koristite dosljedne konvencije imenovanja
Dosljednost je ključna pri imenovanju CSS klasa i ID-ova. Korištenje istog standarda za imenovanje u svim segmentima olakšava održavanje strukture kodne baze.
BEM (Block Element Modifier) i OOCSS (Object-Oriented CSS) konvencije imenovanja najpoželjnije su konvencije imenovanja.
Možete koristiti OOCSS konvenciju imenovanja za pisanje CSS koda koji je modularan, upravljiv i skalabilan. Evo ilustracije kako možete stvoriti navigacijski izbornik koristeći OOCSS:
/* Struktura */.nav {
prikaz: savijati;
u stilu popisa: nikakav;
}.nav__stavka {
margin-desno: 1rem;
}.nav__link {
tekst-ukras: nikakav;
boja: #333;
}/* Izgled */
.nav__link:lebdjeti {
tekst-ukras: naglasiti;
}
U ovom primjeru imate dva različita dijela koda za navigacijski izbornik, jedan za strukturu i jedan za izgled. Dio izgleda opisuje boje i druge stilove koji mu daju privlačan izgled, dok dio strukture objašnjava kako i gdje će se stavke izbornika postaviti.
3. Izbjegavajte prostore imena
U CSS-u, prostori imena su semantičke strukture koje vam omogućuju da date prefiks prostora imena za njihove odabire. Kako bi se razlikovali moduli, biblioteke ili drugi dijelovi kodne baze koji bi mogli imati proturječna imena klasa, koristi se prefiks prostora imena.
Ova je značajka korisna, no može uzrokovati probleme specifičnosti i održavanja.
Jedan od najvećih nedostataka prostora imena je poteškoća u rukovanju specifičnostima selektora. Prefiks prostora imena može učiniti odabir preciznijim, što otežava nadjačavanje stilova u budućnosti.
To dovodi do preopterećenja CSS koda, što je zbunjujuće i izazovno za održavanje tijekom vremena.
Uzmimo, na primjer:
/* S prostorom imena */.moj-modul.sadržaj {
boja pozadine: plava;
}/* Bez imenskog prostora */
.zaglavlje modula {
boja pozadine: Crvena;
}.modul-sadržaj {
boja pozadine: žuta boja;
}
Prefiks prostora imena .moj-modul i .sadržaj oba se koriste u glavnom bloku koda. Kao rezultat toga odabir postaje precizniji, čineći nadjačavanje budućeg stila izazovnijim.
U drugom dijelu imenski prostor zamijenjen je opisnim nazivima klasa .zaglavlje modula i .modul-sadržaj. Osim što je kod lakši za razumijevanje, ovo ga čini i jednostavnijim za održavanje.
Korištenje imenskih prostora dodaje nepotrebnu složenost vašem programu, osobito kada mnogo ljudi radi na različitim dijelovima istog projekta. Možda će vam biti teško razumjeti i međusobno mijenjati kod jer različiti timovi mogu koristiti različite prefikse prostora imena.
Koristite nazive klasa koji su opisni, na primjer:
.Zaglavlje {boja pozadine: Crvena;
}
.sadržaj {
boja pozadine: žuta boja;
}
Korištenjem deskriptivnih naziva klasa, možete ukloniti zahtjev za imenskim prostorima, a svoju bazu koda možete održati dobro strukturiranom i lako razumljivom.
4. Izbjegavajte globalna imena
U JavaScript projektima, izbjegavanje globalnih naziva za CSS klase i ID-ove je kritično. Globalna imena kompliciraju održavanje koda i povećavaju mogućnost rizika imenovanja. Kako biste osigurali trajniju i skalabilniju bazu koda, dobro je koristiti preciznija imena unutar opsega komponente ili modula.
Razmotrite primjer u nastavku:
Neispravna uporaba globalnih imena<divrazreda="kontejner">
<divrazreda="bočna traka">Sadržaj ovdje
div>
div>
Generička imena klasa bočna traka i spremnik u gornjem primjeru su osjetljivi na sukobe s drugim stilskim listovima ili JavaScript kodom unutar projekta. Na primjer, ako dva stilska lista specificiraju isto .bočna traka klase, jedan s plavom pozadinom, a drugi s crvenom pozadinom, boja bočne trake ovisit će o tome koja se lista stilova zadnja učitava. Ovo može dovesti do neočekivanih i nepredvidivih rezultata.
Bolje je koristiti preciznije nazive koji obuhvaćaju relevantnu komponentu ili modul kako bi se ovi problemi sveli na minimum.
Pogledajte poboljšanu verziju.
Poboljšano s određenim imenima<divrazreda="zaglavlje__spremnik">
<divrazreda="bočna traka__sadržaj">Sadržaj ovdje
div>
div>
U promijenjenoj verziji nazivi klasa zaglavlje__spremnik i bočna traka__sadržaj razjasnite čemu svaki element služi i čemu služi.
Korištenje specifičnih naziva smanjuje rizik od sukoba imenovanja i osigurava da stilovi utječu samo na predviđene komponente unutar njihovih komponenti ili modula.
5. Koristite BEM konvenciju imenovanja
BEM (Block Element Modifier) konvencija imenovanja popularna je za imenovanje CSS klasa i ID-ova u JavaScript projektima. BEM pruža strukturiran i modularan način imenovanja elemenata, potiče ponovnu upotrebu i olakšava održavanje baza kodova.
BEM konvencije sastoje se od blokova, elemenata i modifikatora. Element visoke razine ili samostalna komponenta naziva se blok. Elementi su sastavni dijelovi bloka koji se oslanjaju na kontekst bloka. Modifikatori mogu promijeniti izgled ili ponašanje bloka ili elementa.
Evo primjera korištenja BEM konvencije imenovanja:
/* Primjer BEM konvencije o imenovanju *//* Blok */
.Zaglavlje {}/* Element bloka */
.zaglavlje__logo {}
.zaglavlje__izbornik {}
/* Modifikator elementa */
.header__menu--aktivan {}
Gornja ilustracija prikazuje a Zaglavlje blok s a logo i a Jelovnik element. The Jelovnik stavka prima aktivan promijeniti da pokaže da je postao aktivan.
Možete brzo identificirati temeljne komponente i veze između različitih dijelova, čineći strukturu i hijerarhiju baze koda jasnijom.
6. Koristite prefikse ili sufikse
Možete dodati dodatne postavke nazivima CSS klasa i ID-a tako da im dodate prefiks ili postfiks, posebno u većim projektima. Možete koristiti prefiks poput js- za označavanje da klasa ili ID nudi mogućnosti JavaScripta. JavaScript konvencije o imenovanju u kombinaciji s ovim CSS konvencijama imenovanja mogu vam dugoročno uštedjeti vrijeme i trud.
HTML s JavaScript prefiksom<dugmerazreda="js-prebaci">Prebacivanjedugme>
<diviskaznica="js-modal">Modalnidiv>
7. Koristite opisne nazive
Pomoću opisnih naziva možete bolje razumjeti svrhu, funkciju ili sadržaj elementa.
Razmotrite primjer u nastavku:
/* Neopisna imena */.plava kutija {
/* Stilovi ovdje */
}
a {
/* Stilovi ovdje */
}
Imena klasa plava kutija i a u gornjem primjeru ne prenose relevantne informacije o komponentama na koje se pozivaju. Nedostatak opisnog imenovanja može vam otežati brzo razumijevanje svrhe ili uloge određenih komponenti unutar programa.
Koristite opisne nazive koji točno objašnjavaju ulogu elementa poboljšati čitljivost i mogućnost održavanja koda.
Razmotrite poboljšani primjer u nastavku:
/* Opisna imena */.kartica proizvoda {
/* Stilovi ovdje */
}
.navigacija-link {
/* Stilovi ovdje */
}
Imena klasa kartica proizvoda i navigacijska veza u ažuriranoj verziji jasno pokazuju kojoj svrsi svaki element služi. Istraživanje i uređivanje koda bit će vam jednostavnije s ovim opisnim nazivima.
Korištenje opisnih naziva koristi sadašnjim i potencijalnim budućim programerima koji rade na bazi koda. Kada ponovno pregledavate kod nakon nekog vremena, lako možete razumjeti strukturu i rad dijelova.
8. Koristite kratka i sažeta imena
Iako su prepoznatljiva imena bitna, važno je i da budu sažeta. Duga imena klasa i ID-ova mogu otežati čitanje i održavanje koda. Pokušajte pronaći ravnotežu između kratkoće i detaljnosti. Uz to, razmislite o korištenju dobro poznatih akronima ili kratica u kontekstu projekta.
Razmotrite slučaj kada želite koristiti CSS za prilagodbu navigacijskog izbornika na vašoj web stranici. Možete koristiti kraća, specifičnija imena poput navigacijska stavka ili navigacijska veza umjesto dugih poput navigacijsko sučelje ili glavna-navigacijska-veza.
.nav-stavka {
/* Stilovi za stavke navigacijskog izbornika */
}
.navigacijska veza {
/* Stilovi za navigacijske veze */
}
Korištenje akronima ili popularnih kratica u kontekstu projekta, kao što je nav za navigacija, mogao bi drugim programerima učiniti kôd lakšim za razumijevanje.
Najbolji primjeri iz prakse za imenovanje CSS klasa i ID-ova
U JavaScript projektu ključno je prikladno imenovati CSS klase i ID-ove za čitljivost koda, održavanje i skalabilnost.
Možete pojednostaviti tablice stilova i poboljšati kvalitetu koda. Odvajanje vremena za utvrđivanje dobrih konvencija imenovanja dugoročno će se isplatiti tako što će vama i drugima olakšati razumijevanje i održavanje baze kodova.