كل ما تود معرفته عن الوارثة في CSS

في مقال اليوم سأوضح لكم كل ما تودون معرفته عن الوراثة في CSS، الوراثة هي وظيفة افتراضية لبعض الخصائص في CSS وفي  هذه الحالة يرث العنصر الابن دائمًا القيم المحسوبة من خصائص والديه. 

لكن لا تكون كل الخصائص مُورِّثة مما يعني أن بعض الخصائص ستحصل تلقائيًا على القيم الموروثة من آبائها في حين لا تحصل الخصائص غير المورثة على هذه القيم.

تقسم خصائص العناصر في CSS إلى فئتين خصائص مُورِّثة (Inherited Properties) وخصائص غير مُورِّثة وهذا يعني أن العنصر الابن يرث خصائص العنصر الأب فقط إذا كان نوع الخاصية خاصية مُورِّثة مع العلم أنه يمكن استخدام الكلمة الأساسية "inherit" لتمكين التوريث في أي خصائص غير مُورِّثة.

من أبرز الخصائص التي يتم توريثها من العناصر الآباء للأبناء:

تُورِث الخصائص المذكورة أعلاه القيم من العنصر الأب إلى العنصر الابن. 

على سبيل المثال بفرض لدينا خصائص لعنصر أب كما يلي

يحصل الأبناء على قيم خصائص التباعد بين الحروف letter-spacing والمسافة البادئة للنص text-indent ومحاذاة النص text-align وظل النص text-shadow  والمؤشر من الأب cursor وهذه الوراثة مفيدة للتنسيق وتصميم محتوى النص.

الجدير بالذكر أن بعض الخصائص لا تورث بشكل افتراضي فالأب قد يملك العديد من خصائص التخطيط لكن الأبناء لا يحصلون على كل تلك الخصائص بل يحصلون فقط على الخصائص المُورِّثة مثل الخط والنص واللون التي تورث للابن بينما تحتجز الخصائص الأخرى للعنصر نفسه بشكل افتراضي.

قائمة بالخصائص غير المُورِّثة من العناصر الآباء للأبناء:

لاحظ في هذا المثال يملك الأب خواص الموضع والخلفية والحدود والهوامش الخارجية والحواشي الداخلية للأب.

  position:relative;

  left:10px;

  right:10px;

  top:10px;

  bottom:10px;

  margin:5px;

  background:#e06daa;

  border:3px solid #000;

}

لكن هنا لن تحصل العناصر الأبناء على قيم العناصر التي لها خصائص غير مورثة فالأبناء لهذا الأب لن يرثوا قيمة الحدود border ولون الخلفية background  بشكل افتراضي.

في حال رغبت بأن ترث أي خاصية غير مُورِّثة بشكل افتراضي في العناصر الأبناء يمكنك أن تفرض التوريث بشكل صريح، على سبيل المثال لتوريث خصائص تحدد الموضع مثل (top، bottom، left، right) والهوامش (margin) والحدود (borders) والخلفية (background) للأب في الأبناء يمكنك استخدام  القيمة "inherit" لهذه الخاصية.

.parent{

  /* ... */

}

.child{

  background: inherit;

  border: inherit;

}

لكن انتبه فالخصائص التي تورث بشكل تلقائي مدروسة وتغيير سلوكها الافتراضي قد يسبب فوضى في تنسيق العناصر لذا استخدمها بحذر.

 يمكننا استخدام الخاصية all لجعل كل الخصائص في الابن ترِث خصائص الأب كما يلي:

child{ all:inherit; }

بدلاً من وراثة كل صفة بشكل منفصل كما يلي:

.child{

  background: inherit;

  border: inherit;

  margin: inherit;

 

}

 تورث الخطوط والألوان بشكل افتراضي، لذلك لا داعي لتحديد التوريث لتلك الخصائص. 

تخيل إذا كنت تضطر إلى كتابة CSS لكل عنصر فردي تستخدمه في العنصر، ستنتهي بإنشاء ملف CSS أكبر من الصفحة نفسها وستكرر الكثير من خصائص CSS لحسن الحظ  يورِث CSS خصائص الوالد بحيث يمكننا تنسيق العناصرنا بكفاءة.

في حال قمنا بتعيين نوع الخط ولون الخط للعنصر body فلا داعي لتعيينه مرة أخرى لكل عنصر ضمن جسم الصفحة حيث سيحصل العنصر على قيمته الموروثة وتوريث الخط تقنية تُستخدم على نطاق واسع لإنشاء التنسيقات وتجعل من السهل تغيير عائلة الخط والألوان على مستوى الموقع وهو مفيد جدًا عند تجاوز مخططات الألوان وعائلات الخطوط. فالوراثة تغير نمط جميع العناصر والعناصر الأبناء لعنصر أب بسرعة لكن يجب استخدام التوريث في CSS  فقط عندما يكون هناك مشكلة في تكرار الشيفرة. 

فالتوريث له مميزاته عند استخدامه بشكل صحيح لكن بذات الوقت له بعض العيوب عند الاستخدام المفرط أو الخاطئ وقد يتسبب في مشاكل في التخطيط. وجدير بالذكر أن هناك طريقة تُدعى تجاوز CSS (CSS Overriding) يمكن أن تغير قيم خصائص CSS بسهولة في حال لم ترغب باستخدام الوراثه.

تعرفنا في مقال اليوم على مفهوم الوراثة في CSS ودورها في تحسين الطريقة التي تكتب بها CSS والطريقة التي تستخدم بها المحددات استخدمها  بحكمة عند الحاجة لجعل شيفرتك مختصرة وأقل تكرارًا.