CSS: Visual Optimization

Take a tour of a workflow that optimizes CSS code for easier navigation, organization, and readability.

Introduction

• Welcome
• Using the exercise files

1. Getting Started

• The importance of clean code
• Exploring clean vs. messy style sheets
• The importance of the reset

2. Organizing Your Code

• Developing a CSS table of contents
• Creating section headings
• Indenting your code for readability
• Best practices for class names

3. Commenting Your Code

• What is a comment?
• Writing single-line comments
• Creating multiline comments

4. Writing Clean Code

• Using font families
• Avoiding unnecessary tags and classes
• Using CSS shorthand
• Avoiding redundancy with selector groups

5. Useful Techniques

• Creating a master color guide
• Creating a master typography guide
• Creating a structure template
• Using a master CSS file

6. Speeding Up Your Code

• Removing unnecessary line breaks
• Simplifying comments
• Removing unused selectors
• Using tools to minify your CSS

Conclusion

• Goodbye