YoVDO

CSS: Refactoring Style Sheets

Offered By: LinkedIn Learning

Tags

HTML & CSS Courses Web Development Courses Code Optimization Courses Gulp Courses Prettier Courses

Course Description

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
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

Taught by

Morten Rand-Hendriksen

Related Courses

Software as a Service
University of California, Berkeley via Coursera
Intro to Computer Science
University of Virginia via Udacity
Web Development
Udacity
Software Engineering for SaaS
University of California, Berkeley via Coursera
CS50's Introduction to Computer Science
Harvard University via edX