یکی از رایجترین مشکلاتی که در هنگام کار با CSS وجود دارد، درک نادرست از چگونگی حق تقدم سلکتورها است.
این مشکل آنجا خودش را حسابی نشان میدهد که بخواهید CSS نوشته شدهی خودتان را بر روی CSS دیگری اعمال کنید، مانند راستچین کردن یک قالب.
نمود دیگر این مشکل زمانی آشکار میشود که یک وباپلیکیشن پیچیده طراحی کنید و به دلیل بزرگی آن، بیدلیل در داکیومنت خود کلاس و ID ایجاد کنید.
حالا سوال اینجاست: «این روش که تا به حال کار من را راه انداخته، چه نیازی به تغییر دارد؟»
بیایید به مشکلاتی که نادیده شدن حق تقدم در CSS بهوجود میآورد، نگاهی بیندازیم:
- ایجاد کلاس و IDهای متعدد، که شما را گیج میکند و به اشتباه میاندازد.
- استفاده از important! در CSS که جدا از عادت بد کدنویسی، حقتقدمها را به هم میریزد و شما را گیجتر میکند.
- دو مورد بالا حجم فایل CSS را زیاد میکند، چرا که مجبور هستید بارها، همه یا بخشی از خطهای نوشته شده را تکرار کنید.
- در هنگام بروزرسانی و یا برونسپاری کدهایتان به دیگران، این پیچیدگی شما را دچار مشکل میکند.
- بیشترین هزینهای که میپردازید، زمانی است که صرف آزمون و خطا میکنید.
حق تقدم در CSS یا همان CSS Specificity چیست؟
در CSS، سلکتورها به چهار گروه تقسیم میشوند که هر گروه حق تقدم متفاوتی دارد.
برای درک بهتر قدرت اعمال شدن این گروهها، آنها را به شکل یکان، دهگان، صدگان و هزارگان تصورکنید.
۱. استایلهای خطی (inline) / هزارگان (۱۰۰۰)
نوشتن CSS به شکل مستقیم در داخل HTML
مانند:
<p style="direction:rtl;"></p>
۲. IDها (#) / صدگان (۱۰۰)
همانها که در CSS با کاراکتر شارپ (مربع #) فرا میخوانیم
مانند:
#wrapper
۳. کلاسها (.)، صفات (attributes) و شبه-کلاسها (pseudo-classes) / دهگان (۱۰)
کلاسها، همانهایی هستند که با نقطه شروع میشوند.
مانند:
.header
صفات، همانهایی هستند که داخل براکت [] قرار میگیرند.
مانند:
input[type="email"] یا [class*="bla"]
شبه-کلاسها، با دو نقطه شروع میشوند.
تمامی شبهکلاسها:
:active :any :checked :default :dir() :disabled :empty :enabled :first :first-child :first-of-type :fullscreen :focus :hover :indeterminate :in-range :invalid :lang() :last-child :last-of-type :left :link :not() :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :read-only :read-write :required :right :root :scope :target :valid :visited
شبهکلاس چیست؟
کلاسهایی خاص هستند که رفتار المانهای موجود در HTML را تعریف میکنند.
۴. عنصرها و شبه-عنصرها / یکان (۱)
عنصرها مانند p ، div ، a
تمامی شبه-عنصرها:
::after ::before ::first-letter ::first-line ::selection ::backdrop
شبه-عنصر چیست؟
عناصری که در HTML وجود ندارند و به کمک سلکتورهای CSS پدید میآیند.
حالا که ترتیب اولویت و حق تقدم آنها را متوجه شدیم، برای نمونه چند مثال بیان میکنم:
همانطور که یاد گرفتیم، المانها یکان و کلاسها دهگان هستند. در نتیجه، نمونهی پایین اولویت برتری نسبت به بالایی خود دارد.
استفاده از ID یک صدگان اضافه میکند.
شبه-کلاس و کلاس در یک سطح از تقدم قرار دارند.
گاهی استفاده از ID، نیاز به نوشتن زیاد را کم میکند.
و گاهی استفاده از ID و کلاس شما را مجبور به نوشتن خطوط اضافه میکند.
حالا چند تمرین برای ارزیابی خودتان:
چند نکته در انتها
ارزش سلکتور *
و not:
برابر با صفر است.
مقدار important!
بر همه چیز حق تقدم دارد، حتی استایلهای خطی.
برای اعمال مقدار روی important!
باید پایینتر از important!
قبلی، با استفاده از سلکتوری با حق تقدم بالاتر، یک important!
دیگر ایجاد کنیم! برای مثال:
p a { color: #FFF !important; } p a.btn { color: #000 !important; }
برای محاسبهی حقتقدم CSS، این ماشینحساب حقتقدم به دردتان میخورد. (سعی کنید تمرینهای بالا را خودتان حل کنید!)
مدام تمرین کنید و سلکتورهای CSS را کامل یاد بگیرید.
با استفاده از دانشی که امروز کسب کردید، بد نیست کدهای گذشتهی خود را بهینه کنید.