ممکن است در ابتدای مطالعه ی CSS به این مطلب برخورد کرده باشید که برای داشتن یک صفحه مطابق آنچه که دوست دارید باید ترتیب کدها را رعایت کنید . این مسئله که به Csacade اشاره دارد این است که در اولویت بندی Specificity های یکسان ، کدهایی که جدید نوشته شده اند کدهای قبلی را override می کنند . به عنوان مثال اگر در یک Stlye sheet در سه بخش جداگانه به یک عنصر سه رنگ متفاوت داده شده است و هر سه از Specificity یکسان برخوردار باشند آخرین کدی که اضافه شده است بقیه را Ovverride می کند.

هر عنصری که در صفحه وجود دارد فقط یک مقدار را در مورد هر یک از ویژگی هایش می تواند داشته باشد. به عنوان مثال یک پاراگراف خاص فقط می تواند یک مقدار را برای حاشیه بالا یا پایین داشته باشد. در صورتی که چند مقدار به آن داده شده باشد در هنگام ارائه عنصر فقط یک مورد انتخاب و اعمال خواهد شد.

Cascade valueیعنی یک مقدار خاص به یک عنصر مورد انتخاب اعمال خواهد شد.

در صورتیکه برای یک عنصر یکی از ویژگی ها تعیین شده باشد آن ویژگی شامل قوانین cascade نخواهد شد.

دو قانون کلی در هنگام کار کردن با Cascade وجود دارد که مرور آن ها می تواند مفید باشد :

• از IDها در سلکتور خود استفاده نکنید.استفاده از ID اولویت کد شما را بسیار بالا می برد و این باعث می شود برای کاهش اولویت آن در موارد خاص به زحمت زیادی بیفتید و حتی ممکن است از روش های غیر فنی مثل Important استفاده کنید یا ممکن است یک کپی از همان ایجاد کنید و به آن کلاس دیگری اضافه کنید تا اولویت آن را بالاتر ببرید.
• ازimportant ! استفاده نکنید.این روش گرینه خوبی برای override کردن آی دی است اما اگر فقط یکبار از آن استفاده کنید مجبور خواهید شد در ادامه ی کدهای خود باز هم از آن برای override کردن کد اصلی خود استفاده کنید که این پیچیدگی کار شما را بسیار زیاد می کند.

این دو قانون می تواند توصیه بسیار مفیدی در دنیای css باشد اما فراموش نکنید همواره موارد استثنایی خواهد بود که اتفاقا استفاده از این روش ها هزینه های شما را بسیار کاهش می دهد. پس در برخورد با قوانین CSS سختگیر نباشید.

در مقالات قبلی راه هایی که ممکن بود بتوان به یک عنصر استایل داد را بررسی کردیم .آخرین راه باقی مانده وراثت است که در ادامه آن را بررسی خواهیم کرد.

 Inheritance -وراثت

همانطور که در سطرهای قبلی گفته شد وراثت آخرین شیوه استایل دادن به یک عنصر می باشد.Cascade معمولا با وراثت در ارتباط است.هر چند که این دو مفهوم با یکدیگر مرتبط هستند اما باید هر کدام را جداگانه درک کنید.

اگر یک عنصر برای یک ویژگی مشخصی از طریق Cascade استایلی را دریافت نکند ممکن است از پدر خود ارث ببرد.معمولا برای اینکه فونت را روی عناصر اعمال کنند از این روش استفاده می شود.پس به عنصر پدر فونت مورد نظر را اعمال میکنند و سایر عناصر فونت را از پدر خود ارث می برند.

در تصویر پایین نحوه جریان ارث بری درختDOM را مشاهده میکنید.

لازم به ذکر است که همه ی property ها را ارث نمیرسند.به طور پیش فرض موارد خاصی وجود دارد.به عنوان مثال بخشی از این خصوصیات که مربوط به متن هاست عبارت است از:

color, font, font-family, font-size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform, white-space, and word-spacing ,

list-style, list-style -type, list-style-position, list-style-image

و یا موارد زیر در مورد جدول و لیست ارث برده می شود:

border-collapseو border-spacing

مواردی که احتمال استفاده از آن ها زیاد است در بالا بیان شد که تقریبا لیست کاملی می باشد .شما می توانید با استفاده از نسبت دادن این  ویژگی ها به تگ Body به سایر عناصر صفحه اجازه دهید تا از آن ارث ببرند.

اگر کد زیر را به بالای استایل شیت خود اضافه کنید این کد به بدنه صفحه اعمال می شود هم چنین شما می توانید عنصر خاصی را در صفحه مورد هدف قرار دهید این ویژگی توسط عناصر مد نظر به فرزندانش ارث داده میشود.این روند تا جایی ادامه دارد که توسط cascade این روند متوقف شود.

ازDev tools استفاده کنید !

مجموعه ای از مقادیری که ارث برده می شوند و یا override می شوند میتوانند مسیریابی بین کدها  را بسیار سخت کنند.اگر از ابزارهای توسعه دهنده مرورگر خود استفاده نمیکنید یا با آن ها آشنایی ندارید بهتر است آن را یاد گرفته و استفاده از آن را تبدیل به عادت کنید.

Dev tools دقیقا مشخص می کند که کدام قانون برای عنصر و چرا استفاده می شود .هم چنین Cascade و وراثت را که مفاهیمی انتزاعی هستند را هنگام بررسی ساده تر می کند.

با کلیک راست روی عنصر مورد نظر و انتخاب inspect یا inspect element از منوی باز شده میتوانید Dev tools را باز کنید.

Stlye inspector نشان می دهد که هر انتخابگر چگونه عنصر انتخاب شده را دست خوش تغییرات قرار می دهد.  مواردی که در ارث بری به عنصر مورد نظر اعمال شده است را نیز می توانید مشاهده کنید .تعدادی از اتفاقات نیز وجود دارند که معمولا در پشت صحنه اتفاق می افتند مثلا اینکه کدام ویژگی به خاطر Override  حذف شده است و یا اینکه تعدادی از قوانین به علت نزدیکی به بالای کد، دیگری را حذف کرده است.

در سمت راست نام Style sheet و شماره خطی که کد در آن نوشته شده است را نیز می توانید مشاهده کنید.

در بخش بعدی Special Values را بررسی خواهیم کرد.با ما همراه باشید.