Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
CSS: Refactoring Style Sheets

CSS: Refactoring Style Sheets

1h 39mIntermediate2018-09-10

Authors

Morten Rand-Hendriksen

Morten Rand-Hendriksen

Senior Staff Instructor, Speaker, Web Designer, and Software Developer

Course details

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.

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

Skills covered

CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)

Concepts

0. Introduction

  • 01 - CSS refactoring and optimization

1. Refactoring CSS - The Theory

  • 02 - Why and when to refactor CSS
  • 03 - When not to refactor
  • 04 - General refactoring principles
  • 05 - Rational CSS structure
  • 06 - Practical approach to CSS refactoring

2. CSS Refactoring Tools

  • 07 - Set up an npm project
  • 08 - Install and configure stylelint
  • 09 - Make stylelint work in Visual Studio Code
  • 10 - Demo - How stylelint works
  • 11 - Install and configure Prettier
  • 12 - Make Prettier work in Visual Studio Code
  • 13 - Automatic rational property order

3. CSS Refactoring - A Practical Example

  • 14 - Fix errors via csslint
  • 15 - Remove old and or bad practices
  • 16 - Ignoring warnings
  • 17 - Update best practices
  • 18 - Audit unused CSS with Chrome
  • 19 - Quarantine unused code
  • 20 - Modularize CSS

4. Automating Refactoring Using Task Runners

  • 21 - Refactoring using a task runner - Gulp
  • 22 - Install and configure stylelint
  • 23 - Install and configure Purgecss
  • 24 - Optimize CSS for delivery

Next Steps

  • 25 - Other tools for refactoring

Related courses

Related learn paths

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
zarinpal
zibal