Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

معماری استایل‌های بزرگ اندازه

573 views

Published on

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

Published in: Education

معماری استایل‌های بزرگ اندازه

  1. 1. ‫قاسمی‬ ‫مام‬ُ‫ه‬ ‫بزرگ‬ ‫های‬ ‫استایل‬ ‫مدیریت‬
  2. 2. ‫بزرگ‬ ‫های‬ ‫استایل‬‫چه؟‬ ‫یعنی‬ •‫استایلها‬ ‫از‬ ‫ای‬ ‫مجموعه‬ •‫سیستم‬ ‫یک‬ ‫مختلف‬ ‫های‬ ‫بخش‬ ‫بین‬ ‫مشترک‬ •‫مداوم‬ ‫تغییر‬ ‫و‬ ‫اصالح‬ ،‫رسانی‬ ‫بروز‬ ‫به‬ ‫نیاز‬ •‫مشتقات‬ ‫و‬ ‫ها‬ ‫پالگین‬
  3. 3. ‫کرد‬ ‫شروع‬ ‫باید‬ ‫کجا‬ ‫از‬ •‫دسترس‬ ‫ابزار،کانال‬ ،‫کاربر‬ •‫دهنده‬ ‫توسعه‬ ‫و‬ ‫طراح‬ ‫بین‬ ‫ارتباط‬ •‫طرح‬ ‫تحلیل‬
  4. 4. ‫دهنده‬ ‫توسعه‬ ‫و‬ ‫طراح‬ ‫هماهنگی‬ •‫وب‬ ‫های‬ ‫المان‬ ‫شناخت‬(‫محتوایی‬ ‫و‬ ‫ساختاری‬) •‫گرید‬ ‫براساس‬ ‫طراحی‬ ‫مفهوم‬ •‫محور‬ ‫محتوا‬ ‫طراحی‬ ‫تفاوت‬(Content Driven)‫کاربرد‬ ‫و‬‫محور‬(Application Driven) •‫موبایل‬ ‫برای‬ ‫اول‬ ‫طراحی‬ ‫تفاوت‬(Mobile First)‫تاپ‬ ‫دسک‬ ‫برای‬ ‫اول‬ ‫و‬(Desktop First) •‫ها‬ ‫محدودیت‬ ‫و‬ ‫مزایا‬ ‫ها‬ ‫ورک‬ ‫فریم‬ •‫ها‬ ‫انیمیشن‬
  5. 5. ‫دهنده‬ ‫توسعه‬ ‫و‬ ‫طراح‬ ‫هماهنگی‬ •‫تصاویر‬ ‫و‬ ‫آیکون‬ ‫مدیریت‬ ‫های‬ ‫سیستم‬ •‫وب‬ ‫برای‬ ‫طراحی‬ ‫قوانین‬(‫مختلف‬ ‫های‬ ‫اندازه‬ ‫برای‬ ‫طراحی‬ ‫نوع‬ ،‫گیری‬ ‫اندازه‬ ‫های‬ ‫واحد‬ ،‫رنگی‬ ‫های‬ ‫سیستم‬) •‫یکسان‬ ‫طراحی‬ ‫افزار‬ ‫نرم‬ •‫المانها‬ ‫اندازه‬ ‫بودن‬ ‫داینامیک‬ ‫مفهوم‬(‫ها‬ ‫دکمه‬ ‫عنوان‬ ‫مانند‬) •‫طراحی‬ ‫در‬ ‫جهت‬ ‫مفهوم‬(Page Flow)
  6. 6. Codepen.io
  7. 7. ‫کنیم؟‬ ‫تحلیل‬ ‫را‬ ‫طرح‬ ‫باید‬ ‫چرا‬ •‫افزار‬ ‫نرم‬ ‫ساختار‬ ‫شناخت‬ •‫ها‬ ‫ماژول‬ ‫مختلف‬ ‫های‬ ‫وضعیت‬ ‫بینی‬ ‫پیش‬ •‫ریسپانسیو‬ ‫وضعیت‬
  8. 8. ‫چینی‬ ‫مسیر‬
  9. 9. ‫ابزار‬
  10. 10. ‫ابزار‬ ‫انتخاب‬ ‫در‬ ‫موثر‬ ‫عوامل‬ •‫دهنده‬ ‫توسعه‬ •‫پروژه‬ •‫کارفرما‬
  11. 11. Pre-Proccessors • Nesting • Partial Files • Variables • Source Maps ‫ها‬ ‫پردازنده‬ ‫پیش‬
  12. 12. Post CSS • Prefixing • Minification • Un-CSS ‫تکمیلی‬ ‫مراحل‬
  13. 13. Strategy • Speed Vs Beauty • FOIT / FOUT • Critical CSS • Image Loading Policy • … ‫استراتژی‬
  14. 14. ‫ها‬ ‫وآیکون‬ ‫تصاویر‬ ‫مدیریت‬ ‫و‬ ‫انتخاب‬ •‫حجم‬ •‫بارگذاری‬ ‫سرعت‬ •‫مرورگرها‬ ‫پشتیبانی‬ •‫ویرایش‬ ،‫نگهداری‬ ،‫بروزرسانی‬
  15. 15. Image & Icon Techniques • Speed Vs Beauty • FOIT / FOUT • Critical CSS • Image Loading Policy • …
  16. 16. ‫ها‬ ‫ورک‬ ‫فریم‬
  17. 17. ‫کرد‬ ‫استفاده‬ ‫ورک‬ ‫فریم‬ ‫از‬ ‫نباید‬ ‫اصال‬ •‫سنگینی‬ •‫بالاستفاده‬ ‫های‬ ‫ماژول‬ •‫دهنده‬ ‫توسعه‬ ‫تنبلی‬ •‫ورک‬ ‫فریم‬ ‫سازی‬ ‫شخصی‬ ‫و‬ ‫ادیت‬
  18. 18. ‫هستند‬ ‫خوب‬ ‫هم‬ ‫خیلی‬ ‫ها‬ ‫ورک‬ ‫فریم‬ ‫ولی‬ •‫وسیع‬ ‫تست‬ ‫بستر‬ •‫پشتیبانی‬ ‫بزرگ‬ ‫جامعه‬ •‫تایپ‬ ‫پروتو‬ ‫سریع‬ ‫ساخت‬ •‫آموزش‬‫رایگان‬
  19. 19. ‫تیمی‬ ‫درون‬ ‫قوانین‬ •‫نگارشی‬ ‫های‬ ‫دستورالعمل‬ •‫ورک‬ ‫فریم‬ ‫انتخاب‬ •‫کد‬ ‫ویرایش‬ ‫و‬ ‫دیباگ‬ ‫روش‬‫سایرین‬
  20. 20. ‫نگارشی‬ ‫های‬ ‫دستورالعمل‬ •‫گذاری‬ ‫نام‬ ‫های‬ ‫روش‬ •‫نوشتن‬ ‫ترتیب‬‫ها‬‫اعالن‬(Declaration) •‫استفاده‬‫ایندنتیشن‬ ‫از‬ •‫گذاری‬ ‫کامنت‬ ‫قوانین‬ •‫اسپسیفیسیتی‬ ‫مجاز‬ ‫میزان‬ ‫حداکثر‬(Specificity)
  21. 21. Specificity‫یا‬ ‫دوست‬ ‫؛‬‫دشمن‬ •‫دولبه‬ ‫شمشیر‬ •‫استفاده‬ ‫سو‬ •‫داشتنی‬ ‫دوست‬ ‫های‬ ‫پالگین‬
  22. 22. Partial Files‫تکه‬ ‫تکه‬ ‫های‬‫فایل‬ ‫؛‬ •‫در‬ ‫پارشال‬CSS‫و‬‫ها‬ ‫پردازنده‬ ‫پیش‬ ‫در‬ ‫پارشال‬ •‫های‬ ‫ماژول‬CSS
  23. 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. 24. ‫همه‬‫هستند‬ ‫یکی‬ ‫واقع‬ ‫در‬ ‫ها‬ ‫الگو‬ ‫این‬ •‫کد‬‫نویسی‬‫الیه‬‫ای‬ •‫تکرار‬ ‫از‬ ‫خودداری‬ ‫تکرار‬(Declaration) •‫از‬ ‫استفاده‬‫های‬ ‫دستورالعمل‬‫مجرب‬CSS •‫جداسازی‬‫اهداف‬
  25. 25. Surgical Classes
  26. 26. Bi-Directional
  27. 27. Psudos
  28. 28. Search and Destroy
  29. 29. Shame(file) on/for me
  30. 30. REFACTOR ‫باز‬-‫نویسی‬ ‫ب‬‫س‬ ‫ی‬ ‫و‬ ‫ن‬ ‫ز‬ ‫ا‬‫ی‬ ‫نویـــســـــی‬ ‫بــــاز‬ ‫تا‬ ‫بازنویسی‬

×