کلاس و ID

ویژگی id

id یک شناسه یکتا برای هر عنصر است. هر id فقط یک‌بار در صفحه استفاده می‌شود و برای شناسایی یک عنصر خاص کاربرد دارد.

قوانین نام‌گذاری id

• یکتا باشد: در هر صفحه فقط یک‌بار استفاده شود
• با حرف شروع شود: نمی‌تواند با عدد یا کاراکتر خاص شروع شود
• فاصله نداشته باشد: از خط تیره (-) یا زیرخط (_) استفاده کنید
• حساس به حروف: myId و myid متفاوت هستند
• معنادار باشد: نام باید هدف عنصر را نشان دهد

ویژگی class

class برای گروه‌بندی عناصر با ویژگی مشترک استفاده می‌شود. یک کلاس می‌تواند روی چندین عنصر اعمال شود و برای استایل‌دهی گروهی مناسب است.

چند کلاس روی یک عنصر

می‌توان چند کلاس را با فاصله جدا کرد: class="btn btn-primary btn-large"

ترتیب کلاس‌ها مهم نیست اما برای خوانایی بهتر است ترتیب منطقی رعایت شود.

تفاوت id و class

ویژگی	id	class
یکتایی	بله - فقط یک‌بار در صفحه	خیر - می‌تواند تکراری باشد
انتخابگر CSS	#id	.class
اولویت CSS	بالاتر ( specificity = 100)	پایین‌تر ( specificity = 10)
کاربرد JavaScript	getElementById()	getElementsByClassName()
لینک داخلی	href="#id"	خیر
فرم	for="id" در label	خیر

چه زمانی از id استفاده کنیم؟

• عناصر یکتا: header اصلی، footer اصلی، منوی اصلی
• لینک‌های داخلی: برای anchor links و اسکرول به بخش خاص
• فرم‌ها: اتصال label به input با for
• وقتی نیاز به انتخاب یک عنصر خاص داریم
• تست: برای تست‌های automation

چه زمانی از class استفاده کنیم؟

• استایل‌های تکرارشونده: دکمه‌ها، کارت‌ها، alertها
• گروه‌بندی: عناصر با ظاهر مشابه
• مودیفایرها: تغییرات کوچک روی یک عنصر
• انتخاب چندین عنصر
• انیمیشن‌ها: کلاس‌های موقت برای انیمیشن

کنوانسیون‌های نام‌گذاری

BEM (Block Element Modifier)

یک روش محبوب برای نام‌گذاری کلاس‌ها:

.block { }              /* Block */
.block__element { }     /* Element */
.block--modifier { }    /* Modifier */

مثال BEM:

.card { }
.card__title { }
.card__body { }
.card--large { }
.card--dark { }

بهترین شیوه‌ها

• از id برای استایل‌دهی استفاده نکنید: id برای JavaScript و لینک‌ها است
• نام‌های معنادار: از نام‌هایی مثل red-box استفاده نکنید، alert-box بهتر است
• کلاس‌های کوچک و قابل استفاده مجدد: کلاس‌ها را ترکیب‌پذیر طراحی کنید
• جلوگیری از over-specification: از div#header استفاده نکنید، فقط #header کافی است
• استفاده از کلاس‌های utility: مثل .text-center, .mt-4 برای کارهای رایج
• حروف کوچک: معمولاً از حروف کوچک استفاده می‌شود

انتخابگرهای CSS مرتبط

• .class — انتخاب همه عناصر با این کلاس
• #id — انتخاب عنصر با این id
• element.class — انتخاب عناصر خاص با این کلاس
• .class1.class2 — انتخاب عناصر با هر دو کلاس
• [class~="value"] — انتخاب عناصر با کلاس خاص

نکات مهم

• id و class حساس به حروف بزرگ و کوچک هستند
• از کلمات کلیدی JavaScript استفاده نکنید (مثل class, function, return)
• از کاراکترهای خاص فقط (-) و (_) استفاده کنید
• اعداد می‌توانند در نام باشند اما نباید در ابتدا باشند
• از نام‌های فارسی در id و class استفاده نکنید (مشکلات در برخی ابزارها)