Vývojári často zápasia s pomenovaním tried CSS a ID. Postupujte podľa týchto osvedčených postupov pre efektívne pomenovanie.
Konvencie názvov pre triedy CSS a ID majú významnú úlohu pri pochopení a udržiavaní kódu v projekte JavaScript. Použité názvy môžu zlepšiť prehľadnosť, opätovnú použiteľnosť a flexibilitu kódovej základne. Pri pomenovávaní tried CSS a ID v projekte JavaScript je dôležité dodržiavať osvedčené postupy.
1. Použite sémantické názvy
Rozhodujúci je výber názvov, ktoré presne vysvetľujú funkciu alebo účel prvku. Sémantické názvy poskytujú zmysluplný kontext a uľahčujú pochopenie kódu.
Napríklad namiesto používania tradičných názvov ako box alebo držiak, skúste použiť mená ako hlavička alebo bočný panel ktoré odrážajú špecifickú úlohu komponentu.
/* Príklad sémantických mien */
.hlavička {}
.bočný panel {}
2. Použite konvencie konzistentného pomenovania
Pri pomenovaní tried CSS a ID je kľúčová konzistentnosť. Použitie rovnakého štandardu názvov vo všetkých oblastiach zjednodušuje udržiavanie štruktúry kódovej základne.
Konvencie pomenovania BEM (Block Element Modifier) a OOCSS (Object-Oriented CSS) sú najpreferovanejšie.
Na písanie kódu CSS, ktorý je modulárny, spravovateľný a škálovateľný, môžete použiť konvenciu pomenovania OOCSS. Tu je ukážka toho, ako môžete vytvorte navigačnú ponuku pomocou OOCSS:
/* Štruktúra */.nav {
displej: flex;
v štýle zoznamu: žiadny;
}.nav__item {
okraj-pravý: 1rem;
}.nav__link {
text-dekorácia: žiadny;
farba: #333;
}/* Vzhľad */
.nav__link:vznášať sa {
text-dekorácia: zdôrazniť;
}
V tomto príklade máte dve odlišné časti kódu pre navigačnú ponuku, jednu pre štruktúru a jednu pre vzhľad. Časť vzhľad popisuje farby a iné štýly, ktoré jej dodávajú príťažlivý vzhľad, zatiaľ čo časť štruktúry vysvetľuje, ako a kde budú umiestnené položky ponuky.
3. Vyhnite sa priestorom názvov
V CSS sú priestory názvov sémantické štruktúry, ktoré vám umožňujú poskytnúť predponu priestoru názvov pre ich výbery. Na rozlíšenie medzi modulmi, knižnicami alebo inými časťami kódovej základne, ktoré by mohli mať konfliktné názvy tried, sa používa predpona priestoru názvov.
Táto funkcia je užitočná, môže však spôsobiť problémy so špecifickosťou a udržiavateľnosťou.
Jednou z najväčších nevýhod menných priestorov je obtiažnosť manipulácie so špecifickosťou selektora. Predpona priestoru názvov môže urobiť výber konkrétnejším, čo sťaží prepísanie štýlov v budúcnosti.
To vedie k nafúknutiu kódu CSS, ktorý je v priebehu času mätúci a náročný na údržbu.
Vezmite si napríklad:
/* S priestorom názvov */.môj-modul.obsah {
farba pozadia: Modrá;
}/* Bez menného priestoru */
.záhlavie modulu {
farba pozadia: červená;
}.modul-obsah {
farba pozadia: žltá;
}
Predpona priestoru názvov .môj-modul a .obsah oba sa používajú v hlavnom bloku kódu. Vo výsledku sa výber stáva presnejším, čím sa stáva prevažujúci budúci štýl náročnejším.
V druhej časti je menný priestor nahradený popisnými názvami tried .záhlavie modulu a .modul-obsah. Okrem toho, že kód je zrozumiteľnejší, zjednodušuje sa aj jeho údržba.
Používanie menných priestorov pridáva vášmu programu zbytočnú zložitosť, najmä ak veľa ľudí pracuje na rôznych častiach toho istého projektu. Možno bude pre vás ťažké porozumieť a zmeniť kód toho druhého, pretože rôzne tímy môžu používať rôzne predpony menného priestoru.
Použite názvy tried, ktoré sú popisné, napríklad:
.hlavička {farba pozadia: červená;
}
.obsah {
farba pozadia: žltá;
}
Použitím popisných názvov tried sa môžete zbaviť požiadavky na priestory názvov a vaša kódová základňa bude dobre štruktúrovaná a ľahko pochopiteľná.
4. Vyhnite sa globálnym menám
V projektoch JavaScript je kritické vyhnúť sa globálnym názvom tried CSS a ID. Globálne názvy komplikujú údržbu kódu a zvyšujú možnosť pomenovania rizík. Aby ste zabezpečili trvalejšiu a škálovateľnejšiu kódovú základňu, je dobré použiť presnejšie názvy v rámci komponentu alebo modulu.
Zvážte príklad nižšie:
Nesprávne používanie globálnych názvov<divtrieda="kontajner">
<divtrieda="bočný panel">Obsah tu
div>
div>
Všeobecné názvy tried bočný panel a kontajner vo vyššie uvedenom príklade sú náchylné na kolízie s inými šablónami štýlov alebo kódom JavaScript v rámci projektu. Napríklad, ak dva predlohy štýlov určujú to isté .bočný panel triedy, jeden s modrým pozadím a druhý s červeným pozadím, farba bočného panela bude závisieť od toho, ktoré štýly sa načítajú naposledy. Z toho môžu vzniknúť neočakávané a nepredvídateľné výsledky.
Na minimalizáciu týchto problémov je lepšie použiť presnejšie názvy v rámci príslušného komponentu alebo modulu.
Pozrite sa na rozšírenú verziu.
Vylepšené konkrétnymi menami<divtrieda="header__container">
<divtrieda="sidebar__content">Obsah tu
div>
div>
V zmenenej verzii názvy tried header__container a sidebar__content aby bolo jasné, na čo každý prvok slúži a na čo slúži.
Používanie špecifických názvov znižuje riziko konfliktov názvov a zaisťuje, že štýly ovplyvnia iba predpokladané komponenty v ich príslušných komponentoch alebo moduloch.
5. Použite konvenciu pomenovania BEM
Konvencia pomenovania BEM (Block Element Modifier) je populárna na pomenovanie tried CSS a ID v projektoch JavaScript. BEM poskytuje štruktúrovaný a modulárny spôsob pomenovávania prvkov, podporuje opätovnú použiteľnosť a zjednodušuje údržbu kódovej základne.
Konvencie BEM pozostávajú z blokov, prvkov a modifikátorov. Prvok na vysokej úrovni alebo samostatný komponent sa nazýva blok. Prvky sú časti bloku, ktoré závisia od kontextu bloku. Modifikátory môžu zmeniť vzhľad alebo správanie bloku alebo prvku.
Tu je príklad použitia konvencie pomenovania BEM:
/* Príklad názvovej konvencie BEM *//* Blokovať */
.hlavička {}/* Prvok bloku */
.header__logo {}
.header__menu {}
/* Modifikátor prvku */
.header__menu--active {}
Vyššie uvedený obrázok zobrazuje a hlavička blok s a logo a a Ponuka element. The Ponuka položka dostane aktívny zmeniť, aby ukázal, že sa stal aktívnym.
Môžete rýchlo identifikovať základné komponenty a prepojenia medzi rôznymi časťami, vďaka čomu je štruktúra a hierarchia kódovej základne prehľadnejšia.
6. Použite predpony alebo prípony
K názvom tried CSS a ID môžete pridať ďalšie nastavenia ich pridaním predpony alebo dodatočnej opravy, najmä vo väčších projektoch. Môžete použiť predponu ako js- na označenie, že trieda alebo ID ponúka možnosti JavaScriptu. Konvencie pomenovania JavaScript v spojení s týmito konvenciami pomenovania CSS vám môže z dlhodobého hľadiska ušetriť čas a námahu.
HTML s predponou JavaScript<tlačidlotrieda="js-toggle">Prepnúťtlačidlo>
<divid="js-modal">Modálnydiv>
7. Použite popisné názvy
Pomocou popisných názvov môžete lepšie pochopiť účel, funkciu alebo obsah prvku.
Zvážte príklad nižšie:
/* Neopisné názvy */.modrá skrinka {
/* Štýly tu */
}
a {
/* Štýly tu */
}
Názvy tried modrý box a a vo vyššie uvedenom príklade neprenášajú žiadne relevantné informácie o komponentoch, na ktoré odkazujú. Absencia popisného pomenovania vám môže sťažiť rýchle pochopenie účelov alebo úloh určitých komponentov v programe.
Používajte popisné názvy, ktoré presne vysvetľujú úlohu prvku zlepšiť čitateľnosť a udržiavateľnosť kódu.
Zvážte vylepšený príklad nižšie:
/* Opisné názvy */.produktová karta {
/* Štýly tu */
}
.navigation-link {
/* Štýly tu */
}
Názvy tried produktová karta a navigačný odkaz v aktualizovanej verzii je zrejmé, na aký účel každý prvok slúži. S týmito popisnými názvami bude skúmanie a úprava kódu jednoduchšie.
Používanie popisných názvov prináša výhody súčasným a potenciálnym budúcim vývojárom pracujúcim na kódovej základni. Pri opätovnom prezeraní kódu po určitom čase môžete ľahko pochopiť štruktúru a fungovanie častí.
8. Používajte krátke a výstižné názvy
Aj keď sú výrazné názvy nevyhnutné, dôležité je aj ich stručnosť. Dlhé názvy tried a ID môžu sťažiť čítanie a údržbu kódu. Pokúste sa nájsť rovnováhu medzi stručným a podrobným. Okrem toho zvážte použitie známych akronymov alebo skratiek v kontexte projektu.
Zvážte prípad, keď chcete použiť CSS na prispôsobenie navigačnej ponuky na vašom webe. Môžete použiť kratšie, konkrétnejšie názvy ako napr navigačná položka alebo navigačný odkaz namiesto dlhých ako navigačné rozhranie alebo main-navigation-link.
.nav-item {
/* Štýly pre položky navigačnej ponuky */
}
.nav-link {
/* Štýly pre navigačné odkazy */
}
Používanie akronymov alebo populárnych skratiek v kontexte projektu, ako napr nav pre navigácia, môže výrazne uľahčiť pochopenie kódu pre ostatných programátorov.
Osvedčené postupy pre pomenovanie tried CSS a ID
V projekte JavaScript je dôležité správne pomenovať triedy CSS a ID pre čitateľnosť kódu, údržbu a škálovateľnosť.
Môžete zjednodušiť šablóny štýlov a zlepšiť kvalitu kódu. Venovať čas stanoveniu dobrých konvencií pomenovávania sa z dlhodobého hľadiska oplatí, pretože vám a ostatným uľahčí pochopenie a udržiavanie kódovej základne.
