چطور در CSS کامنت بنویسیم؟
تا الان چندبار تو مثالها یه متن داخل /* */ دیدی و شاید کنجکاو شده باشی این چیه. تو این درس کوتاه، دقیق میبینیم Comment در CSS چیه، چرا بهش نیاز داریم و چطور درست ازش استفاده کنیم.
Comment چیست؟
Comment (توضیح یا نظر) بخشی از کد CSSه که مرورگر کاملاً نادیدهاش میگیره. یعنی هرچی داخل یک Comment بنویسی، هیچ تأثیری روی ظاهر صفحه نداره. این متن فقط برای خود توسعهدهنده یا سایر افرادی که کد رو میخونن مفیده.
Syntax نوشتن Comment
در CSS، هر Comment باید با /* شروع بشه و با */ تموم بشه:
/* این یک کامنت است */برخلاف بعضی زبانهای برنامهنویسی، CSS از دو اسلش (//) برای کامنت پشتیبانی نمیکنه. تنها فرمت معتبر همون /* ... */ است.
کامنت تکخطی
/* این استایل مربوط به هدر سایت است */
header {
background-color: #222;
color: #fff;
}تو این مثال، خط اول یک Commentه و مرورگر بدون هیچ توجهی از روش رد میشه و مستقیم میره سراغ Rule بعدی.
کامنت چندخطی
یکی از ویژگیهای خوب Comment در CSS اینه که میتونه چند خط رو هم پوشش بده، بدون نیاز به تکرار علامت در هر خط:
/*
این بخش مربوط به استایلهای
اصلی صفحه اصلی سایت است.
آخرین بروزرسانی: نسخه ۲
*/
body {
font-family: sans-serif;
margin: 0;
}همونطور که میبینی، فرقی نمیکنه کامنت یک خط باشه یا چند خط؛ فقط کافیه بین یک /* و یک */ قرار بگیره.
کاربردهای اصلی Comment
- توضیح دادن بخشهای کد: مشخص کردن اینکه هر بخش از CSS مربوط به کدوم قسمت صفحهست (مثلاً هدر، فوتر، منو).
- غیرفعال کردن موقت یک Rule: بدون حذف کد، میتونی یه بخش رو موقتاً داخل کامنت بذاری تا مرورگر اجراش نکنه.
- یادداشت برای خود یا تیم: نوشتن دلیل یک تصمیم خاص، یا هشدار درباره یه بخش حساس از کد.
مثال: غیرفعال کردن موقت یک Rule
h1 {
color: darkred;
}
/*
p {
color: gray;
}
*/تو این مثال، Rule مربوط به p داخل کامنت قرار گرفته؛ یعنی مرورگر اصلاً این بخش رو اجرا نمیکنه، ولی کد همچنان تو فایل باقی میمونه و هر وقت لازم شد میشه بهراحتی از حالت کامنت خارجش کرد.
نکاتی درباره تودرتو بودن Comment
یه نکته فنی مهم: کامنتهای CSS تودرتو (Nested) نمیشن. یعنی نمیتونی یه کامنت رو داخل کامنت دیگه بذاری:
/* این یک کامنت است /* این کامنت داخلی خطا ایجاد میکند */ */تو این مثال، مرورگر به محض دیدن اولین */ (یعنی همون وسط خط)، کامنت رو تمومشده در نظر میگیره. هر چیزی بعد از اون (یعنی همون */ آخر) بهعنوان کد واقعی CSS خونده میشه و باعث خطا میشه.
اشتباهات رایج
- فراموش کردن بستن کامنت با
*/، که باعث میشه بقیه فایل CSS هم بهاشتباه داخل همون کامنت در نظر گرفته بشه. - تلاش برای استفاده از
//بهجای/* */، که در CSS معتبر نیست. - تودرتو کردن کامنتها، که باعث بسته شدن زودهنگام کامنت میشه.
بهترین روشها
- از کامنت برای مشخص کردن بخشهای مختلف یک فایل بزرگ CSS استفاده کن (مثلاً جدا کردن بخش هدر، منو، فوتر).
- کامنتها رو کوتاه و مفید نگه دار؛ توضیح واضح بهتر از توضیح طولانی و غیرضروریه.
- قبل از انتشار نهایی، کامنتهای موقتی و تستشده که دیگه نیازی نیستن رو پاک کن.
جمعبندی
Comment در CSS با ساختار /* ... */ نوشته میشه و توسط مرورگر کاملاً نادیده گرفته میشه. از کامنت میشه برای توضیح دادن بخشهای کد، غیرفعال کردن موقت یک Rule، یا یادداشتگذاری برای خود و تیم استفاده کرد. تنها نکته مهم اینه که کامنتها در CSS تودرتو نمیشن.