CSS: Refactoring Style Sheets
1h 39mIntermediate2018-09-10
Authors

Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
Course details
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.
Learning objectives
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
Learning objectives
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
Skills covered
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - CSS refactoring and optimization
1. Refactoring CSS - The Theory
- 02 - Why and when to refactor CSS
- 03 - When not to refactor
- 04 - General refactoring principles
- 05 - Rational CSS structure
- 06 - Practical approach to CSS refactoring
2. CSS Refactoring Tools
- 07 - Set up an npm project
- 08 - Install and configure stylelint
- 09 - 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
3. 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
4. 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