CSS: Refactoring Style Sheets

CSS: Refactoring Style Sheets

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 1h 38m | 327 MB

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
Table of Contents

Introduction
1 CSS refactoring and optimization

Refactoring CSS – The Theory
2 Why and when to refactor CSS
3 When not to refactor
4 General refactoring principles
5 Rational CSS structure
6 Practical approach to CSS refactoring

CSS Refactoring Tools
7 Set up an npm project
8 Install and configure stylelint
9 Make stylelint work in Visual Studio Code
10 Demo – How stylelint works
11 Install and configure Prettier
12 Make Prettier work in Visual Studio Code
13 Automatic rational property order

CSS Refactoring – A Practical Example
14 Fix errors via csslint
15 Remove old and or bad practices
16 Ignoring warnings
17 Update best practices
18 Audit unused CSS with Chrome
19 Quarantine unused code
20 Modularize CSS

Automating Refactoring Using Task Runners
21 Refactoring using a task runner – Gulp
22 Install and configure stylelint
23 Install and configure Purgecss
24 Optimize CSS for delivery

Next Steps
25 Other tools for refactoring