وراثت (Inheritance)

وراثت در CSS چیست؟

وراثت (Inheritance) یعنی برخی ویژگی‌های CSS از والد به فرزندان منتقل می‌شوند — بدون اینکه صراحتاً تعریف شوند.

کدام ویژگی‌ها ارث می‌رسند؟

ارث می‌رسند ✅	ارث نمی‌رسند ❌
color	border
font-family	margin
font-size	padding
line-height	width / height
text-align	background
direction	display
visibility	position

قانون کلی

• ویژگی‌های متن (color، font) ارث می‌رسند
• ویژگی‌های جعبه (margin، padding، border) ارث نمی‌رسند

کنترل وراثت

/* inherit — اجبار به ارث‌بری */
    .child {
        border: inherit;  /* border را از والد بگیر */
    }
    
    /* initial — مقدار پیش‌فرض مرورگر */
    .child {
        color: initial;  /* رنگ پیش‌فرض */
    }
    
    /* unset — اگر ارثی است inherit، وگرنه initial */
    .child {
        color: unset;
    }
    
    /* revert — مقدار پیش‌فرض styleshheet مرورگر */
    .child {
        display: revert;
    }

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

• ویژگی‌های متنی را روی body تنظیم کنید تا همه ارث ببرند
• از inherit برای موارد خاص استفاده کنید
• all: unset برای ریست کامل یک عنصر

نکات مهم

• وراثت باعث کاهش تکرار کد می‌شود
• direction: rtl روی body، کل سایت را RTL می‌کند
• font-family روی body بهترین روش است
• inherit حتی ویژگی‌های غیرارثی را اجباراً ارثی می‌کند