CSS: Refactoring Style Sheets

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

About the Author

Morten Rand-Hendriksen is a web designer and developer.

Morten has a passion for clean design, standards-based code, and open-source software like WordPress. He has published several books, articles, and videos on these topics and is a popular speaker at conferences. Running a small boutique-style digital media company, he divides his time evenly between building web solutions and teaching others how to do things right and get the most out of the web. Morten grew up in Norway and made Canada his home in 2002.

Video Details

• Full Video Tutorials
• Video File Format: MP4
• Skill Level: Intermediate
• Video Duration: 1h 38m
• Instructor: Morten Rand-Hendriksen