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

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

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

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

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

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

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

مفهوم طراحی براساس گرید•(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

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

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

بازنویسی