30
ی م س ا ام ق مُ ه رگ ز ب ل های ی ا ت س ا ت ی ز ب مد

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

Embed Size (px)

Citation preview

همام قاسمیمدیریت استایل های بزرگ

یعنی چه؟استایل های بزرگ

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

از کجا باید شروع کرد

کاربر، ابزار،کانال دسترس•ارتباط بین طراح و توسعه دهنده•تحلیل طرح•

هماهنگی طراح و توسعه دهنده

)ساختاری و محتوایی( شناخت المان های وب•

مفهوم طراحی براساس گرید•(Application Driven)و کاربرد محور ( Content Driven)تفاوت طراحی محتوا محور •

(Desktop First)و اول برای دسک تاپ ( Mobile First)تفاوت طراحی اول برای موبایل •

فریم ورک ها مزایا و محدودیت ها•انیمیشن ها•

هماهنگی طراح و توسعه دهنده

سیستم های مدیریت آیکون و تصاویر•)سیستم های رنگی، واحد های اندازه گیری، نوع طراحی برای اندازه های مختلف( قوانین طراحی برای وب•

نرم افزار طراحی یکسان•)مانند عنوان دکمه ها(مفهوم داینامیک بودن اندازه المانها •

(Page Flow)مفهوم جهت در طراحی •

Codepen.io

چرا باید طرح را تحلیل کنیم؟

شناخت ساختار نرم افزار•پیش بینی وضعیت های مختلف ماژول ها•وضعیت ریسپانسیو•

مسیر چینی

ابزار

عوامل موثر در انتخاب ابزار

توسعه دهنده•پروژه•کارفرما•

Pre-Proccessors

• Nesting• Partial Files• Variables• Source Maps

پیش پردازنده ها

Post CSS

• Prefixing• Minification• Un-CSS

مراحل تکمیلی

Strategy

• Speed Vs Beauty• FOIT / FOUT• Critical CSS• Image Loading Policy• …

استراتژی

انتخاب و مدیریت تصاویر وآیکون ها

حجم•سرعت بارگذاری•پشتیبانی مرورگرها•بروزرسانی، نگهداری، ویرایش•

Image & Icon Techniques

• Speed Vs Beauty• FOIT / FOUT• Critical CSS• Image Loading Policy• …

فریم ورک ها

اصال نباید از فریم ورک استفاده کرد

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

ولی فریم ورک ها خیلی هم خوب هستند

بستر تست وسیع•جامعه بزرگ پشتیبانی•ساخت سریع پروتو تایپ•آموزش رایگان•

قوانین درون تیمی

دستورالعمل های نگارشی•انتخاب فریم ورک•روش دیباگ و ویرایش کد سایرین•

دستورالعمل های نگارشی

روش های نام گذاری•(Declaration)ترتیب نوشتن اعالن ها •

استفاده از ایندنتیشن•قوانین کامنت گذاری•(Specificity)حداکثر میزان مجاز اسپسیفیسیتی •

Specificity؛ دوست یا دشمن

شمشیر دولبه•سو استفاده•پالگین های دوست داشتنی•

Partial Files؛ فایل های تکه تکه

و پارشال در پیش پردازنده هاCSSپارشال در •CSSماژول های •

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

همه این الگو ها در واقع یکی هستند

کد نویسی الیه ای •(Declaration)تکرار خودداری از تکرار •

CSSاستفاده از دستورالعمل های مجرب •جداسازی اهداف•

Surgical Classes

Bi-Directional

Psudos

Search and Destroy

Shame)file( on/for me

REFACTOR

باز-نویسیب ا ز ن و ی س ی

بــــاز نویـــســـــیتا

بازنویسی