نام‌گذاری اجزای رابط کاربری (UI) یکی از چالش‌برانگیزترین مراحل در طراحی و توسعه وب‌سایت است. یک سیستم نام‌گذاری استاندارد نه تنها هماهنگی میان طراحان و برنامه‌نویسان را تسهیل می‌کند، بلکه نگهداری و توسعه پروژه‌ها را در طولانی‌مدت بهبود می‌بخشد. در این مقاله، اصول و الگوهای کاربردی نام‌گذاری کامپوننت‌ها را بررسی می‌کنیم.
---
چرا نام‌گذاری در طراحی وب و UI تا این حد اهمیت دارد؟
فیل کارلتون، دانشمند معروف علوم کامپیوتر، جمله مشهوری دارد: «در علوم کامپیوتر تنها دو چیز سخت وجود دارد: پاکسازی حافظه پنهان (Cache) و نام‌گذاری چیزها.» این موضوع در دنیای طراحی وب و توسعه فرانت‌اند نیز کاملاً صدق می‌کند.
وقتی روی یک پروژه بزرگ کار می‌کنید، عدم وجود یک سیستم نام‌گذاری مشخص می‌تواند به سرعت پروژه را به آشوب بکشد. طراح در نرم‌افزار فیگما (Figma) یک دکمه را Button-New می‌نامد، در حالی که برنامه‌نویس در کدهای خود از btn-submit استفاده می‌کند. این ناهماهنگی باعث اتلاف وقت، سوءتفاهم و در نهایت کاهش کیفیت محصول نهایی می‌شود. نام‌گذاری اصولی، زبان مشترکی میان تیم طراحی و فنی ایجاد می‌کند که به آن «منبع واحد حقیقت» یا Single Source of Truth می‌گویند.
---
اصول و استانداردهای رایج نام‌گذاری (Naming Conventions)
برای اینکه نام‌گذاری‌ها یکدست باشند، باید از الگوهای نوشتاری استانداردی استفاده کنیم. رایج‌ترین الگوها در دنیای وب عبارتند از:
۱. روش Kebab-case
در این روش، تمامی حروف به صورت کوچک نوشته شده و کلمات با خط تیره (-) از هم جدا می‌شوند. این روش در نام‌گذاری کلاس‌های CSS و آدرس‌های وب (URL) بسیار محبوب است. * مثال:primary-button یا card-profile-image
۲. روش CamelCase و PascalCase
در روش CamelCase، اولین کلمه با حرف کوچک و کلمات بعدی با حرف بزرگ شروع می‌شوند (مانندprimaryButton). در PascalCase، تمام کلمات با حرف بزرگ آغاز می‌شوند. این روش بیشتر در کامپوننت‌های جاوااسکریپت (مانند ری‌اکت و ویو) کاربرد دارد.
* مثال: PrimaryButton یا UserProfileCard
۳. متدولوژی BEM (Block-Element-Modifier)
یکی از قدرتمندترین روش‌ها برای نام‌گذاری در CSS، متدولوژی BEM است. این ساختار به سه بخش تقسیم می‌شود: * بلاک (Block): بخش مستقل و اصلی (مانندmenu)
* عنصر (Element): جزئی از بلاک که به تنهایی معنا ندارد (مانند menu__item)
* تغییردهنده (Modifier): نشان‌دهنده حالت یا ظاهر متفاوت (مانند menu__item--active)
---
ساختار منطقی برای نام‌گذاری کامپوننت‌ها
برای اینکه نام‌گذاری شما فراتر از یک سلیقه شخصی باشد و ساختاری منطقی به خود بگیرد، بهتر است از فرمول‌های مشخصی استفاده کنید. یکی از بهترین ساختارها، فرمول «دسته + نام کامپوننت + حالت/نوع» است.
دسته‌بندی بر اساس نقش (Role-based)
قبل از نام‌گذاری، مشخص کنید کامپوننت شما در کدام دسته قرار می‌گیرد: * عناصر پایه (Atoms/Basics): کوچک‌ترین اجزا مانند دکمه‌ها، اینپوت‌ها و آیکون‌ها. (مثال:button-primary)
* ترکیب‌ها (Molecules/Components): ترکیبی از چند عنصر پایه مانند یک فرم جستجو. (مثال: search-bar)
* بخش‌های بزرگ (Organisms/Layouts): بخش‌های اصلی صفحه مانند هدر یا فوتر. (مثال: site-header)
ساختار سه‌جزئی: نوع، کاربرد و حالت
هنگام نام‌گذاری یک جزء خاص، این سه سوال را از خود بپرسید: 1. این چیست؟ (نوع:button، input، card)
2. کجا یا چگونه استفاده می‌شود؟ (کاربرد: submit، profile، navigation)
3. در چه وضعیتی قرار دارد؟ (حالت: active، disabled، loading)
با ترکیب این موارد به نام‌های استانداردی مانند button-submit-loading یا card-profile-active می‌رسید.
---
ابزارها و منابع مفید برای نام‌گذاری
اگر در فرآیند نام‌گذاری دچار سردرگمی شدید، ابزارها و منابعی وجود دارند که می‌توانند به شما کمک کنند:
* فرهنگ لغت اصطلاحات UI: مستندات سیستم‌های طراحی بزرگی مانند Material Design گوگل یا Polaris شپیفای منابع فوق‌العاده‌ای برای یادگیری نام‌گذاری استاندارد هستند.
پلاگین‌های فیگما: ابزارهایی مانند Rename It* به شما کمک می‌کنند تا لایه‌ها و کامپوننت‌های خود را به صورت گروهی و بر اساس قوانین مشخص نام‌گذاری کنید.
---
نتیجه‌گیری
نام‌گذاری صحیح کامپوننت‌های UI شاید در ابتدا کاری زمان‌بر به نظر برسد، اما سرمایه‌گذاری بزرگی برای آینده پروژه است. این کار مانع از سردرگمی تیم‌ها شده، سرعت توسعه محصول را به شدت افزایش می‌دهد و فرآیند به‌روزرسانی سایت را تسهیل می‌کند. همواره سعی کنید پیش از شروع پروژه، با تیم فنی و طراحی خود بر روی یک سیستم نام‌گذاری واحد به توافق برسید.
منبع اصلی این مقاله: Smashing Magazine
---
طراحی سایت حرفه‌ای و اصولی با تیکینو
آیا می‌خواهید وب‌سایتی با کدنویسی تمیز، ساختار یافته و مطابق با آخرین استانداردهای روز دنیا داشته باشید؟ ما در آژانس دیجیتال مارکتینگ تیکینو با بهره‌گیری از متخصصان مجرب در زمینه‌های طراحی سایت، سئو (SEO) و طراحی تجربه کاربری (UI/UX)، پروژه‌های شما را به صورت کاملاً استاندارد و بهینه‌سازی شده پیاده‌سازی می‌کنیم.
برای دریافت مشاوره رایگان و ارتقای کسب‌وکار دیجیتال خود، همین امروز با کارشناسان تیکینو تماس بگیرید!