فلش‌کارت‌های آموزشی بازسازی و بهینه‌سازی استایل‌شیت‌های قدیمی با Sass

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

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

عنوان دوره: دوره بازسازی و بهینه‌سازی استایل‌شیت‌های قدیمی با Sass

موضوع کلی: توسعه وب فرانت‌اند

موضوع میانی: نگهداری و بهبود کیفیت کد

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

• 1. مقدمه‌ای بر بازسازی استایل‌شیت‌ها
• 2. چرا بازسازی استایل‌شیت‌های قدیمی مهم است؟
• 3. شناخت مشکلات رایج در استایل‌شیت‌های قدیمی
• 4. مراحل بازسازی استایل‌شیت‌های قدیمی
• 5. ابزارهای مورد نیاز برای بازسازی استایل‌شیت
• 6. آشنایی با پیش‌پردازنده Sass
• 7. نصب و راه‌اندازی Sass
• 8. مفاهیم اصلی Sass: متغیرها، توابع و میکسین‌ها
• 9. استفاده از متغیرها برای مدیریت رنگ‌ها و فونت‌ها
• 10. ایجاد توابع Sass برای محاسبات و تبدیلات
• 11. میکسین‌ها: تعریف و استفاده از بلوک‌های کد قابل استفاده مجدد
• 12. ساختاردهی به فایل‌های Sass
• 13. استفاده از نام‌گذاری BEM در Sass
• 14. نحوه سازماندهی پوشه‌ها و فایل‌های Sass
• 15. بازسازی استایل‌شیت با استفاده از Sass: گام به گام
• 16. تبدیل CSS به Sass: نکات و ترفندها
• 17. استفاده از Sass برای بهبود خوانایی کد
• 18. بهبود قابلیت نگهداری کد با Sass
• 19. کاهش حجم فایل‌های CSS با Sass
• 20. بهینه‌سازی استایل‌شیت برای سرعت بارگذاری
• 21. استفاده از Sass برای مدیریت استایل‌های رسپانسیو
• 22. رسپانسیو کردن استایل‌شیت با استفاده از میکسین‌ها
• 23. آشنایی با Media Queries در Sass
• 24. استفاده از flexbox و grid با Sass
• 25. پیاده‌سازی grid layout با Sass
• 26. استفاده از flexbox برای چیدمان عناصر
• 27. بازسازی استایل‌شیت‌های پیچیده با Sass
• 28. مدیریت استایل‌های عناصر تکراری
• 29. استفاده از Sass برای ایجاد کامپوننت‌های قابل استفاده مجدد
• 30. بهبود عملکرد استایل‌شیت با استفاده از Sass
• 31. بهینه‌سازی تصاویر و فونت‌ها در Sass
• 32. استفاده از ابزارهای Linting برای بررسی کیفیت کد Sass
• 33. بررسی خودکار کد Sass با Stylelint
• 34. آشنایی با CSS Modules و نحوه استفاده از آن‌ها
• 35. ادغام Sass با ابزارهای build مانند Webpack
• 36. خودکارسازی فرآیند کامپایل Sass
• 37. تست کردن استایل‌شیت‌های بازسازی شده با Sass
• 38. نحوه دیباگ کردن کد Sass
• 39. بهترین روش‌ها برای بازسازی استایل‌شیت‌های قدیمی
• 40. جلوگیری از مشکلات رایج در بازسازی استایل‌شیت
• 41. استفاده از Sass برای ایجاد سیستم طراحی (Design System)
• 42. مستندسازی استایل‌شیت‌های بازسازی شده با Sass
• 43. آشنایی با ابزارهای مستندسازی Sass
• 44. مدیریت وابستگی‌ها در پروژه‌های Sass
• 45. استفاده از Package Manager برای مدیریت وابستگی‌ها
• 46. استفاده از Sass در پروژه‌های بزرگ
• 47. چالش‌ها و راهکارهای بازسازی استایل‌شیت‌های بزرگ
• 48. همکاری در پروژه‌های Sass با تیم‌های توسعه
• 49. استفاده از Git برای کنترل نسخه کد Sass
• 50. آشنایی با مفاهیم Semantic Versioning در Sass
• 51. بهبود تجربه کاربری با استایل‌شیت‌های بهینه‌سازی شده
• 52. استفاده از Sass برای ایجاد انیمیشن‌های جذاب
• 53. بهبود دسترسی‌پذیری وب‌سایت با Sass
• 54. آشنایی با استانداردهای دسترسی‌پذیری وب
• 55. استفاده از Sass برای ایجاد تم‌های مختلف برای وب‌سایت
• 56. پیاده‌سازی Dark Mode با استفاده از Sass
• 57. آشنایی با ابزارهای توسعه‌دهنده مرورگر برای بررسی استایل‌شیت‌های Sass
• 58. استفاده از DevTools برای دیباگ کردن استایل‌های Sass
• 59. به روز رسانی استایل‌شیت‌های بازسازی شده با Sass
• 60. نحوه مدیریت تغییرات در استایل‌شیت
• 61. آینده بازسازی استایل‌شیت‌ها و تکنولوژی‌های جدید
• 62. آشنایی با CSS-in-JS و مقایسه آن با Sass
• 63. استفاده از Sass در فریم‌ورک‌های جاوااسکریپت مانند React و Vue.js
• 64. ادغام Sass با سیستم‌های CI/CD
• 65. آشنایی با ابزارهای تست خودکار استایل‌شیت
• 66. بهینه‌سازی استایل‌شیت برای موتورهای جستجو (SEO)
• 67. استفاده از Sass برای ایجاد استایل‌های سفارشی برای کامپوننت‌ها
• 68. آشنایی با الگوهای طراحی در Sass
• 69. بهبود امنیت استایل‌شیت با Sass
• 70. جلوگیری از حملات XSS در استایل‌شیت
• 71. آشنایی با ابزارهای مانیتورینگ استایل‌شیت
• 72. نظارت بر عملکرد استایل‌شیت در تولید
• 73. بهینه‌سازی استایل‌شیت برای دستگاه‌های مختلف
• 74. استفاده از Viewport Units در Sass
• 75. آشنایی با ابزارهای Performance Budgeting برای استایل‌شیت
• 76. تنظیم بودجه عملکرد برای استایل‌شیت‌ها
• 77. استفاده از Sass برای ایجاد استایل‌های قابل دسترس برای افراد دارای معلولیت
• 78. آشنایی با WCAG و نحوه پیاده‌سازی آن در Sass
• 79. مدیریت استایل‌های third-party با Sass
• 80. ادغام استایل‌های کتابخانه‌های خارجی با Sass
• 81. آشنایی با ابزارهای تحلیل کد Sass
• 82. بررسی کیفیت و پیچیدگی کد Sass
• 83. استفاده از Sass برای ایجاد استایل‌های متحرک (Motion Design)
• 84. پیاده‌سازی انیمیشن‌های پیچیده با Sass
• 85. آشنایی با ابزارهای build پیشرفته برای Sass
• 86. استفاده از ابزارهای Build مانند Parcel و esbuild برای Sass
• 87. بهینه‌سازی استایل‌شیت برای Core Web Vitals
• 88. استفاده از Sass برای بهبود Largest Contentful Paint (LCP)
• 89. آشنایی با ابزارهای تست A/B برای استایل‌شیت
• 90. مقایسه عملکرد استایل‌شیت‌های مختلف
• 91. بهبود سرعت رندر استایل‌شیت با Sass
• 92. استفاده از Critical CSS با Sass
• 93. آشنایی با ابزارهای مانیتورینگ عملکرد وب‌سایت
• 94. نظارت بر عملکرد استایل‌شیت در محیط واقعی
• 95. استفاده از Sass برای ایجاد استایل‌های سفارشی برای کامپوننت‌های UI
• 96. بهینه‌سازی استایل‌شیت برای Mobile-First Design
• 97. آشنایی با اصول طراحی Mobile-First
• 98. استفاده از Sass برای ایجاد استایل‌های قابل استفاده مجدد در پروژه‌های مختلف
• 99. آشنایی با Storybook و نحوه استفاده از آن با Sass
• 100. بهبود قابلیت تست استایل‌شیت با Sass