Overview
-
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.
Syllabus
-
Introduction
- CSS refactoring and optimization
- Why and when to refactor CSS
- When not to refactor
- General refactoring principles
- Rational CSS structure
- Practical approach to CSS refactoring
- Set up an npm project
- Install and configure stylelint
- Make stylelint work in Visual Studio Code
- Demo: How stylelint works
- Install and configure Prettier
- Make Prettier work in Visual Studio Code
- Automatic rational property order
- Fix errors via csslint
- Remove old and/or bad practices
- Ignoring warnings
- Update best practices
- Audit unused CSS with Chrome
- Quarantine unused code
- Modularize CSS
- Refactoring using a task runner: Gulp
- Install and configure stylelint
- Install and configure Purgecss
- Optimize CSS for delivery
- Other tools for refactoring
