Learn how to automatically fix and reformat CSS using stylelint and Prettier in Visual Studio Code.
- [Narrator] In this chapter,…I'll walk you through a practical example…of how CSS refactoring can be done.…I'll use race projects for this,…and I've downloaded a fresh copy of the CSS file here…to start from scratch.…For this example, I'll follow the rough outline…of the practical approach to refactoring…explained earlier in this course.…To start, let's weed out all the obvious bugs…and impose some order on the CSS.…The Stylelint and Prettier setup from the previous chapter…is up and running in VS code,…meaning as soon as I open the style.css file,…Stylelint will flag any obvious errors…and formatting issues forming.…
And as you can see, there's a lot of them down here…on the right hand side and when I scroll down,…you see a lot of the content here is being flagged.…But as you now know, all of these error flags do not mean…I need to go in and fix every single line of code.…When I save this file,…Prettier and Stylelint will work in tandem…to clear out all the errors they can,…leaving me with only the ones that need human intervention.…
- 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
Skill Level Intermediate
CSS to Sass: Converting an Existing Sitewith John Riviello2h 31m Intermediate
Responsive CSS Workflow with Sass, Bourbon, and Susywith Carrie Dils2h 59m Intermediate
1. Refactoring CSS: The Theory
2. CSS Refactoring Tools
3. CSS Refactoring: A Practical Example
4. Automating Refactoring Using Task Runners
Other tools for refactoring1m 17s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.