در مقاله قبلی که تحت عنوان “چگونه CSS را عمیق و پایه ای بیاموزیم”منتشر شد توضیحاتی در مورد اهمیت مطالعه عمیقCSS  ارائه شد. اینکه دانش پایه ای در مورد CSS می تواند چه قدر در جایگاه شغلی و نحوه عملکرد و میزان موفقیت شما موثر باشد.

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

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

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

بخش اول:Reviewing  the Fundamentals

Inheritance and cascade , specificity

کدهای CSS به صورت آبشاری( Cascade ) عمل می کند.Cascade می تواند به عنوان یک ابزار قدرتمند در اختیار برنامه نویس عمل کند اما اگر از آن شناخت نداشته باشید یا به درستی از آن استفاده نکنید می تواند نتایج نامطلوبی روی کار شما داشته باشد. در اصل Cascade  الگوریتمی است که مرورگر با استفاده از آن تصمیم میگیرد چه css ای را به یک عنصر اعمال کند . دانستن اینکه  cascade چگونه عمل می کند نسبت به تمام موارد موجود در css اولویت دارد.

شما در ابتدا باید تعیین کنید که می خواهید در صفحه مورد نظرتان چه اتفاقاتی بیفتد. مثلا اینکه اگر این کلاس به یک عنصر اضافه شد چه اتفاقاتی بیفتد یا اینکه اگر عنصر X فرزند عنصر Y است ، این استایل ها را داشته باشد سپس مرورگر این قوانین را بررسی کرده و مشخص می کند که کدامیک در کجا اعمال شود و در انتها از آن ها برای ارائه صفحه استفاده می کند.

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

برای بررسی موارد گفته شده یک مثال عملی را بیان می کنیم . برای شروع یک صفحه html و CSS ایجاد میکنیم.

وقتی دو یا چند قانون عنصر یکسانی را در صفحه شما مورد هدف قرار می دهند قوانین ممکن است نتیجه متناقضی را نشان دهند.برای مثال در  تصویر بالا به یک عنوان سه نوع قلم متفاوتی را تخصیص داده است.اما کدامیک اعمال خواهد شد؟

برای  تعیین برنده این چالش مرورگر مجموعه ای از قوانین را دنبال می کند. پس نتیجه قابل پیش بینی است. در این حالت مورد دوم که با ID نوشته شده است برنده است.پس نوع قلم Sans-serif تعیین می شود.

این مثالی که بیان شد به مجموعه قوانینی که Cascsade نام دارد اشاره می کند و مرورگر از آن برای حل تعارض ها استفاده می کند.در هنگام برخورد با این گونه تعارض ها cascade سه روش را برای حل مشکل در نظر میگیرد:

• منشاء StyleSheet کجاست؟ یعنی این که style ها از کجا ناشی می شوند
• ویژگی Selector .اینکه کدام selector بر دیگری اولویت دارد.
• ترتیب منبع اینکه کدام Style داخل Style sheet اعلان شده است.

در تصویر زیر نحوه عملکرد آن ها در سطح بالاتر بیان شده است.

این قوانین به ما اجازه می دهد هنگام حل تعارض ها در CSS رفتار مرورگر ها قابل پیش بینی باشد. بیایید تک تک موارد گفته را بررسی کنیم.

در مقاله بعدی به بررسی روش های Cascade  خواهیم پرداخت.