خطاهای CSS

خطاها در CSS می‌توانند منجر به رفتار غیرمنتظره یا اعمال نادرست استایل‌ها شوند. این صفحه اشتباهات رایج CSS و نحوه جلوگیری از آن‌ها را نشان می‌دهد.

فراموش کردن نقطه-ویرگول (Semicolon)

فراموش کردن نقطه-ویرگول (;) در پایان یک اعلانِ ویژگی (property declaration) می‌تواند کل قانون استایل را خراب کند.

مثال

.bad {
  color: red;
  background-color: yellow;
}

نام‌های ویژگی (Property) نامعتبر

استفاده از نام ویژگی‌ای که وجود ندارد، به سادگی توسط مرورگر نادیده گرفته می‌شود.

مثال

.bad {
  color: blue;
  font-size: 16px;
}

مقادیر (Value) نامعتبر

ویژگی‌های صحیح اما با مقادیر نامعتبر نیز نادیده گرفته خواهند شد.

مثال

.bad {
  width: -100px;
  color: green;
}

نبستن آکولاد

اگر بستن آکولاد (}) را فراموش کنید، ممکن است کل قانون (rule) نادیده گرفته شود.

مثال

.bad {
  padding: 20px;
  margin: 10px;

دو-نقطه (Colon) یا آکولاد اضافی

اشتباهات تایپی مانند دو-نقطه اضافی یا آکولادهای نابجا می‌تواند باعث خراب شدن قوانین شود.

مثال

.bad {
  color:: blue;
}

نکاتی برای جلوگیری از خطاهای CSS

• از یک ویرایشگر کد با قابلیت برجسته‌سازی نحو (syntax highlighting) استفاده کنید.

• CSS خود را با یک CSS linter یا اعتبارسنج (validator) بررسی کنید.

• CSS را در بخش‌های کوچک بنویسید و به طور مکرر تست کنید.