نظرات (کامنت‌ها) در CSS
تا اینجا یاد گرفته‌اید قانون بنویسید و یک stylesheet به صفحه وصل کنید. اما گاهی لازم می‌شود برای خودتان یادداشتی کنار کد بگذارید، یا موقع تست یک استایل را بدون پاک‌کردنش خاموش کنید. این کار را نظرها (که به آن‌ها «کامنت» هم می‌گویند) در CSS انجام می‌دهند.
نظر در CSS چیست؟
نظر در CSS یک یادداشت است که بین /* و */ می‌نویسید. مرورگر هنگام اعمال استایل‌ها اصلاً به آن توجه نمی‌کند. از کامنت می‌توانید برای یادآوری کوتاه، عنوان‌دادن به بخش‌های یک stylesheet یا خاموش‌کردن موقت یک قانون وسط آزمون‌وخطا استفاده کنید.
نوشتن کامنت
کامنت را این‌طور می‌نویسید: /* یادداشت شما اینجا */. هر چیزی که بین /* ابتدایی و */ پایانی باشد، از دید موتور CSS وجود ندارد. بازدیدکننده‌ها کامنت را به‌عنوان متن صفحه نمی‌بینند؛ کامنت فقط در خودِ فایل stylesheet می‌ماند، و اگر آن فایل را در DevTools باز کنید، آنجا هم دیده می‌شود.
یک کامنت تک‌خطی
css/* Brand teal for the hero heading */
.hero {
color: #0f766e;
}چرا یادداشت کوتاه کافی است
یک کامنت تک‌خطی بالای قانون می‌تواند بگوید یک مقدار چرا آنجا هست؛ مثلاً رنگ برند است، یک اصلاح موقت است یا برای دسترسی‌پذیری انتخاب شده. کوتاه بنویسید، نه مقاله. شما چند ماه بعد فقط به یک اشاره نیاز دارید تا یادتان بیاید.
کامنت چندخطی
کامنت می‌تواند چند خط باشد. الگوی رایج این است که قبل از دسته‌ای از قوانین هم‌خانواده یک «سرتیتر» کوچک بگذارند تا مرور یک stylesheet بلند راحت باشد.
کامنت چندخطی برای عنوان بخش
css/*
Header styles
Keep logo and nav colors here
*/
.site-header {
background: #0f172a;
color: #f8fafc;
}کامنت‌های چندخطی را کوتاه نگه دارید. اگر وسط فایل چند پاراگراف توضیح بنویسید، خواندن فایل از حالتی که اصلاً کامنت نداشته باشد هم سخت‌تر می‌شود.
خاموش‌کردن موقت یک قانون
می‌توانید یک declaration، یا حتی یک قانون کامل را داخل کامنت بگذارید تا بدون پاک‌شدن از کد کنار برود. بعداً فقط نشانه‌های کامنت را بردارید تا استایل برگردد. وقتی دنبال این هستید که کدام ویژگی چیدمان را به‌هم ریخته، این روش خیلی به کار می‌آید.
کامنت‌کردن یک declaration
css.hero {
color: #0f766e;
/* font-size: 2rem; */
font-family: Georgia, serif;
}عادت درست برای تست
همیشه کوچک‌ترین تکه‌ای را که به یادگیری کمک می‌کند کامنت کنید؛ اول فقط یک declaration. اگر صفحه دوباره درست شد، مقصر را پیدا کرده‌اید. بعد یا مقدار را اصلاح کنید یا کد بی‌استفاده را حذف کنید. بلوک‌های بزرگِ خاموش‌شده را سال‌ها در stylesheet نهایی نگه ندارید.
کامنت CSS با کامنت HTML فرق دارد
کامنت HTML با <!-- شروع و با --> تمام می‌شود، ولی کامنت CSS با /* و */. نشانه‌های کامنت HTML را داخل فایل .css نگذارید (و داخل <style> هم نگذارید، چون آنجا قواعد CSS اجرا می‌شود نه HTML). هر زبان شیوهٔ کامنت‌گذاری خودش را دارد. اگر در درس‌های HTML با کامنت آشنا شده‌اید، این را مهارتی مشابه اما با نشانه‌های دیگر بدانید.
کامنت جای امن نیست
هر کسی که بتواند stylesheet را باز کند (یا از View Source و تب Network استفاده کند) کامنت‌های شما را می‌خواند. هیچ‌وقت رمز عبور، کلید خصوصی یا توکن محرمانه را در کامنت CSS ننویسید. کامنت برای یادداشت‌های توسعه است، نه برای پنهان‌کردن اطلاعات حساس.
خودتان امتحان کنید
- یک stylesheet تمرینی (یا یک بلوک
<style>) باز کنید که قانون.heroباcolorوfont-sizeداشته باشد. - بالای قانون یک کامنت تک‌خطی بنویسید که دلیل انتخاب رنگ را توضیح دهد.
- declaration مربوط به
font-sizeرا داخل/* … */بگذارید، ذخیره کنید و صفحه را تازه کنید؛ اندازه به حالت پیش‌فرض برمی‌گردد، ولی رنگ همچنان اعمال می‌شود. - نشانه‌های کامنت دور
font-sizeرا بردارید و دوباره صفحه را تازه کنید تا استایل برگردد. - اختیاری: بالای این گروه از قوانین یک کامنت چندخطی کوتاه به‌عنوان عنوان بخش اضافه کنید.
اشتباهات رایج
- گذاشتن نشانه‌های HTML (
<!-- -->) داخل CSS؛ موتور CSS آن‌ها را کامنت حساب نمی‌کند - جا انداختن
*/پایانی، که باعث می‌شود بقیهٔ stylesheet نادیده گرفته شود - تلاش برای تودرتو کردن کامنت‌ها (
/* outer /* inner */ still broken */)؛ کامنت‌های CSS تودرتو درست کار نمی‌کنند - ماندن انبوهی از قوانین کامنت‌شده در فایل نهایی پروژه برای ماه‌ها
- نوشتن اطلاعات محرمانه یا نشانی‌های خصوصی در کامنت
خلاصه
- کامنت CSS بین
/*و*/نوشته می‌شود - مرورگر هنگام اعمال استایل متن کامنت را نادیده می‌گیرد
- از کامنت برای یادداشت کوتاه، عنوان بخش یا خاموش‌کردن موقت هنگام تست استفاده کنید
- کامنت HTML شکل
<!-- -->دارد؛ آن را با CSS قاطی نکنید - کامنت در سورس همه دیده می‌شود؛ هرگز چیز محرمانه‌ای در آن ننویسید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود