فرزان بالکانی

حق‌تقدم در CSS یا CSS Specificity

نقاشی بعد از شما، براکت

یکی از رایج‌ترین مشکلاتی که در هنگام کار با 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 و کلاس شما را مجبور به نوشتن خطوط اضافه می‌کند.

 

حالا چند تمرین برای ارزیابی خودتان:

css-sp-0007نمونه‌ی تمرین حق تقدم در سی‌اس‌اسنمونه‌ی تمرین حق تقدم در سی‌اس‌اس

چند نکته در انتها

ارزش سلکتور * و not: برابر با صفر است.
مقدار important! بر همه چیز حق تقدم دارد، حتی استایل‌های خطی.
برای اعمال مقدار روی important! باید پایین‌تر از important! قبلی، با استفاده از سلکتوری با حق تقدم بالاتر، یک important! دیگر ایجاد کنیم! برای مثال:

p a {
color: #FFF !important;
}

p a.btn {
color: #000 !important;
}

برای محاسبه‌ی حق‌تقدم CSS، این ماشین‌حساب حق‌تقدم به دردتان می‌خورد. (سعی کنید تمرین‌های بالا را خودتان حل کنید!)
مدام تمرین کنید و سلکتورهای CSS را کامل یاد بگیرید.

با استفاده از دانشی که امروز کسب کردید، بد نیست کدهای گذشته‌ی خود را بهینه کنید.

فرزان بالکانی

طراح رابط و تجربه کاربری (UI/UX)، توسعه دهنده وب و همچنین گرافیست سارینا. فرزان بالکانی از سال ۱۳۸۴ طراحی وب را در کنار طراحی گرافیک و ساخت انیمیشن شروع کرد.

  1. یکشنبه، ۱۹ مهر ۱۳۹۴ مرثا
    مرسی ...
  2. چهارشنبه، ۲۲ مهر ۱۳۹۴ آزاده
    ممنون!
  3. چهارشنبه، ۲۹ مهر ۱۳۹۴ محمد
    مطلب جالبی بود .. فقط یه نکتهکه جهت استحضار خودتون میگم و نیازی نیست این کامنت من تایید بشه که کلمه "بر" و "روی" یک معنی دارند و باید تصحیح بشه: روی !


    سپاس
    • فرزان بالکانی
      چهارشنبه، ۲۹ مهر ۱۳۹۴ فرزان بالکانی
      ممنونم از نظرتون :)
      گرچه با شما موافقم ولی باید بگم که صرفا برای تاکید بیشتر استفاده شده.
      باز هم ممنونم