توسعه دهندگان اغلب با نامگذاری کلاس ها و شناسه های CSS مشکل دارند. این بهترین شیوه ها را برای نامگذاری کارآمد دنبال کنید.
قراردادهای نامگذاری کلاس ها و شناسه های CSS نقش مهمی در درک و حفظ کد در پروژه جاوا اسکریپت دارند. نام‌های مورد استفاده ممکن است وضوح، قابلیت استفاده مجدد و انعطاف‌پذیری پایگاه کد را افزایش دهند. هنگام نامگذاری کلاس‌ها و شناسه‌های CSS در پروژه جاوا اسکریپت، پیروی از بهترین روش‌ها مهم است.
1. از نام های معنایی استفاده کنید
انتخاب نام هایی که دقیقاً عملکرد یا هدف عنصر را توضیح دهند بسیار مهم است. نام‌های معنایی زمینه معناداری را فراهم می‌کنند و درک کد را آسان‌تر می‌کنند.
به عنوان مثال، به جای استفاده از نام های سنتی مانند جعبه یا نگهدارنده، سعی کنید از نام هایی مانند هدر یا نوار کناری استفاده کنید که نقش خاص مولفه را منعکس می کند.
/* Semantic names example */
.header {}
.sidebar {}
2. از قراردادهای نامگذاری ثابت استفاده کنید
هنگام نامگذاری کلاس‌ها و شناسه‌های CSS، سازگاری کلیدی است. استفاده از استاندارد نامگذاری یکسان در سراسر تخته، حفظ ساختار پایگاه کد را ساده تر می کند.
قراردادهای نامگذاری BEM (Block Element Modifier) و OOCSS (CSS شی گرا) ترجیح داده شده ترین قراردادهای نامگذاری هستند.
می‌توانید از قرارداد نامگذاری OOCSS برای نوشتن کدهای CSS که مدولار، قابل مدیریت و مقیاس‌پذیر هستند استفاده کنید. در اینجا تصویری از نحوه ایجاد یک منوی ناوبری با استفاده از OOCSS آورده شده است:
/* Structure */
.nav {
display: flex;
list-style: none;
}
.nav__item {
margin-right: 1rem;
}
.nav__link {
text-decoration: none;
color: #333;
}
/* Appearance */
.nav__link:hover {
text-decoration: underline;
}
شما در این مثال دو بخش مجزا از کد منوی پیمایش دارید، یکی برای ساختار و دیگری برای ظاهر. بخش ظاهر رنگ‌ها و سبک‌های دیگری را توصیف می‌کند که ظاهری جذاب به آن می‌دهد، در حالی که بخش ساختار توضیح می‌دهد که چگونه و کجا آیتم‌های منو قرار خواهند گرفت.
3. از فضاهای نام اجتناب کنید
در CSS، فضاهای نام ساختارهای معنایی هستند که به شما اجازه می دهند یک پیشوند فضای نام برای انتخاب های خود ارائه دهید. به منظور تمایز بین ماژول‌ها، کتابخانه‌ها یا سایر بخش‌های پایگاه کد که می‌توانند نام کلاس‌های متضاد داشته باشند، از پیشوند فضای نام استفاده می‌شود.
با این حال، این ویژگی مفید است، ممکن است باعث مشکلاتی در ویژگی و قابلیت نگهداری شود.
یکی از بزرگترین معایب فضاهای نام، مشکل در رسیدگی به ویژگی انتخابگر است. پیشوند فضای نام می تواند یک انتخاب را خاص تر کند و در آینده نادیده گرفتن سبک ها را دشوارتر کند.
این منجر به نفخ کد CSS می شود، که حفظ آن در طول زمان گیج کننده و چالش برانگیز است.
به عنوان مثال:
/* With namespace */
.my-module .content {
background-color: blue;
}
/* Without namespace */
.module-header {
background-color: red;
}
.module-content {
background-color: yellow;
}
پیشوند فضای نام .my-module و .content هر دو در بلوک اصلی کد استفاده می شوند. در نتیجه انتخاب دقیق‌تر می‌شود و سبک آینده را چالش‌برانگیزتر می‌کند.
در بخش دوم، فضای نام با نام‌های کلاس توصیفی .module-header و .module-content جایگزین می‌شود. این کار علاوه بر اینکه درک کد را آسان‌تر می‌کند، نگهداری آن را نیز ساده‌تر می‌کند.
استفاده از فضاهای نام پیچیدگی غیرضروری به برنامه شما می‌افزاید، به خصوص زمانی که افراد زیادی روی بخش‌های مختلف یک پروژه کار می‌کنند. ممکن است درک و تغییر کد یکدیگر برای شما دشوار باشد زیرا تیم های مختلف ممکن است از پیشوندهای فضای نام متفاوتی استفاده کنند.
به عنوان مثال از نام کلاس ها استفاده کنید که توصیفی هستند:
.header {
background-color: red;
}
.content {
background-color: yellow;
}
با استفاده از نام کلاس های توصیفی، ممکن است نیاز به فضاهای نام را از بین ببرید، و می توانید پایگاه کد خود را به خوبی ساختار یافته و به راحتی قابل درک نگه دارید.
4. از نام های جهانی اجتناب کنید
در پروژه های جاوا اسکریپت، اجتناب از نام های سراسری برای کلاس ها و شناسه های CSS بسیار مهم است. نام‌های جهانی نگهداری کد را پیچیده می‌کنند و احتمال خطرات نامگذاری را افزایش می‌دهند. برای اطمینان از یک پایگاه کد بادوام تر و مقیاس پذیرتر، خوب است که از نام های دقیق تری در محدوده یک جزء یا ماژول استفاده کنید.
به مثال زیر توجه کنید:
<!-- Incorrect use of global names -->
<div class="container">
<div class="sidebar">
<!-- Content here -->
</div>
</div>
نوار کناری و کانتینر نام‌های کلاس عمومی در مثال بالا در معرض برخورد با سایر شیوه نامه‌ها یا کد جاوا اسکریپت در داخل پروژه هستند. به عنوان مثال، اگر دو صفحه سبک یک کلاس نوار کناری را مشخص کنند، یکی با پس‌زمینه آبی و دیگری با پس‌زمینه قرمز، رنگ نوار کناری بستگی به این دارد که کدام برگه سبک بارگیری می‌شود. ممکن است نتایج غیرمنتظره و غیر قابل پیش بینی از این اتفاق بیفتد.
برای به حداقل رساندن این مشکلات، بهتر است از نام‌های دقیق‌تری استفاده کنید که در داخل کامپوننت یا ماژول مربوطه باشد.
به یک نسخه پیشرفته نگاه کنید.
<!-- Improved with specific names -->
<div class="header__container">
<div class="sidebar__content">
<!-- Content here -->
</div>
</div>
در نسخه تغییر یافته، نام کلاس header__container و sidebar__content مشخص می کند که هر عنصر برای چه چیزی است و چه کاری انجام می دهد.
استفاده از نام‌های خاص خطر تداخل نامگذاری را کاهش می‌دهد و تضمین می‌کند که سبک‌ها فقط بر اجزای پیش‌بینی‌شده در داخل مؤلفه‌ها یا ماژول‌های مربوطه تأثیر می‌گذارند.
5. از قرارداد نامگذاری BEM استفاده کنید
قرارداد نامگذاری BEM (Block Element Modifier) برای نامگذاری کلاس‌ها و شناسه‌های CSS در پروژه‌های جاوا اسکریپت محبوب است. BEM روشی ساختاریافته و مدولار برای نامگذاری عناصر ارائه می‌کند، قابلیت استفاده مجدد را تشویق می‌کند و حفظ پایگاه‌های کد را آسان‌تر می‌کند.
قراردادهای BEM از بلوک ها، عناصر و اصلاح کننده ها تشکیل شده است. یک عنصر سطح بالا یا یک جزء مستقل، بلوک نامیده می شود. عناصر اجزای یک بلوک هستند که به بافت بلوک متکی هستند. اصلاح کننده ها می توانند ظاهر یا رفتار یک بلوک یا عنصر را تغییر دهند.
در اینجا یک مثال با استفاده از قرارداد نامگذاری BEM آورده شده است:
/* BEM Naming Convention example */
/* Block */
.header {}
/* Element of the block */
.header__logo {}
.header__menu {}
/* Modifier of the element */
.header__menu--active {}
تصویر بالا یک بلوک هدر را با یک لوگو و یک عنصر منو نمایش می دهد. آیتم منو تغییر فعال را دریافت می کند تا نشان دهد که فعال شده است.
شما می توانید به سرعت اجزای اساسی و ارتباطات بین بخش های مختلف را شناسایی کنید و ساختار و سلسله مراتب پایگاه کد را واضح تر کنید.
6. از پیشوندها یا پسوندها استفاده کنید
می‌توانید با پیشوند یا پسوند کردن نام‌های کلاس CSS و شناسه، تنظیمات اضافی را به خصوص در پروژه‌های بزرگ‌تر، اضافه کنید. می توانید از پیشوندی مانند js- برای نشان دادن اینکه یک کلاس یا شناسه قابلیت های جاوا اسکریپت را ارائه می دهد استفاده کنید. قراردادهای نامگذاری جاوا اسکریپت همراه با این قراردادهای نامگذاری CSS می توانند در طولانی مدت در زمان و تلاش شما صرفه جویی کنند.
<!-- HTML with JavaScript prefix -->
<button class="js-toggle">Toggle</button>
<div id="js-modal">Modal</div>
7. از نام های توصیفی استفاده کنید
شما می توانید هدف، عملکرد یا محتوای یک عنصر را از طریق نام های توصیفی بهتر درک کنید.
به مثال زیر توجه کنید:
/* Non-descriptive names */
.blue-box {
/* Styles here */
}
a {
/* Styles here */
}
نام‌های کلاس blue-box و a در مثال بالا هیچ اطلاعات مرتبطی در مورد مؤلفه‌هایی که به آنها ارجاع می‌دهند منتقل نمی‌کنند. عدم وجود نامگذاری توصیفی می‌تواند درک سریع اهداف یا نقش‌های اجزای خاص در داخل برنامه را برای شما دشوار کند.
از نام های توصیفی استفاده کنید که نقش عنصر را برای بهبود خوانایی و نگهداری کد به دقت توضیح دهد.
مثال بهبود یافته زیر را در نظر بگیرید:
/* Descriptive names */
.product-card {
/* Styles here */
}
.navigation-link {
/* Styles here */
}
نام‌های کلاس product-card و navigation-link در نسخه به‌روز شده مشخص می‌کند که هر عنصر چه هدفی را دنبال می‌کند. کاوش و ویرایش کد را با این نام‌های توصیفی ساده‌تر خواهید یافت.
استفاده از نام های توصیفی به نفع توسعه دهندگان فعلی و بالقوه آینده است که روی پایگاه کد کار می کنند. وقتی بعد از مدتی کد را دوباره مرور می کنید، به راحتی می توانید ساختار و عملکرد قطعات را درک کنید.
8. از نام های کوتاه و مختصر استفاده کنید
در حالی که نام های متمایز ضروری هستند، مختصر نگه داشتن آنها نیز مهم است. نام‌های بلند کلاس و شناسه ممکن است خواندن و نگهداری کد را دشوارتر کند. سعی کنید بین مختصر و جزئی بودن تعادل برقرار کنید. علاوه بر این، استفاده از مخفف ها یا اختصارات شناخته شده را در زمینه پروژه در نظر بگیرید.
موردی را در نظر بگیرید که می خواهید از CSS برای سفارشی کردن منوی ناوبری در وب سایت خود استفاده کنید. می‌توانید از نام‌های کوتاه‌تر و خاص‌تر مانند nav-item یا nav-link به جای نام‌های طولانی مانند nav-interface یا main-navigation-link استفاده کنید.
.nav-item {
/* Styles for navigation menu items */
}
.nav-link {
/* Styles for navigation links */
}
استفاده از کلمات اختصاری یا اختصارات رایج در زمینه پروژه، مانند nav برای پیمایش، ممکن است درک کد را برای برنامه نویسان دیگر آسان تر کند.
بهترین روش ها برای نام گذاری کلاس ها و شناسه های CSS
در پروژه جاوا اسکریپت، نامگذاری مناسب کلاس‌ها و شناسه‌های CSS برای خوانایی، نگهداری و مقیاس‌پذیری کد بسیار مهم است.
می توانید شیوه نامه ها را ساده تر کنید و کیفیت کد را بهبود بخشید. وقت گذاشتن برای تنظیم قراردادهای نامگذاری خوب، در درازمدت با آسان‌تر کردن درک و حفظ پایگاه کد برای شما و دیگران نتیجه خواهد داد.