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.
Overview
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
Taught by
Morten Rand-Hendriksen
