پیشنهاد فرادرس

آموزش CSS - ریفکتور کردن Style Sheets

دسته بندی ها: آموزش CSS ، آموزش طراحی وب ، آموزش های لیندا (Lynda)

سایت ها و اپلیکیشن ها هر روز پیچیده تر می شوند و stylesheets به طور مداوم رشد می کنند. با مجموعه ای متفاوت از اولویت ها و ابزارها، ریفکتورینگ CSS از ریفکتورینگ زبان های برنامه نویسی معمولی متفاوت هستند. در این دوره با ایجاد و بهینه سازی stylesheets، هدف ریفکتورینگ، بازنویسی CSS برای ساده سازی، بهبود و بهینه سازی کد بدون تغییر رفتار، ابزارهایی مانند nmp، stylelint، Prettier، Visual Studio Code، Purgecss و Gulp و غیره آشنا می شوید.

سرفصل:

  • بهینه سازی CSS
  • ریفکتور کردن Style Sheets
  • ساختار CSS
  • خواص مرتب سازی مجدد به صورت خودکار
  • خطاهای رفع
  • نادیده گرفتن هشدارها
  • چیدمان صفحات حسابرسی با Chrome
  • قرنطینه کردن کد استفاده نشده
  • مدولاسیون CSS
  • استفاده از task runners
  • بهینه سازی CSS برای تحویل
  • و غیره
CSS: Refactoring Style Sheets Publisher:Lynda Author:Morten Rand-Hendriksen Duration:1h 38m Level:Intermediate

Large stylesheets can easily become formidably difficult to deal with. Learn how to refactor stylesheets so you can successfully control the layouts of many web pages at once.
Released: 9/10/2018
As sites and apps grow ever more intricate, stylesheets frequently grow by gradual accumulation—things get added and things get adjusted, resulting in stylesheets becoming unnecessarily complicated. Refactoring CSS is different from refactoring typical programming languages, with a different set of priorities and tools. In this course, learn how make stylesheets leaner while maintaining the stylesheet's power. Find out how to optimize new and legacy stylesheets. First, Morten Rand-Hendriksen explains the goal of refactoring—to rewrite CSS to simplify, improve, and optimize the code without changing its behavior. Then he covers tools like nmp, stylelint, Prettier, Visual Studio Code, Purgecss, and Gulp. He also shows a practical example of how to fix and reformat a stylesheet, followed by sharing best practices and demonstrating how to clean code via automation.
Topics include:
CSS optimization
Refactoring many stylesheets
Structuring CSS
Reordering properties automatically
Fixing errors
Ignoring warnings
Auditing stylesheets with Chrome
Quarantining unused code
Modularizing CSS
Using task runners
Optimizing CSS for delivery
Introduction
CSS refactoring and optimization
52s
1. Refactoring CSS: The Theory
Why and when to refactor CSS
2m 54s
When not to refactor
2m 25s
General refactoring principles
2m 24s
Rational CSS structure
2m 52s
Practical approach to CSS refactoring
2m 39s
2. CSS Refactoring Tools
Set up an npm project
4m 39s
Install and configure stylelint
5m 20s
Make stylelint work in Visual Studio Code
3m 56s
Demo: How stylelint works
5m 30s
Install and configure Prettier
3m 24s
Make Prettier work in Visual Studio Code
4m 11s
Automatic rational property order
2m 18s
3. CSS Refactoring: A Practical Example
Fix errors via csslint
1m 30s
Remove old and/or bad practices
6m 51s
Ignoring warnings
3m 51s
Update best practices
4m 24s
Audit unused CSS with Chrome
5m 19s
Quarantine unused code
3m 28s
Modularize CSS
8m 1s
4. Automating Refactoring Using Task Runners
Refactoring using a task runner: Gulp
6m 2s
Install and configure stylelint
7m 2s
Install and configure Purgecss
4m 31s
Optimize CSS for delivery
3m 5s
Next Steps
Other tools for refactoring
1m 17s

پیشنهاد فرادرس