دوره آموزشی CSS: سبک بازسازی مجدد
1 ساعت 39 دقیقهمتوسط2018-09-10
مدرسین

Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
جزئیات دوره
همانطور که سایتها و برنامهها پیچیدهتر میشوند، شیوه نامهها اغلب با انباشت تدریجی رشد میکنند—چیزها اضافه میشوند و چیزها تنظیم میشوند، که منجر به پیچیده شدن غیرضروری شیتها میشود. Refactoring CSS با refactoring زبان های برنامه نویسی معمولی با مجموعه ای از اولویت ها و ابزار متفاوت است. در این دوره، یاد بگیرید که چگونه استایل شیت ها را باریک تر کنید و در عین حال قدرت صفحه سبک را حفظ کنید. نحوه بهینه سازی شیوه نامه های جدید و قدیمی را بیابید. ابتدا، مورتن رند-هندریکسن هدف از refactoring را توضیح میدهد – بازنویسی CSS برای سادهسازی، بهبود و بهینهسازی کد بدون تغییر رفتار آن. سپس ابزارهایی مانند nmp، stylelint، Prettier، Visual Studio Code، Purgecss و Gulp را پوشش می دهد. او همچنین یک مثال عملی از نحوه تعمیر و فرمت مجدد یک stylesheet را نشان میدهد و به دنبال آن بهترین شیوهها را به اشتراک میگذارد و نحوه پاک کردن کد از طریق اتوماسیون را نشان میدهد.
اهداف یادگیری
بهینه سازی CSS
بازسازی بسیاری از شیوه نامه ها
ساختار CSS
سفارش مجدد خواص به صورت خودکار
رفع خطاها
نادیده گرفتن هشدارها
بررسی شیوه نامه ها با کروم
قرنطینه کردن کدهای استفاده نشده
ماژولار کردن CSS
استفاده از task runners
بهینه سازی CSS برای تحویل
اهداف یادگیری
بهینه سازی CSS
بازسازی بسیاری از شیوه نامه ها
ساختار CSS
سفارش مجدد خواص به صورت خودکار
رفع خطاها
نادیده گرفتن هشدارها
بررسی شیوه نامه ها با کروم
قرنطینه کردن کدهای استفاده نشده
ماژولار کردن CSS
استفاده از task runners
بهینه سازی CSS برای تحویل
مهارت ها
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
سرفصل ها
0. مقدمه
- 01 - بازسازی و بهینه سازی CSS
1. Refactoring CSS - Theory
- 02 - چرا و چه زمانی باید CSS را بازسازی کنیم
- 03 - چه زمانی نباید اصلاح کرد
- 04 - اصول کلی بازسازی
- 05 - ساختار CSS منطقی
- 06 - رویکرد عملی به بازسازی CSS
2. CSS Refactoring Tools
- 07 - یک پروژه npm راه اندازی کنید
- 08 - stylelint را نصب و پیکربندی کنید
- 09 - در ویژوال استودیو کد استایلنت کار کنید
- 10 - دمو - نحوه عملکرد stylelint
- 11 - Prettier را نصب و پیکربندی کنید
- 12 - در Visual Studio Code کار زیباتر را انجام دهید
- 13 - سفارش مالکیت عقلایی خودکار
3. CSS Refactoring - یک مثال عملی
- 14 - رفع خطاها از طریق csslint
- 15 - اقدامات قدیمی و یا بد را حذف کنید
- 16 - بی توجهی به هشدارها
- 17 - بهترین شیوه ها را به روز کنید
- 18 - CSS استفاده نشده را با کروم بررسی کنید
- 19 - کد استفاده نشده را قرنطینه کنید
- 20 - CSS را مدولار کنید
4. خودکارسازی Refactoring با استفاده از Task Runners
- 21 - Refactoring با استفاده از یک task runner - Gulp
- 22 - stylelint را نصب و پیکربندی کنید
- 23 - Purgecss را نصب و پیکربندی کنید
- 24 - CSS را برای تحویل بهینه کنید
مراحل بعدی
- 25 - سایر ابزارهای بازسازی
دوره های مرتبط
- دوره آموزشی جعبه ابزار CSS: نکات و روشهای طراحی و چینش صفحه
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
- دوره آموزشی CSS برای توسعهدهندگان
- دوره آموزشی HTML، CSS و جاوااسکریپت: ساخت وب
- دوره آموزشی طرح بندی قابل دسترسی برای وب
- دوره آموزشی فرم های HTML: قابلیت دسترسی
- دوره آموزشی مقدمه ای بر طراحی و توسعه وب
- دوره آموزشی آن را تمرین کن: طرح بندی CSS