در پروژه های بزرگ وب و نرم افزارهای تحت وب مدرن، ساخت ظاهر زیبا، کاربرپسند و کاربردپذیر، جز لاینفک دل مشغولی های صاحبان پروژه و مدیران فنی است.به همین دلایل استفاده از پیش پردازنده هایی مانند SCSS، LESS و غیره بسیار متداول شده اند که در حین رفع برخی مشکلات باعث ایجاد پیچیدگی ها و معضلات جدیدی شده اند که به برخی از آنها خواهیم پرداخت که برای این منظور یک مدل واقعی از مجموعه پروژه ها و وب سایت های یک شرکت فعال را از بدو ساخت تاکنون بعلاوه برنامه ریزی های آینده برای آن بررسی خواهیم کرد.

1. ‫قاسمی‬ ‫مام‬ُ‫ه‬
‫بزرگ‬ ‫های‬ ‫استایل‬ ‫مدیریت‬

2. ‫بزرگ‬ ‫های‬ ‫استایل‬‫چه؟‬ ‫یعنی‬
•‫استایلها‬ ‫از‬ ‫ای‬ ‫مجموعه‬
•‫سیستم‬ ‫یک‬ ‫مختلف‬ ‫های‬ ‫بخش‬ ‫بین‬ ‫مشترک‬
•‫مداوم‬ ‫تغییر‬ ‫و‬ ‫اصالح‬ ،‫رسانی‬ ‫بروز‬ ‫به‬ ‫نیاز‬
•‫مشتقات‬ ‫و‬ ‫ها‬ ‫پالگین‬

3. ‫کرد‬ ‫شروع‬ ‫باید‬ ‫کجا‬ ‫از‬
•‫دسترس‬ ‫ابزار،کانال‬ ،‫کاربر‬
•‫دهنده‬ ‫توسعه‬ ‫و‬ ‫طراح‬ ‫بین‬ ‫ارتباط‬
•‫طرح‬ ‫تحلیل‬

4. ‫دهنده‬ ‫توسعه‬ ‫و‬ ‫طراح‬ ‫هماهنگی‬
•‫وب‬ ‫های‬ ‫المان‬ ‫شناخت‬(‫محتوایی‬ ‫و‬ ‫ساختاری‬)
•‫گرید‬ ‫براساس‬ ‫طراحی‬ ‫مفهوم‬
•‫محور‬ ‫محتوا‬ ‫طراحی‬ ‫تفاوت‬(Content Driven)‫کاربرد‬ ‫و‬‫محور‬(Application Driven)
•‫موبایل‬ ‫برای‬ ‫اول‬ ‫طراحی‬ ‫تفاوت‬(Mobile First)‫تاپ‬ ‫دسک‬ ‫برای‬ ‫اول‬ ‫و‬(Desktop First)
•‫ها‬ ‫محدودیت‬ ‫و‬ ‫مزایا‬ ‫ها‬ ‫ورک‬ ‫فریم‬
•‫ها‬ ‫انیمیشن‬

5. ‫دهنده‬ ‫توسعه‬ ‫و‬ ‫طراح‬ ‫هماهنگی‬
•‫تصاویر‬ ‫و‬ ‫آیکون‬ ‫مدیریت‬ ‫های‬ ‫سیستم‬
•‫وب‬ ‫برای‬ ‫طراحی‬ ‫قوانین‬(‫مختلف‬ ‫های‬ ‫اندازه‬ ‫برای‬ ‫طراحی‬ ‫نوع‬ ،‫گیری‬ ‫اندازه‬ ‫های‬ ‫واحد‬ ،‫رنگی‬ ‫های‬ ‫سیستم‬)
•‫یکسان‬ ‫طراحی‬ ‫افزار‬ ‫نرم‬
•‫المانها‬ ‫اندازه‬ ‫بودن‬ ‫داینامیک‬ ‫مفهوم‬(‫ها‬ ‫دکمه‬ ‫عنوان‬ ‫مانند‬)
•‫طراحی‬ ‫در‬ ‫جهت‬ ‫مفهوم‬(Page Flow)

6. Codepen.io

7. ‫کنیم؟‬ ‫تحلیل‬ ‫را‬ ‫طرح‬ ‫باید‬ ‫چرا‬
•‫افزار‬ ‫نرم‬ ‫ساختار‬ ‫شناخت‬
•‫ها‬ ‫ماژول‬ ‫مختلف‬ ‫های‬ ‫وضعیت‬ ‫بینی‬ ‫پیش‬
•‫ریسپانسیو‬ ‫وضعیت‬

8. ‫چینی‬ ‫مسیر‬

9. ‫ابزار‬

10. ‫ابزار‬ ‫انتخاب‬ ‫در‬ ‫موثر‬ ‫عوامل‬
•‫دهنده‬ ‫توسعه‬
•‫پروژه‬
•‫کارفرما‬

11. Pre-Proccessors
• Nesting
• Partial Files
• Variables
• Source Maps
‫ها‬ ‫پردازنده‬ ‫پیش‬

12. Post CSS
• Prefixing
• Minification
• Un-CSS
‫تکمیلی‬ ‫مراحل‬

13. Strategy
• Speed Vs Beauty
• FOIT / FOUT
• Critical CSS
• Image Loading Policy
• …
‫استراتژی‬

14. ‫ها‬ ‫وآیکون‬ ‫تصاویر‬ ‫مدیریت‬ ‫و‬ ‫انتخاب‬
•‫حجم‬
•‫بارگذاری‬ ‫سرعت‬
•‫مرورگرها‬ ‫پشتیبانی‬
•‫ویرایش‬ ،‫نگهداری‬ ،‫بروزرسانی‬

15. Image & Icon Techniques
• Speed Vs Beauty
• FOIT / FOUT
• Critical CSS
• Image Loading Policy
• …

16. ‫ها‬ ‫ورک‬ ‫فریم‬

17. ‫کرد‬ ‫استفاده‬ ‫ورک‬ ‫فریم‬ ‫از‬ ‫نباید‬ ‫اصال‬
•‫سنگینی‬
•‫بالاستفاده‬ ‫های‬ ‫ماژول‬
•‫دهنده‬ ‫توسعه‬ ‫تنبلی‬
•‫ورک‬ ‫فریم‬ ‫سازی‬ ‫شخصی‬ ‫و‬ ‫ادیت‬

18. ‫هستند‬ ‫خوب‬ ‫هم‬ ‫خیلی‬ ‫ها‬ ‫ورک‬ ‫فریم‬ ‫ولی‬
•‫وسیع‬ ‫تست‬ ‫بستر‬
•‫پشتیبانی‬ ‫بزرگ‬ ‫جامعه‬
•‫تایپ‬ ‫پروتو‬ ‫سریع‬ ‫ساخت‬
•‫آموزش‬‫رایگان‬

19. ‫تیمی‬ ‫درون‬ ‫قوانین‬
•‫نگارشی‬ ‫های‬ ‫دستورالعمل‬
•‫ورک‬ ‫فریم‬ ‫انتخاب‬
•‫کد‬ ‫ویرایش‬ ‫و‬ ‫دیباگ‬ ‫روش‬‫سایرین‬

20. ‫نگارشی‬ ‫های‬ ‫دستورالعمل‬
•‫گذاری‬ ‫نام‬ ‫های‬ ‫روش‬
•‫نوشتن‬ ‫ترتیب‬‫ها‬‫اعالن‬(Declaration)
•‫استفاده‬‫ایندنتیشن‬ ‫از‬
•‫گذاری‬ ‫کامنت‬ ‫قوانین‬
•‫اسپسیفیسیتی‬ ‫مجاز‬ ‫میزان‬ ‫حداکثر‬(Specificity)

21. Specificity‫یا‬ ‫دوست‬ ‫؛‬‫دشمن‬
•‫دولبه‬ ‫شمشیر‬
•‫استفاده‬ ‫سو‬
•‫داشتنی‬ ‫دوست‬ ‫های‬ ‫پالگین‬

22. Partial Files‫تکه‬ ‫تکه‬ ‫های‬‫فایل‬ ‫؛‬
•‫در‬ ‫پارشال‬CSS‫و‬‫ها‬ ‫پردازنده‬ ‫پیش‬ ‫در‬ ‫پارشال‬
•‫های‬ ‫ماژول‬CSS

23. Architecture
• OCSSO (Separate Structure and Skin, Separate Container and Content, Build HTML from
Component Library)
• SMACCSS (Base, Layout, Module, State, Theme)
• BEM (Base, Element, Modifier)
• ITCSS (Settings, Tools, Generic, Elements, Objects, Components, Trumps)
• Suit CSS
• Atomic CSS

24. ‫همه‬‫هستند‬ ‫یکی‬ ‫واقع‬ ‫در‬ ‫ها‬ ‫الگو‬ ‫این‬
•‫کد‬‫نویسی‬‫الیه‬‫ای‬
•‫تکرار‬ ‫از‬ ‫خودداری‬ ‫تکرار‬(Declaration)
•‫از‬ ‫استفاده‬‫های‬ ‫دستورالعمل‬‫مجرب‬CSS
•‫جداسازی‬‫اهداف‬

25. Surgical Classes

26. Bi-Directional

27. Psudos

28. Search and Destroy

29. Shame(file) on/for me

30. REFACTOR
‫باز‬-‫نویسی‬
‫ب‬‫س‬ ‫ی‬ ‫و‬ ‫ن‬ ‫ز‬ ‫ا‬‫ی‬
‫نویـــســـــی‬ ‫بــــاز‬
‫تا‬
‫بازنویسی‬