CSS Refactoring

Table of contents

1. Preface
   1. Intended Audience
   2. Objectives of This Book
   3. What’s Not In This Book
   4. Nomenclature
   5. What You’ll Find on the Companion Website
   6. Conventions Used in This Book
   7. O’Reilly Safari
   8. How to Contact Us
   9. Acknowledgments
2. 1. Refactoring and Architecture
   1. What Is Refactoring?
   2. What Is Software Architecture?
      1. Good Architectures Are Predictable
      2. Good Architectures Promote Code Reuse
      3. Good Architectures Are Extensible
      4. Good Architectures Are Maintainable
      5. Software Architecture and Refactoring
   3. Shortcomings that Lead to Refactoring
      1. Changing Requirements
      2. Poorly Designed Architecture
      3. Underestimating Difficulty
      4. Ignoring Best Practices
   4. When Should Code Be Refactored?
   5. When Should Code NOT Be Refactored?
   6. Am I Allowed to Refactor My Code?
   7. Refactoring Examples
      1. Refactoring Example 1: Calculating the Total Price of an Ecommerce Order
      2. Refactoring Example 2: A Simple Example of Refactoring CSS
   8. Chapter Summary
3. 2. Understanding the Cascade
   1. What Is the Cascade?
   2. Selector Specificity
   3. Ruleset Order
   4. Inline CSS and Specificity
   5. Overriding the Cascade with the !important Declaration
   6. Chapter Summary
4. 3. Writing Better CSS
   1. Use Comments
   2. Consistently Structure Rulesets
      1. Organize Properties with Vendor Prefixes
   3. Keep Selectors Simple
      1. Performant Selectors
   4. Decouple CSS and JavaScript
      1. Prefix Classes and IDs that Are Used in JavaScript
      2. Modify Element Styles with Classes
   5. Use Classes
   6. Assign Classes Meaningful Names
      1. Avoid Over-Modularized Classes
   7. Build a Better Box
      1. box-sizing: content-box
      2. box-sizing: border-box
      3. content-box or border-box?
   8. Chapter Summary
5. 4. Classifying Different Types of Styles
   1. The Importance of Classifying Styles
   2. Normalizing Styles
   3. Base Styles
      1. Defining Base Styles
      2. Document Metadata
      3. Sectioning Elements
      4. Heading and Text Elements
      5. Anchor Tags
      6. Text Semantics
      7. Lists
      8. Grouping Elements
      9. Tables
      10. Forms
      11. Images
   4. Component Styles
      1. Define the Behavior that Needs to Be Built
      2. Keep Component Styles Granular
      3. Let the Component’s Container Override Visual Styles as Needed
      4. Delegate the Assignment of Dimensions to Structural Containers
   5. Structural Styles
   6. Utility Styles
   7. Browser-Specific Styles
   8. Chapter Summary
6. 5. Testing
   1. Why Is Testing Difficult?
   2. Which Browsers Are Important to Test?
   3. Browser Market Share
      1. Accessing Browser Statistics and Screen Resolutions in Google Analytics
   4. Testing with Multiple Browsers
      1. Safari for iOS
      2. Android
   5. Testing with Old Versions of Browsers
      1. Internet Explorer and Microsoft Edge
      2. Firefox
      3. Safari and Safari for iOS
      4. Chrome
   6. Testing the Bleeding Edge
   7. Third-Party Testing Services
   8. Testing with Developer Tools
      1. Emulating Device Sizes
      2. The Document Object Model (DOM) and CSS Styles
   9. Visual Regression Testing
      1. Tips for Visual Regression Testing
      2. Visual Regression Testing with Gemini
   10. Maintaining Your Code
       1. Coding Standards
       2. Pattern Libraries
   11. Chapter Summary
7. 6. Code Placement and Refactoring Strategies
   1. Organize CSS from Least Specific to Most Specific Styles
      1. Normalizing Styles
      2. Base Styles
      3. Styles for Components and Their Containers
      4. Structural Styles
      5. Utility Styles
      6. Browser-Specific Styles
   2. Multiple Files or One Big File?
      1. Serving CSS
      2. Developing with a Single File
      3. Developing with Multiple Files
   3. Auditing Your CSS Before Refactoring
   4. Refactoring Strategies
      1. Consistently Structure Rulesets
      2. Delete Dead Code
      3. Decouple CSS and JavaScript
      4. Separate Base Styles
      5. Remove Redundant IDs
      6. Convert IDs to Classes
      7. Separate Utility Styles
      8. Define Reusable Components
      9. Remove Inline CSS and Over-Modularized Classes
      10. Segregate Browser-Specific CSS Hacks
   5. Measuring Success
      1. Is Your Website Broken?
      2. Number of UI Bugs
      3. Reduced Development and Testing Time
   6. Chapter Summary
8. A. normalize.css
9. Index