کامنت‌گذاری

نحوه نوشتن کامنت در CSS، انواع کامنت و بهترین شیوه‌های مستندسازی کد

کامنت در CSS چیست؟

کامنت‌ها (Comments) یادداشت‌هایی هستند که داخل کد CSS نوشته می‌شوند اما مرورگر آن‌ها را نادیده می‌گیرد و نمایش نمی‌دهد. کامنت‌ها فقط برای انسان‌ها هستند — توسعه‌دهندگانی که کد را می‌خوانند.

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

نحوه نوشتن کامنت

در CSS فقط یک نوع کامنت وجود دارد — کامنت /* ... */:

/* این یک کامنت تک‌خطی است */
    
    p {
        color: blue; /* کامنت در انتهای خط */
    }
    
    /*
     * این یک کامنت چندخطی است
     * می‌توانید چند خط توضیح بنویسید
     * بسیار مفید برای مستندسازی
     */

ساختار کامنت‌های حرفه‌ای

در پروژه‌های واقعی، کامنت‌ها ساختار مشخصی دارند:

۱. سربرگ فایل (File Header)

/*!
     * ============================================
     * استایل اصلی وب‌سایت
     * نسخه: ۲.۰.۰
     * نویسنده: تیم توسعه
     * تاریخ: ۱۴۰۳/۰۱/۱۵
     * ============================================
     */

۲. جداکننده بخش‌ها (Section Separator)

/* ============================================
       متغیرهای ریشه
       ============================================ */
    :root {
        --primary-color: #3498db;
    }
    
    /* ============================================
       ریست جهانی
       ============================================ */
    * {
        margin: 0;
        padding: 0;
    }
    
    /* ============================================
       کامپوننت‌ها
       ============================================ */

۳. توضیح تصمیمات (Decision Comments)

.nav {
        /* ارتفاع ثابت برای چسباندن فوتر به پایین */
        min-height: calc(100vh - 60px);
    
        /* z-index بالا برای قرار گرفتن روی محتوا */
        z-index: 9999;
    }

۴. غیرفعال کردن موقت (TODO/FIXME)

/* TODO: این بخش را ریسپانسیو کن */
    .sidebar {
        width: 300px;
    }
    
    /* FIXME: در Safari مشکل دارد */
    .animation {
        animation: slide 2s;
    }
    
    /* HACK: راه‌حل موقت برای باگ IE */
    .old-browser {
        zoom: 1;
    }

کامنت‌های توضیحی هوشمند

کامنت‌ها نباید تکرارکننده باشند — چیزی بنویسید که از کد پیداست نیست:

/* ❌ بد: کامنت تکراری */
    p {
        color: red; /* رنگ متن را قرمز می‌کند */
    }
    
    /* ✅ خوب: کامنت مفید */
    p {
        /* قرمز برند شرکت برای متن‌های مهم */
        color: #e74c3c;
    }

قوانین مهم کامنت‌گذاری

قانونتوضیح
کامنت // مجاز نیستCSS فقط /* */ را می‌شناسد
کامنت قابل تودرتو نیستنمی‌توان کامنت داخل کامنت گذاشت
کامنت حذف می‌شوددر زمان Minify، کامنت‌ها حذف می‌شوند
کامنت روی همه خطوطمی‌توان در هر جای کد کامنت گذاشت

خطاهای رایج

/* ❌ غلط — کامنت تو در تو */
    /* بیرونی /* داخلی */ ادامه */
    
    /* ❌ غلط — استفاده از // */
    // این کامنت در CSS کار نمی‌کند!
    
    /* ✅ درست */
    /* این کامنت صحیح است */

ابزارهای کمکی

برای کامنت‌گذاری حرفه‌ای از این ابزارها استفاده کنید:

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

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط