CSS Refactoring: Architect Your Stylesheets for Success

159 Pages·2016·10.62 MB·English

by  Steve Lindstrom

C SS
Refactoring
ARCHITECT YOUR STYLESHEETS FOR SUCCESS
Steve Lindstrom

CSS Refactoring
Architect Your Stylesheets for Success
Steve Lindstrom
BBeeiijjiinngg BBoossttoonn FFaarrnnhhaamm SSeebbaassttooppooll TTookkyyoo
CSS Refactoring
by Steve Lindstrom
Copyright © 2017 Steve Lindstrom. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
also available for most titles (http://oreilly.com/safari). For more information, contact our corporate/insti‐
tutional sales department: 800-998-9938 or [email protected].
Editor: Meg Foley Indexer: Ellen Troutman-Zaig
Production Editor: Kristen Brown Interior Designer: David Futato
Copyeditor: Rachel Head Cover Designer: Karen Montgomery
Proofreader: Molly Ives Brower Illustrator: Rebecca Demarest
November 2016: First Edition
Revision History for the First Edition
2016-11-08: First Release
See http://oreilly.com/catalog/errata.csp?isbn=9781491906422 for release details.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. CSS Refactoring, the cover image, and
related trade dress are trademarks of O’Reilly Media, Inc.
While the publisher and the author have used good faith efforts to ensure that the information and
instructions contained in this work are accurate, the publisher and the author disclaim all responsibility
for errors or omissions, including without limitation responsibility for damages resulting from the use of
or reliance on this work. Use of the information and instructions contained in this work is at your own
risk. If any code samples or other technology this work contains or describes is subject to open source
licenses or the intellectual property rights of others, it is your responsibility to ensure that your use
thereof complies with such licenses and/or rights.
978-1-491-90642-2
[LSI]
To my family, who have supported me through thick and thin; I wouldn’t be where I am
today without you.

Table of Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
1. Refactoring and Architecture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
What Is Refactoring? 1
What Is Software Architecture? 1
Good Architectures Are Predictable 2
Good Architectures Promote Code Reuse 2
Good Architectures Are Extensible 2
Good Architectures Are Maintainable 2
Software Architecture and Refactoring 2
Shortcomings that Lead to Refactoring 3
Changing Requirements 3
Poorly Designed Architecture 3
Underestimating Difficulty 3
Ignoring Best Practices 3
When Should Code Be Refactored? 4
When Should Code NOT Be Refactored? 4
Am I Allowed to Refactor My Code? 5
Refactoring Examples 5
Refactoring Example 1: Calculating the Total Price of an Ecommerce Order 6
Refactoring Example 2: A Simple Example of Refactoring CSS 17
Chapter Summary 20
2. Understanding the Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
What Is the Cascade? 21
Selector Specificity 21
Ruleset Order 23
Inline CSS and Specificity 23
v
Overriding the Cascade with the !important Declaration 24
Chapter Summary 25
3. Writing Better CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Use Comments 27
Consistently Structure Rulesets 28
Organize Properties with Vendor Prefixes 29
Keep Selectors Simple 30
Performant Selectors 32
Decouple CSS and JavaScript 34
Prefix Classes and IDs that Are Used in JavaScript 35
Modify Element Styles with Classes 35
Use Classes 35
Assign Classes Meaningful Names 36
Avoid Over-Modularized Classes 37
Build a Better Box 38
box-sizing: content-box 39
box-sizing: border-box 39
content-box or border-box? 40
Chapter Summary 40
4. Classifying Different Types of Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
The Importance of Classifying Styles 41
Normalizing Styles 41
Base Styles 42
Defining Base Styles 43
Document Metadata 44
Sectioning Elements 44
Heading and Text Elements 45
Anchor Tags 47
Text Semantics 48
Lists 49
Grouping Elements 50
Tables 50
Forms 52
Images 53
Component Styles 54
Define the Behavior that Needs to Be Built 55
Keep Component Styles Granular 56
Let the Component’s Container Override Visual Styles as Needed 59
Delegate the Assignment of Dimensions to Structural Containers 64
Structural Styles 68
vi | Table of Contents
Utility Styles 71
Browser-Specific Styles 72
Chapter Summary 73
5. Testing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Why Is Testing Difficult? 75
Which Browsers Are Important to Test? 75
Browser Market Share 76
Accessing Browser Statistics and Screen Resolutions in Google Analytics 76
Testing with Multiple Browsers 79
Safari for iOS 79
Android 81
Testing with Old Versions of Browsers 84
Internet Explorer and Microsoft Edge 84
Firefox 84
Safari and Safari for iOS 84
Chrome 85
Testing the Bleeding Edge 85
Third-Party Testing Services 86
Testing with Developer Tools 86
Emulating Device Sizes 87
The Document Object Model (DOM) and CSS Styles 91
Visual Regression Testing 93
Tips for Visual Regression Testing 93
Visual Regression Testing with Gemini 94
Maintaining Your Code 99
Coding Standards 99
Pattern Libraries 104
Chapter Summary 106
6. Code Placement and Refactoring Strategies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Organize CSS from Least Specific to Most Specific Styles 107
Normalizing Styles 108
Base Styles 108
Styles for Components and Their Containers 108
Structural Styles 108
Utility Styles 108
Browser-Specific Styles 108
Multiple Files or One Big File? 109
Serving CSS 109
Developing with a Single File 111
Developing with Multiple Files 112
Table of Contents | vii
Auditing Your CSS Before Refactoring 113
Refactoring Strategies 115
Consistently Structure Rulesets 115
Delete Dead Code 115
Decouple CSS and JavaScript 116
Separate Base Styles 117
Remove Redundant IDs 120
Convert IDs to Classes 120
Separate Utility Styles 121
Define Reusable Components 121
Remove Inline CSS and Over-Modularized Classes 121
Segregate Browser-Specific CSS Hacks 122
Measuring Success 122
Is Your Website Broken? 123
Number of UI Bugs 123
Reduced Development and Testing Time 124
Chapter Summary 124
A. normalize.css. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
viii | Table of Contents