ویژگهای CSS یا CSS Specificity را یاد بگیرید
سلکتورهایی که در CSS استفاده میکنید وزن های متفاوتی دارند و این وزن ها توسط ویژگی های CSS مشخص شده اند به همین دلیل است زمانی که به یک المنت یک سری خصوصیات میدهید ممکن است این خصوصیات اعمال نشوند.یک مرورگر چگونه کدهای CSS را میخواند ؟
برای یادگرفتن مفاهیم پایه باید بدانید که یک مرورگر دقیقا بر طبق چه اصولی یک فایل CSS را میخواند. مرورگر ابتدا کدها را از بالا به پایین میخواند، یعنی برای قطعه کد زیر :
کد:
/*Line 10*/
ul li a {
color: red;
}
/*Line 90*/
ul li a {
color: blue;
}
کدی که در خط 10 وجود دارد override میشود و رنگ تگ a به آبی تغییر پیدا میکند، به این دلیل که مرورگر به کدهای پایین تر اولویت بیشتری میدهد نسبت به کدهای بالاتر، این قانون همچنین برای ایمپورت کردن فایلهای css برقرار است، برای مثال در قطعه کد زیر :
کد HTML:
<link href='css/style.css' rel='stylesheet'>
<link href='css/custom.css' rel='stylesheet'>
هرچیزی که شما در فایل custom.css نوشته اید براساس اولویت بر روی فایل style.css که در خط بالاتر قرار دارد override میشود، این قابلیت معمولا در تم های مختلف وجود دارد برای اینکه یوزر بتواند ویژگهای دلخواهش را اعمال کند بدون اینکه نیاز باشد فایل اصلی css دچار تغییر شود، دقت کنید که کل فایل custom.css بر روی style.css قرار نمیگیرد و override نمیشود بلکه تنها سلکتورهایی که با مقادیر متفاوتی دوباره تکرار شده اند override میشوند.ویژگهای CSS یا CSS Specificity
مطالبی که در بالا گفتیم تنها برای زمانی است که عنصرهای شما وزن یکسانی داشته باشند، اگر به عنصرهایتان وزن های متفاوتی بدهید باعث میشود که CSS Specificity در آن اعمال شود و نتیجه ی کار عوض شود.
در ویژگی های CSS چهار دسته داریم، استایل های inline (که اغلب برای جاوا اسکریپت استفاده میشوند)، ID ها، Class ها و المنت ها، فرض کنید وزن این دسته ها بر اساس امتیاز میباشد، در این صورت :
ID ها 100 امتیاز ارزش دارند.
Class ها 10 امتیاز ارزش دارند.
المنت ها 1 امتیاز ارزش دارند.
برای مثال، اگر سلکتور شما به صورت زیر باشد :
کد:
#content .sidebar .module li a
مجموع امتیاز شما 122 خواهد شد ( 100 + 10 + 10 + 1 + 1 ) که شامل یک ID ، دو Class و دو المنت خواهد شد.به خاطر بسپارید
- ID ها ارزش بسیار بالایی نسبت به Class ها و یا المنت ها دارند، بنابراین سعی کنید تنها زمانی که واقعا نیاز دارید از ID استفاده کنید در غیر این صورت از ID استفاده نکنید.
- اگر چند سلکتور با وزن های یکسان تعریف شده اند، سکلتوری که دیرتر معرفی شده است اولویت بیشتری دارد.
- استایل هایی که درون تگ های HTML خود نوشته اید نسبت به سه دسته ی دیگر اولویت بیشتری دارند زیرا از رگ گردن به المنت شما نزدیک ترند.
- تنها راهی که میتوانید استایل های inline را override کنید این است که از !important استفاده کنید.
- کلاس های Pseudo و Attribute ها به اندازه ی همان Class های عادی وزن دارند.
- المنت ها Pseudo به اندازه ی همان المنت های عادی وزن دارند.
- سلکتور کلی * هیچ وزنی ندارد.
مثال هایی برای درک بیشتر
کد:
ul li a {
color: red;
}
سلکتور بالا وزنی معادل 3 امتیاز دارد، یعنی اگر تنها یک Class بسازید میتوانید تمام مقادیری که قبلا وارد کرده اید را override کنید.
کد:
.content #sidebar {
width: 30%;
}
سلکتور بالا وزنی معادل 110 امتیاز دارد، به این دلیل که ID به تنهایی 100 امتیاز دارد.
کد:
.post p:first-letter {
font-size: 16px;
}
سلکتور بالا وزنی معادل 12 امتیاز دارد، تگ p و همچنین المنت pseudo به نام first-letter هرکدام 1 وزن امتیاز دارند.
کد:
p {
font-family: Helvetica, arial, sans-serif;
}
سلکتور بالا وزنی معادل 1 امتیاز دارد، اینگونه سلکتورها باید در بالای فایل CSS قرار بگیرند تا یک ویژگی کلی را به تمام عنصر های شما بدهند سپس با توجه به نیازی که دارید در ادامه ی فایل های CSS خود آنها را override کنید.
همیشه به خاطر داشته باشید که برای override کردن یک ID ، باید 265 تا Class برای آن المنت بنویسید تا بتوانید override کنید، به کد زیر توجه کنید :
کد:
#title {
font-weight: bold;
}
.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {
font-weight: normal;
}
تنها از این راه سلکتور دومی میتواند بر سلکتور اولی پیروز شود.نتیجه گیری
سعی کنید ویژگی های CSS را به خوبی یاد بگیرید و درک کنید، از این طریق میتوانید با درک بیشتری برای المنت های خود CSS بنویسید و همچنین سرعت کارهای خود را بالا ببرید و دیگر از دیدن تغییرات عجیب و غریب بر روی المنت های خود شگفت زده نمیشوید زیرا دلیل هر اتفاق را می دانید.
