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