فلش‌کارت‌های آموزشی CSS Specificity: درک و کنترل اولویت استایل‌ها

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره CSS Specificity: درک و کنترل اولویت استایل‌ها

موضوع کلی: برنامه نویسی

موضوع میانی: CSS

📋 سرفصل‌های دوره

• 1. مقدمه: چرا درک Specificity حیاتی است؟
• 2. آشنایی با مفهوم Cascade (آبشار) در CSS
• 3. Specificity چیست؟ یک تعریف ساده
• 4. قوانین CSS از کجا می‌آیند؟ (Author, User, Browser)
• 5. آناتومی یک قانون CSS: سلکتور، پراپرتی، مقدار
• 6. مشکل رایج: چرا استایل من اعمال نمی‌شود؟
• 7. نقش ترتیب کد (Source Order) به عنوان اولین قانون
• 8. اهمیت، Specificity و ترتیب کد: سه ستون اصلی Cascade
• 9. نگاهی کلی به چهار سطح محاسبه Specificity
• 10. آماده‌سازی محیط کدنویسی برای تمرین
• 11. سطح اول Specificity: استایل‌های درون‌خطی (Inline Styles)
• 12. چگونه استایل‌های درون‌خطی بالاترین اولویت را دارند؟
• 13. محاسبه Specificity برای استایل‌های درون‌خطی (1,0,0,0)
• 14. چه زمانی استفاده از استایل درون‌خطی منطقی است؟
• 15. معایب استفاده بیش از حد از استایل‌های درون‌خطی
• 16. سطح دوم Specificity: انتخابگرهای ID
• 17. ID چیست و چرا باید در هر صفحه یکتا باشد؟
• 18. قدرت انتخابگر ID در اولویت‌بندی استایل‌ها
• 19. محاسبه Specificity برای انتخابگر ID (#) (0,1,0,0)
• 20. ترکیب ID با سایر انتخابگرها و تاثیر آن
• 21. چرا استفاده از ID برای استایل‌دهی توصیه نمی‌شود؟
• 22. سطح سوم Specificity: کلاس‌ها، اتریبیوت‌ها و شبه‌کلاس‌ها
• 23. مقدمه‌ای بر انتخابگرهای کلاس (.)
• 24. محاسبه Specificity برای یک کلاس (0,0,1,0)
• 25. زنجیره‌سازی کلاس‌ها (.class1.class2) و محاسبه Specificity
• 26. مقدمه‌ای بر انتخابگرهای اتریبیوت ([type="text"])
• 27. انواع انتخابگرهای اتریبیوت و Specificity یکسان آن‌ها
• 28. مقدمه‌ای بر شبه‌کلاس‌ها (Pseudo-classes)
• 29. Specificity شبه‌کلاس‌های متداول (:hover, :focus)
• 30. Specificity شبه‌کلاس‌های ساختاری (:first-child, :nth-child)
• 31. جمع‌بندی سطح سوم: همه با هم برابرند
• 32. سطح چهارم Specificity: المان‌ها و شبه‌المان‌ها
• 33. انتخابگرهای نوع المان (Element/Type Selectors)
• 34. محاسبه Specificity برای یک المان (p, div, h1) (0,0,0,1)
• 35. مقدمه‌ای بر شبه‌المان‌ها (Pseudo-elements)
• 36. Specificity شبه‌المان‌ها (::before, ::after)
• 37. تفاوت شبه‌کلاس و شبه‌المان در عمل و Specificity
• 38. قانون محاسبه: جمع کردن مقادیر در هر سطح
• 39. مثال عملی: محاسبه Specificity یک سلکتور ترکیبی
• 40. قانون عدم انتقال: چرا ۱۰ کلاس از یک ID ضعیف‌تر است؟
• 41. انتخابگر عمومی (*) و Specificity صفر آن
• 42. انتخابگر فرزند (>) و تاثیر آن بر Specificity
• 43. انتخابگر همسایه مجاور (+) و تاثیر آن بر Specificity
• 44. انتخابگر همسایه‌های عمومی (~) و تاثیر آن بر Specificity
• 45. ترکیب‌کننده‌ها (Combinators) چگونه Specificity را تغییر نمی‌دهند
• 46. قانون نهایی: ترتیب کد (Source Order) به عنوان تای‌برکر
• 47. چه اتفاقی می‌افتد وقتی دو سلکتور Specificity یکسان دارند؟
• 48. اهمیت ترتیب لینک کردن فایل‌های CSS
• 49. کلمه کلیدی !important: شکستن تمام قوانین
• 50. قدرت !important و نحوه عملکرد آن در Cascade
• 51. چرا و چه زمانی باید از !important اجتناب کرد؟
• 52. مواردی که استفاده از !important می‌تواند قابل قبول باشد
• 53. جنگ !important ها: چه کسی برنده می‌شود؟
• 54. وراثت (Inheritance) چیست و چه ارتباطی با Specificity دارد؟
• 55. کدام خصوصیات CSS به ارث می‌رسند و کدام نه؟
• 56. کلمه کلیدی `inherit` و کاربرد آن
• 57. کلمه کلیدی `initial` برای بازگشت به مقدار پیش‌فرض
• 58. کلمه کلیدی `unset` و رفتار دوگانه آن
• 59. شبه‌کلاس :not() و تاثیر آن بر Specificity
• 60. محاسبه Specificity در شبه‌کلاس :not() مدرن
• 61. شبه‌کلاس :is() و ساده‌سازی سلکتورها
• 62. جادوی :is(): Specificity آن چگونه محاسبه می‌شود؟
• 63. شبه‌کلاس :where() و قدرت Specificity صفر
• 64. کاربرد عملی :where() در Reset CSS
• 65. مقایسه :is() و :where() و :not()
• 66. مقدمه‌ای بر Shadow DOM و کپسوله‌سازی استایل
• 67. اولویت استایل‌ها در داخل و خارج از Shadow DOM
• 68. انتخابگر :host و نحوه استایل‌دهی به میزبان
• 69. انتخابگر :host-context() و کاربردهای آن
• 70. استفاده از ابزارهای توسعه‌دهنده مرورگر (DevTools) برای دیباگ
• 71. چگونه Specificity یک سلکتور را در Chrome/Firefox پیدا کنیم؟
• 72. بررسی استایل‌های اعمال‌شده (Computed Styles)
• 73. ردیابی دلیل اعمال نشدن یک استایل خاص
• 74. استراتژی‌های نوشتن CSS با قابلیت نگهداری بالا
• 75. استراتژی شماره ۱: پایین نگه داشتن Specificity
• 76. استراتژی شماره ۲: پرهیز از انتخابگرهای ID برای استایل‌دهی
• 77. استراتژی شماره ۳: پرهیز از زنجیره‌های طولانی سلکتور
• 78. استراتژی شماره ۴: تکیه بر کلاس‌ها
• 79. معماری CSS و ارتباط آن با Specificity
• 80. آشنایی با متدولوژی BEM برای کنترل Specificity
• 81. آشنایی با CSS-in-JS و نحوه مدیریت اولویت‌ها
• 82. آشنایی با Utility-First CSS (مانند Tailwind) و تاثیر آن بر Specificity
• 83. غلبه بر استایل‌های کتابخانه‌ها و فریم‌ورک‌های جانبی
• 84. روش‌های صحیح برای Override کردن استایل‌های خارجی
• 85. بازنویسی (Refactoring) کدهای CSS با Specificity بالا
• 86. سناریوی واقعی ۱: استایل‌دهی به یک منوی تو در تو
• 87. سناریوی واقعی ۲: شخصی‌سازی استایل یک کامپوننت آماده
• 88. سناریوی واقعی ۳: حل یک تضاد پیچیده بین چند فایل CSS
• 89. لایه بندی آبشاری (Cascade Layers) با @layer
• 90. معرفی @layer به عنوان ابزاری جدید برای کنترل Cascade
• 91. چگونه @layer ترتیب و اولویت را بازتعریف می‌کند؟
• 92. ایجاد و نام‌گذاری لایه‌ها
• 93. ترتیب لایه‌ها و تاثیر آن بر اولویت
• 94. استایل‌های خارج از لایه (Un-layered) چگونه رفتار می‌کنند؟
• 95. ادغام قوانین Specificity و Cascade Layers
• 96. مثال عملی: سازماندهی یک پروژه بزرگ با @layer
• 97. جمع‌بندی و مرور قوانین طلایی Specificity
• 98. خلاصه محاسبه چهار سطحی (A, B, C, D)
• 99. خلاصه الگوریتم Cascade: از !important تا Source Order
• 100. یک چالش نهایی: تحلیل یک سناریوی پیچیده