قانون !important

آشنایی با !important در CSS، چه زمانی استفاده شود و چه زمانی پرهیز کنید

!important چیست؟

!important یک قانون CSS را به بالاترین اولویت می‌رساند — حتی از inline style هم بالاتر.

p {
        color: red !important;  /* این همیشه برنده است */
    }
    
    p { color: blue; }  /* بازنده */
    #main p { color: green; }  /* بازنده */
    <p style="color: black;">  /* هم بازنده! */

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

✅ استفاده مجاز❌ پرهیز کنید
Override کردن استایل افزونهحل مشکل اولویت
Override کردن inline style غیرقابل کنترلبه‌جای طراحی درست
کلاس‌های کمکی (Utility classes)استایل‌های عادی

مشکلات !important

راه‌حل‌های جایگزین

/* ❌ بد */
    .btn { color: red !important; }
    
    /* ✅ بهتر — افزایش اولویت با تکرار کلاس */
    .btn.btn { color: red; }
    
    /* ✅ بهتر — انتخابگر دقیق‌تر */
    div.container .btn { color: red; }
    
    /* ✅ بهتر — ID */
    #main .btn { color: red; }

ترتیب !important

اگر چند !important هم وجود داشته باشد، اولویت عادی تعیین‌کننده است:

p { color: red !important; }      /* 0,0,0,1 */
    #main p { color: blue !important; } /* 0,1,0,1 — برنده */

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

نکات مهم

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

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