جلسه سوم:بررسی تاثیر منبع کد(Understanding Source Order)
در مقاله قبلی زمانیکه شما تلاش می کردید رنگ پس زمینه را به کمک انتخابگر featured. به نارنجی تبدیل کنید اما کد مدنظر شما اجرا نمیشد ، انتخابگر اصلی main-nav# به علت دارا بودن ID کد شما را override می نمود. اولویت بندی بین (1و0و1) و (0و1و0) اعمال شده است.
برای رفع این مشکل شما چند راه حل در اختیار دارید.در ادامه این راه حل ها را بررسی خواهیم کرد.
سریع ترین راه حل برای رفع این مشکل استفاده از کلمه important! می باشد.برای این کار کافیست به کد مورد نظر خود این کلمه را اضافه کنید تا بتوانید از اولویت بالاتری نسبت به ID داشته باشید.
#main-nav a {
color: white;
background-color: #13a4a4;
padding: 5px;
border-radius: 2px;
text-decoration: none;
}
.featured {
background-color: orange !important;
}در این حالت کد شما کار می کند. چراکه کلمه important! اولویت کد شما را نسبت به بقیه قوانین بالاتر می برد.این روش بسیار آسان می باشد اما به همین میزان که آسان است ساده لوحانه نیز به نظر می رسد.این روش ممکن است در حال حاضر مشکل شما را حل کند اما در ادامه مشکلاتی را برای شما می تواند ایجاد کند. اگر شما در ابتدای کدنویسی برای پروژه جدید خود هستید با اضافه کردن این کلمه ایجاد تغییرات را در آینده برای خود بسیار سخت می کنید.زیرا زمانیکه بخواهید به حالت اولیه خود برگردانید یا حالت قبل خود را بازیابی کنید به مشکلات جدی برخواهید خورد.
پس بیایید راه حل بهتری را پیدا کنیم. به جای اینکه بخواهیم قوانین css را دور بزنیم کاری بکنیم که این قوانین به نفع ما عمل کنند.شما برای اینکه اولویت کد خود را بالا ببرید چه می کنید؟ برای مثال کد خود را مطابق قطعه کد زیر تغییر دهید.
#main-nav a{
color: white;
background-color: #13a4a4;
padding: 5px;
border-radius: 2px;
text-decoration: none;
}
#main-nav .featured {
background-color: orange;
}این کد مشکل پیش آمده را رفع کرده و کار می کند. در این حالت انتخابگر شما یک شناسه و یک کلاس دارد که الویت آن را نسبت بهmain-nav# با شناسه (1و0و1) بالاتر می برد.با اینکه در حال حاضر مشکل شما با یک راه حل منطقی حل شده است اما هنوز هم می توان راه بهتری پیدا کرد.
روش بعدی این است که به جای اینکه اولویت کد دوم را بالاتر ببرید اولویت کد اول را پایین بیاورید. کد زیر را مشاهده کنید.
.nav {
margin-top: 10px;
list-style: none;
padding-left: 0;
}
.nav li {
display: inline-block;
}
.nav a {
color: white;
background-color: #13a4a4;
padding: 5px;
border-radius: 2px;
text-decoration: none;
}
.nav .featured {
background-color: orange;
}با این تغییری که ایجاد کردید کد اول با شناسه (1و1و0) از کد دوم با شناسه (0و2و0) شکست می خورد. پس رنگ زمینه نارنجی خواهد شد.همانطور که در این کدها مشاهده می کنید که اولویت یا همان specificity می تواند به عنوان یک سلاح در اختیار شما قرار بگیرد تا بتوانید از بهترین روش ها برای اجرای آنچه که دوست دارید استفاده کنید.
Understanding Source Order
در این قسمت سومین مورد که بررسی خواهیم کرد در مورد منشا و منبع کدهاست.اگر در مورد یک کد origin (نویسنده کد) وspecificity (اولویت) یکسان باشد سومین مورد یعنی منبع کد می تواند راه حل خوبی باشد.به این معنی که می توانید برای رسیدن به استایل مورد نظر خود ترتیب کدها را تغییر دهید.برای بررسی بیشتر مثال های زیر را بررسی کنید.
.nav a {
color: white;
background-color: #13a4a4;
padding: 5px;
border-radius: 2px;
text-decoration: none;
}
a.featured {
background-color: orange;
}در مثال بالا اولویت کدها یکسان است پس منبع کد است که تعیین می کند کدام یک از کدها روی صفحه شما اعمال خواهد شد و در نهایت مشاهده می کنید که دکمه نارنجی ایجاد خواهد شد.
این راه حل مشکل شما را حل می کند اما در عوض مشکل دیگری را اضافه می کند. مشکل جدید این است که در صورتی که بخواهید کد کلاس خود را درخارج از nav استفاده قوانین css ای که از قبل نوشته اید با هم ترکیب میشوند و کد شما به درستی کار نخواهد کرد.شما باید بررسی کنید که آیا تغییری که ایجاد شده است با وجود ناخواسته بودن برای شما قابل قبول می باشد یا نه. به بیان ساده تر ممکن است بعضی از این تغییرات ناخواسته برای شما مفید باشد.
بدون درنظر گرفتن شرایط کدهایی که شما نوشته اید من توصیه می کنم که از روش کاهش اولویت قطعه کدی که غالب شده است استفاده کنید.ممکن است در بعضی موارد نیاز باشد از روش دیگر هم استفاده کنید و این مسئله مشکل چندانی ندارد اما باید به ریسک های احتمالی هم توجه داشته باشید.برای مثال کد زیر را بررسی کنید.
<header class="page-header">
<h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
<nav>
<ul id="main-nav" class="nav">
<li><a href="/">Home</a></li>
<li><a href="/coffees">Coffees</a></li>
<li><a href="/brewers">Brewers</a></li>
<li><a href="/specials" class="featured">Specials</a></li>
</ul>
</nav>
</header>
<main>
<p>
Be sure to check out
<a href="/specials" class="featured">our specials</a>.
</p>
</main>همانطور که گفته شد معمولا در CSS بهترین راه حل به شرایط موجود بستگی دارد.همواره مسیرهای زیادی برای رسیدن به یک نتیجه نهایی وجود دارد.پس در هنگام بروز یک مشکل اررزشش را دارد که ابتدا چند راه حل را درنظر بگیرید و در مورد عواقب هریک فکر کنید.ابتدا این را بررسی کنید که چه declarationهایی برای رسیدن به نتیجه مورد نظر مناسب است سپس یکی را که متناسب با ساختار شماست انتخاب کنید.
در مقاله بعدی در مورد link Style And Source Order صحبت خواهیم کرد.با ما همراه باشید.
دیدگاهتان را بنویسید