احسان اکبرزاده
احسان اکبرزاده
خواندن ۲ دقیقه·۵ سال پیش

اولویت بندی در CSS از نگاهی دیگر

CSS Specificity
CSS Specificity


این کلیدواژه ساده ترین راه برای پاک کردن خرابکاری هایی هست که پشت صحنه اتفاق افتاده.اما چقدر و تا چه حد قراره این خرابکاری ها رو بپوشونیم.علاوه بر اون ممکنه توی پروژه های بزرگ اونقدر از important استفاده کنید که در نهایت دیگه نشه روی اون المنت override کرد پس‌: تا حد امکان ازش استفاده نکنیم.


خب پس چیکار کنیم؟؟

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

چی میخای بگی؟؟

در واقع من نمیخام بگم که فایل ها بر چه اساس روی پروژه اعمال میشن، من میخواهم اولویت اعمال selector ها رو بگم.
حالا که هم عقیده شدیم میرم سر اصل مطلب.

۱. در بالا و در صدر استایل های خطی هستن که اعمال میشن.یعنی شما هرچقدر هم که داخل فایل های استایلت نشینی سلکتور خفن بزنی اعمال نمیشه، چون خطی همه رو میزاره تو جیبش?

۲. مورد دوم آیدی هست که با یه پله اخلاف در جایگاه دوم جدول قرار داره. اگر به یک المنت هزارتا کلاس هم بدیم و یه آيدی و بهشون تو یک فایل استایل بدیم، قطعا آیدی اعمال میشه.پس آیدی باشگاه رفته و قوی تر کلاساس.

۳. مورد سوم کلاسا هستن که بدشانسی کارشونو خراب کرد و رتبشون شد سوم جدول.سودو کلاس ها و اتربیوت سلکتور ها هم به همین شکل.اگر بخوایم مثل بالا مقایسه کنیم، میتونیم بگیم هزارتا المنت هم بزنیم، یک کلاس قوی تره.

۴.آخرین مورد هم خود المنت هست که اولویت اون از همه کمتر هست.این شامل سودو المنت ها هم میشه.

لازم به ذکر است:‌

اگر از چندتا از این سلکتور ها همزمان استفاده بکنین اولویت اونا تغییر میکنه مثلا اگر فقط المنت خالی استفاده کنیم اولویت ما ۱ هست اما هم المنت و هم کلاس رو استفاده کنیم میشه ۳.تصویر واضح میگه چه اتفاقی میوفته.

CSS Specificity
CSS Specificity

خب اینارو گفتی که چی؟؟

همه اینارو گفتم که سعی کنیم استفادمون رو از important کم کنیم و بریم سمت اینکه بفهمیم چطور باید از سلکتور ها استفاده کنیم.

csscss specifieshtml
صلح ☮️ آزادی 🕊️ و کنجکاوی 👨‍💻
شاید از این پست‌ها خوشتان بیاید