CSS: Refactoring Style Sheets

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.

Introduction

• CSS refactoring and optimization

1. Refactoring CSS: The Theory

• Why and when to refactor CSS
• When not to refactor
• General refactoring principles
• Rational CSS structure
• Practical approach to CSS refactoring

2. CSS Refactoring Tools

• 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

3. CSS Refactoring: A Practical Example

• 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

4. Automating Refactoring Using Task Runners

• Refactoring using a task runner: Gulp
• Install and configure stylelint
• Install and configure Purgecss
• Optimize CSS for delivery

Next Steps

• Other tools for refactoring