Vývojáři se často potýkají s pojmenováním tříd CSS a ID. Postupujte podle těchto doporučených postupů pro efektivní pojmenování.
Konvence pojmenování tříd CSS a ID hrají významnou roli při porozumění a údržbě kódu v projektu JavaScript. Použité názvy mohou zlepšit přehlednost, opětovnou použitelnost a flexibilitu kódové základny. Při pojmenovávání tříd CSS a ID v projektu JavaScript je důležité dodržovat osvědčené postupy.
1. Používejte sémantická jména
Rozhodující je výběr názvů, které přesně vysvětlují funkci nebo účel prvku. Sémantické názvy poskytují smysluplný kontext a usnadňují pochopení kódu.
Například namísto používání tradičních jmen jako box nebo držák, zkuste použít jména jako záhlaví nebo postranní panel které odrážejí specifickou roli komponenty.
/* Příklad sémantických jmen */
.záhlaví {}
.postranní panel {}
2. Použijte konvence konzistentního pojmenování
Při pojmenovávání tříd CSS a ID je klíčová konzistence. Použití stejného standardu pojmenování ve všech oblastech zjednodušuje údržbu struktury kódové základny.
Konvence pojmenování BEM (Block Element Modifier) a OOCSS (Object-Oriented CSS) jsou nejvýhodnějšími konvencemi pojmenování.
K psaní kódu CSS, který je modulární, spravovatelný a škálovatelný, můžete použít konvenci pojmenování OOCSS. Zde je ukázka toho, jak můžete vytvořit navigační menu pomocí OOCSS:
/* Struktura */.nav {
Zobrazit: flex;
ve stylu seznamu: žádný;
}.nav__item {
okraj-pravý: 1rem;
}.nav__link {
text-dekorace: žádný;
barva: #333;
}/* Vzhled */
.nav__link:vznášet se {
text-dekorace: zdůraznit;
}
V tomto příkladu máte dvě odlišné části kódu pro navigační nabídku, jednu pro strukturu a jednu pro vzhled. Část vzhledu popisuje barvy a další styly, které jí dodávají přitažlivý vzhled, zatímco část struktury vysvětluje, jak a kde budou umístěny položky nabídky.
3. Vyhněte se jmenným prostorům
V CSS jsou jmenné prostory sémantické struktury, které vám umožňují poskytnout předponu jmenného prostoru pro jejich výběry. Aby bylo možné rozlišit mezi moduly, knihovnami nebo jinými částmi kódové základny, které by mohly mít konfliktní názvy tříd, používá se předpona jmenného prostoru.
Tato funkce je užitečná, může však způsobit problémy se specifičností a udržovatelností.
Jednou z největších nevýhod jmenných prostorů je obtížnost manipulace se specificitou selektoru. Předpona oboru názvů může učinit výběr konkrétnějším, takže je v budoucnu obtížnější přepsat styly.
To vede k nadýmání kódu CSS, který je matoucí a náročný na údržbu v průběhu času.
Vezměte si například:
/* S jmenným prostorem */.můj-modul.obsah {
barva pozadí: modrý;
}/* Bez jmenného prostoru */
.modul-header {
barva pozadí: Červené;
}.obsah modulu {
barva pozadí: žlutá;
}
Předpona jmenného prostoru .můj-modul a .obsah oba se používají v hlavním bloku kódu. Výběr se v důsledku toho stává přesnějším, takže převažování budoucího stylu je náročnější.
Ve druhé části je jmenný prostor nahrazen popisnými názvy tříd .modul-header a .obsah modulu. Kromě toho, že kód je srozumitelnější, usnadňuje to také jeho údržbu.
Použití jmenných prostorů přidává vašemu programu zbytečnou složitost, zvláště když mnoho lidí pracuje na různých částech stejného projektu. Může pro vás být obtížné porozumět a vzájemně měnit kódy, protože různé týmy mohou používat různé předpony jmenného prostoru.
Používejte názvy tříd, které jsou popisné, například:
.záhlaví {barva pozadí: Červené;
}
.obsah {
barva pozadí: žlutá;
}
Použitím popisných názvů tříd můžete odstranit požadavek na jmenné prostory a svou kódovou základnu můžete udržovat dobře strukturovanou a snadno srozumitelnou.
4. Vyhněte se globálním názvům
V projektech JavaScriptu je zásadní vyhnout se globálním názvům tříd CSS a ID. Globální názvy komplikují údržbu kódu a zvyšují možnost pojmenování rizik. Chcete-li zajistit trvalejší a škálovatelnější kódovou základnu, je dobré používat přesnější názvy v rámci součásti nebo modulu.
Zvažte příklad níže:
Nesprávné použití globálních názvů<divtřída="kontejner">
<divtřída="postranní panel">Obsah zde
div>
div>
Obecná jména tříd postranní panel a kontejner ve výše uvedeném příkladu jsou náchylné ke střetům s jinými šablonami stylů nebo kódem JavaScriptu v projektu. Pokud například dva předlohy stylů určují totéž .postranní panel třída, jeden s modrým pozadím a druhý s červeným pozadím, bude barva postranního panelu záviset na tom, která šablona stylů se načte naposledy. Z toho mohou vzniknout neočekávané a nepředvídatelné výsledky.
Pro minimalizaci těchto problémů je lepší používat přesnější názvy v rámci příslušné komponenty nebo modulu.
Podívejte se na vylepšenou verzi.
Vylepšeno o konkrétní jména<divtřída="header__container">
<divtřída="sidebar__content">Obsah zde
div>
div>
Ve změněné verzi názvy tříd header__container a postranní__obsah aby bylo jasné, k čemu každý prvek slouží a co dělá.
Použití konkrétních názvů snižuje riziko konfliktů názvů a zajišťuje, že styly ovlivní pouze očekávané komponenty uvnitř jejich příslušných komponent nebo modulů.
5. Použijte konvenci pojmenování BEM
Konvence pojmenování BEM (Block Element Modifier) je populární pro pojmenování tříd CSS a ID v projektech JavaScript. BEM poskytuje strukturovaný a modulární způsob pojmenování prvků, podporuje opětovné použití a usnadňuje údržbu kódových základen.
Konvence BEM se skládají z bloků, prvků a modifikátorů. Prvek na vysoké úrovni nebo samostatná komponenta se nazývá blok. Prvky jsou součásti bloku, které závisí na kontextu bloku. Modifikátory mohou změnit vzhled nebo chování bloku nebo prvku.
Zde je příklad použití konvence pojmenování BEM:
/* Příklad názvové konvence BEM *//* Blokovat */
.záhlaví {}/* Prvek bloku */
.header__logo {}
.header__menu {}
/* Modifikátor prvku */
.header__menu--aktivní {}
Výše uvedený obrázek zobrazuje a záhlaví blok s a logo a a Jídelní lístek živel. The Jídelní lístek položka obdrží aktivní změnit, aby bylo vidět, že se stala aktivní.
Můžete rychle identifikovat základní komponenty a spojení mezi různými částmi, čímž je struktura a hierarchie kódové základny jasnější.
6. Použijte předpony nebo přípony
K názvům tříd CSS a ID můžete přidat další nastavení jejich přidáním předpony nebo postfixu, zejména ve větších projektech. Můžete použít předponu jako js- k označení, že třída nebo ID nabízí možnosti JavaScriptu. JavaScriptové konvence pojmenování ve spojení s těmito konvencemi pojmenování CSS vám může z dlouhodobého hlediska ušetřit čas a úsilí.
HTML s předponou JavaScript<knoflíktřída="js-toggle">Přepnoutknoflík>
<divid="js-modal">Modálnídiv>
7. Použijte popisná jména
Pomocí popisných názvů můžete lépe porozumět účelu, funkci nebo obsahu prvku.
Zvažte příklad níže:
/* Nepopisná jména */.blue-box {
/* Styly zde */
}
A {
/* Styly zde */
}
Názvy tříd modrá krabice a A ve výše uvedeném příkladu nepřenášejí žádné relevantní informace o součástech, na které odkazují. Absence popisného pojmenování vám může ztížit rychlé pochopení účelů nebo rolí určitých komponent v programu.
Používejte popisné názvy, které přesně vysvětlují roli prvku zlepšit čitelnost a udržovatelnost kódu.
Zvažte vylepšený příklad níže:
/* Popisné názvy */.produktová karta {
/* Styly zde */
}
.navigation-link {
/* Styly zde */
}
Názvy tříd produktová karta a navigační odkaz v aktualizované verzi je zřejmé, k jakému účelu každý prvek slouží. S těmito popisnými názvy bude prozkoumávání a úpravy kódu jednodušší.
Použití popisných názvů je přínosem pro současné i potenciální budoucí vývojáře pracující na kódové základně. Při opětovné návštěvě kódu po nějaké době můžete snadno porozumět struktuře a fungování částí.
8. Používejte krátké a výstižné názvy
I když jsou výrazná jména nezbytná, důležité je také jejich stručnost. Dlouhé názvy tříd a ID mohou ztížit čtení a údržbu kódu. Pokuste se najít rovnováhu mezi stručností a podrobností. Kromě toho zvažte použití dobře známých akronymů nebo zkratek v kontextu projektu.
Zvažte případ, kdy chcete použít CSS k přizpůsobení navigační nabídky na vašem webu. Můžete použít kratší, konkrétnější názvy jako navigační položka nebo nav-link místo dlouhých jako navigační rozhraní nebo hlavní-navigační-link.
.nav-položka {
/* Styly položek navigační nabídky */
}
.nav-link {
/* Styly pro navigační odkazy */
}
Používání akronymů nebo populárních zkratek v kontextu projektu, jako např nav pro navigace, může usnadnit pochopení kódu pro ostatní programátory.
Nejlepší postupy pro pojmenování tříd CSS a ID
V projektu JavaScript je klíčové vhodně pojmenovat třídy CSS a ID pro čitelnost kódu, údržbu a škálovatelnost.
Můžete zjednodušit šablony stylů a zlepšit kvalitu kódu. Udělat si čas na stanovení dobrých konvencí pojmenování se z dlouhodobého hlediska vyplatí, protože vám i ostatním usnadní pochopení a údržbu kódové základny.