CSS: Visual Optimization

1h 11m – Beginner

Take a tour of a workflow that optimizes CSS code for easier navigation, organization, and readability. In this course, author Justin Seeley covers best practices for writing CSS in an easy-to-read format, commenting code, developing a table of contents, and adopting other methods that help produce “cleaner” code. The course also contains tips for speeding up development with some online tools and simplification techniques.

Topics include:
Exploring good versus bad style sheets
Creating section headings
Indenting code for enhanced readability
Creating single- and multi-line comments
Avoiding unnecessary tags and classes
Creating master color and typography guides
Simplifying comments

Introduction – 1m 40s
Welcome – 1m 7s
Using the exercise files – 33s

1. Getting Started – 11m 25s
The importance of clean code – 3m 36s
Exploring clean vs. messy style sheets – 3m 47s
The importance of the reset – 4m 2s

2. Organizing Your Code – 11m 44s
Developing a CSS table of contents – 3m 0s
Creating section headings – 3m 7s
Indenting your code for readability – 2m 54s
Best practices for class names – 2m 43s

3. Commenting Your Code – 7m 15s
What is a comment? – 2m 31s
Writing single-line comments – 1m 44s
Creating multiline comments – 3m 0s

4. Writing Clean Code – 15m 20s
Using font families – 2m 42s
Avoiding unnecessary tags and classes – 4m 26s
Using CSS shorthand – 3m 47s
Avoiding redundancy with selector groups – 4m 25s

5. Useful Techniques – 13m 13s
Creating a master color guide – 3m 9s
Creating a master typography guide – 3m 24s
Creating a structure template – 4m 3s
Using a master CSS file – 2m 37s

6. Speeding Up Your Code – 9m 17s
Removing unnecessary line breaks – 1m 57s
Simplifying comments – 1m 46s
Removing unused selectors – 1m 52s
Using tools to minify your CSS – 3m 42s

Conclusion – 1m 22s
Goodbye – 1m 22s

Facebook Comments