Index

Symbols

!important declaration, Overriding the Cascade with the !important Declaration, Utility Styles, Utility Styles
> (child combinators), Keep Selectors Simple

A

:active pseudoclass, Anchor Tags
analytics tools, browser statistics and screen resolutions, Accessing Browser Statistics and Screen Resolutions in Google Analytics
anchor tags
- setting properties in base styles, Anchor Tags
- too specific, Keep Selectors Simple
Android devices, testing, Android
Android Studio, Android
architecture, software (see software architecture)
auditing CSS (before refactoring), Auditing Your CSS Before Refactoring-Auditing Your CSS Before Refactoring

B

base styles, Base Styles-Component Styles, Base Styles
- anchor tags, Anchor Tags
- defining, Defining Base Styles
- document metadata, Document Metadata
- forms, Forms
- grouping elements, Grouping Elements
- images, Images
- lists, Lists
- sectioning elements, Sectioning Elements
- separating, Separate Base Styles
- tables, Tables
- text semantics, Text Semantics
best practices
- difficulty in keeping up with, Ignoring Best Practices
- ignoring, Ignoring Best Practices
block-level comments, Use Comments
box model, building a better box, Build a Better Box-Chapter Summary
box-sizing property, Build a Better Box
- assigning value border-box to, box-sizing: border-box
- assigning value content-box to, box-sizing: content-box
Browserling, Third-Party Testing Services
browsers, What’s Not In This Book
- accessing browser statistics and screen resolutions in Google Analytics, Accessing Browser Statistics and Screen Resolutions in Google Analytics
- browser-specific CSS hacks, Segregate Browser-Specific CSS Hacks
- browser-specific styles, Browser-Specific Styles, Browser-Specific Styles
- deciding which browsers to test, Which Browsers Are Important to Test?
- headless, Visual Regression Testing with Gemini
- ignoring styling of form elements, Forms
- market share, Browser Market Share
- matching selectors from right to left, Matching selectors from right to left
- normalizing styles across, Normalizing Styles
- testing with multiple browsers, Testing with Multiple Browsers-Testing with Old Versions of Browsers
  - Android, Android
  - Safari for iOS, Safari for iOS
- testing with old versions, Testing with Old Versions of Browsers
- testing with third-party testing services, Third-Party Testing Services
- user agent spoofing, Emulating Device Sizes
- vendor pefixes for properties, Organize Properties with Vendor Prefixes
BrowserStack, Third-Party Testing Services

C

cascade, Understanding the Cascade-Chapter Summary
- defined, What Is the Cascade?
- inline CSS and specificity, Inline CSS and Specificity
- overriding with !important declaration, Overriding the Cascade with the !important Declaration
- ruleset order, Ruleset Order
- selector specificity, Selector Specificity
child combinators (>), Keep Selectors Simple
Chrome
- CSS Dig, Auditing Your CSS Before Refactoring
- DevTools, Testing with Developer Tools
  - device emulation in, Emulating Device Sizes
  - DOM and CSS styles, The Document Object Model (DOM) and CSS Styles
- download site, Testing with Multiple Browsers
- no old versions available, Chrome
- testing with upcoming version, Testing the Bleeding Edge
classes
- adding a class to an HTML element, Keep Selectors Simple
- assigning meaningful names to, Assign Classes Meaningful Names
  - avoiding over-modularization, Avoid Over-Modularized Classes
- converting IDs to, Convert IDs to Classes
- modifying element styles with, Modify Element Styles with Classes
- prefixing classes used in JavaScript, Prefix Classes and IDs that Are Used in JavaScript
- pseudoclasses associated with anchor elements, Anchor Tags
- removing over-modularized classes, Remove Inline CSS and Over-Modularized Classes
classifying styles, Classifying Different Types of Styles-Chapter Summary
- base styles, Base Styles-Component Styles
  - anchor elements, Anchor Tags
  - defining, Defining Base Styles
  - document metadata, Document Metadata
  - forms, Forms
  - grouping elements, Grouping Elements
  - images, Images
  - lists, Lists
  - tables, Tables
  - text semantics, Text Semantics
- browser-specific styles, Browser-Specific Styles
- component styles, Component Styles-Structural Styles
  - component's container overriding styles, Let the Component’s Container Override Visual Styles as Needed
  - defining behavior, Define the Behavior that Needs to Be Built
  - delegating component dimensions to structural containers, Delegate the Assignment of Dimensions to Structural Containers
  - keeping them granular, Keep Component Styles Granular
- importance of, The Importance of Classifying Styles
- normalizing styles, Normalizing Styles
- structural styles, Structural Styles
- utility styles, Utility Styles
code placement, Code Placement and Refactoring Strategies-Auditing Your CSS Before Refactoring
- auditing CSS before refactoring, Auditing Your CSS Before Refactoring-Auditing Your CSS Before Refactoring
- multiple files or one big file, Multiple Files or One Big File?-Developing with Multiple Files
  - developing with a single file, Developing with a Single File
  - developing with multiple files, Developing with Multiple Files
  - serving CSS, Serving CSS
- organizing CSS from least specific to most specific styles, Organize CSS from Least Specific to Most Specific Styles
code reuse, Good Architectures Promote Code Reuse
code, maintaining, Maintaining Your Code-Chapter Summary
- coding standards, Coding Standards
- pattern libraries, Pattern Libraries-Chapter Summary
comments, Use Comments
component styles, Component Styles-Structural Styles, Styles for Components and Their Containers
- allowing component's container to override visual styles, Let the Component’s Container Override Visual Styles as Needed
- defining behavior, Define the Behavior that Needs to Be Built
- delegating component dimensions to a structural container, Delegate the Assignment of Dimensions to Structural Containers
- keeping them granular, Keep Component Styles Granular
components, reusable (see reusable components)
concatenation, Serving CSS
containers
- allowing component container to override visual styles, Let the Component’s Container Override Visual Styles as Needed
- delegating component dimensions to a structural container, Delegate the Assignment of Dimensions to Structural Containers
- styles for, Styles for Components and Their Containers
content-box, assigning box-sizing property to, box-sizing: content-box
CSS
- coding standards, Coding Standards
- decoupling from JavaScript, Decouple CSS and JavaScript
CSS Dig (Chrome extension), Auditing Your CSS Before Refactoring
CSS frameworks, What’s Not In This Book
CSS, writing, Writing Better CSS-Chapter Summary
- assigning meaningful names to classes, Assign Classes Meaningful Names
- building a better box, Build a Better Box
  - box-sizing border-box, box-sizing: border-box
  - box-sizing content-box, box-sizing: content-box
  - deciding between content-box or border-box, content-box or border-box?
- consistently structuring rulesets, Consistently Structure Rulesets
- decoupling CSS and JavaScript, Decouple CSS and JavaScript
  - modifying element styles with classes, Modify Element Styles with Classes
  - prefixing classes and IDs used in JavaScript, Prefix Classes and IDs that Are Used in JavaScript
- keeping selectors simple, Keep Selectors Simple
- using classes, Use Classes
- using comments, Use Comments

D

dead code, deleting, Delete Dead Code
declaration blocks, Nomenclature
declarations
- duplicate declaration blocks, Delete Dead Code
- duplicate, in the same block, Delete Dead Code
- in rulesets, Consistently Structure Rulesets
- unused declaration blocks, Delete Dead Code
definition lists, styling in base styles, Lists
developer tools, testing with, Testing with Developer Tools
- DOM (Document Object Model) and CSS styles, The Document Object Model (DOM) and CSS Styles
- emulating device sizes, Emulating Device Sizes
- user agent spoofing and, Emulating Device Sizes
development time
- reduced, with refactoring, Reduced Development and Testing Time
- reduction through code reuse, Good Architectures Promote Code Reuse
- underestimation of, Underestimating Difficulty
device sizes, emulating, Emulating Device Sizes
display property, inline-block hack for IE 7, Browser-Specific Styles
document metadata, Document Metadata
DOM (Document Object Model) and CSS styles, The Document Object Model (DOM) and CSS Styles
duplicate declaration blocks, Delete Dead Code
duplicate declarations in a block, Delete Dead Code

E

Edge (see Microsoft Edge/Internet Explorer)
emulators (Android devices), Android
error class, Keep Selectors Simple
extensibility, Good Architectures Are Extensible

F

files (CSS), fewer and smaller sizes, Fewer files and smaller file sizes
Firefox
- developer tools, Testing with Developer Tools
- DOM and CSS styles, The Document Object Model (DOM) and CSS Styles
- download site, Testing with Multiple Browsers
- moz vendor prefix, Organize Properties with Vendor Prefixes
- obtaining old versions for testing, Firefox
- Responsive Design mode, emulating device sizes, Emulating Device Sizes
- testing with upcoming version, Testing the Bleeding Edge
:focus pseudoclass, Anchor Tags
forms, base style for elements, Forms

G

Gemini, Visual Regression Testing with Gemini-Testing regressions
- configuring, Configuration
- gathering baseline images for, Gathering baseline images
- installing, Visual Regression Testing with Gemini
- testing regressions, Testing regressions
- writing test files, Tests
getOrderTotal function, Refactoring Example 1: Calculating the Total Price of an Ecommerce Order
- refactoring, Refactoring getOrderTotal
Google Analytics, accessing browser statistics and screen resolutions, Accessing Browser Statistics and Screen Resolutions in Google Analytics
grouping elements, base style for, Grouping Elements

H

heading elements, base style for, Heading and Text Elements
headless browsers, Visual Regression Testing with Gemini
headline CSS, refactoring (example), Refactoring Example 2: A Simple Example of Refactoring CSS
hidden elements, Utility Styles
:hover pseudoclass, Anchor Tags
hr element, normalizing style across browsers, Normalizing Styles
HTML, What’s Not In This Book
- decoupling from CSS, Low coupling
- inline styles, Refactoring the website headline
Huddle, PhantomCSS, Testing regressions

I

IDs
- converting to classes, Convert IDs to Classes
- not using to style elements, Use Classes
- removing redundant IDs, Remove Redundant IDs
- used in JavaScript, prefixing with js-, Prefix Classes and IDs that Are Used in JavaScript
images
- baseline, gather for visual regression testing, Gathering baseline images
- styling in base styles, Images
!important declaration, Overriding the Cascade with the !important Declaration, Utility Styles, Utility Styles
inheritance, property values in CSS, Defining Base Styles
inline CSS, removing, Remove Inline CSS and Over-Modularized Classes
inline styles, Refactoring the website headline
inline-block hack for IE 7, Browser-Specific Styles
Internet Explorer (IE), Organize Properties with Vendor Prefixes
- (see also Microsoft Edge/Internet Explorer)
- inline-block hack for IE 7, Browser-Specific Styles
iOS Simulator, Safari for iOS
- testing old versions of Safari for iOS, Safari and Safari for iOS

J

JavaScript
- classes applied by, Utility Styles
- decoupling from CSS, Decouple CSS and JavaScript, Decouple CSS and JavaScript
js- prefix for classes and IDs, Prefix Classes and IDs that Are Used in JavaScript

K

key selector, The key selector

L

:link pseudoclass, Anchor Tags
links, base style for, Anchor Tags
lists, base style for, Lists
Litmus (testing service), Third-Party Testing Services

M

MailChimp, pattern library, Building a pattern library
maintainability, Good Architectures Are Maintainable
margin property, inheritance and, Defining Base Styles
media queries, keeping close to relevant declaration block, Browser-Specific Styles
metadata, document, Document Metadata
Microsoft Edge/Internet Explorer
- developer tools, Testing with Developer Tools
  - emulating device sizes, Emulating Device Sizes
- DOM and CSS styles, The Document Object Model (DOM) and CSS Styles
- download site, Testing with Multiple Browsers
- downloading old versions for testing, Internet Explorer and Microsoft Edge
- early releases for Microsoft Edge, Testing the Bleeding Edge
- most-used versions, Browser Market Share
- ms vendor prefix, Organize Properties with Vendor Prefixes
minification, Serving CSS
mobile browsers, Testing with Multiple Browsers
moz vendor prefix, Organize Properties with Vendor Prefixes
Mozilla Firefox (see Firefox)
ms vendor prefix, Organize Properties with Vendor Prefixes

N

normalize.css, Normalizing Styles
normalizing styles, Normalizing Styles, Normalizing Styles

O

ordered and unordered lists, base style for, Lists
over-modularization
- avoiding over-modularized classes, Avoid Over-Modularized Classes
- removing over-modularized classes, Remove Inline CSS and Over-Modularized Classes
overqualified selectors, Keep Selectors Simple

P

padding property, inheritance and, Defining Base Styles
Parallels, Internet Explorer and Microsoft Edge
pattern libraries, Pattern Libraries
- benefits of, Benefits
- building, Building a pattern library
performant selectors, Performant Selectors
PhantomCSS, Testing regressions
PhantomJS, Visual Regression Testing with Gemini
predictability of good architectures, Good Architectures Are Predictable
properties, What’s Not In This Book
- defined, Nomenclature
- inherited values in CSS, Defining Base Styles
- organizing with vendor prefixes in rulesets, Organize Properties with Vendor Prefixes
- setting for base styles, Defining Base Styles
pseudoclasses, Anchor Tags

Q

qualified selectors, appropriate use of, Keep Selectors Simple

U

UI bugs, number of, Number of UI Bugs
unit tests, Unit tests
universal selector (*), Selector Specificity
- as key selector, The key selector
- using to set box-sizing on any element, content-box or border-box?
unused declaration blocks, Delete Dead Code
user agent spoofing, Emulating Device Sizes
user agent stylesheet, Normalizing Styles
utility styles, Utility Styles, Utility Styles
- separating, Separate Utility Styles

V

vendor prefixes for properties, Organize Properties with Vendor Prefixes
Virtual Box, VMWare, and Parallels, Internet Explorer and Microsoft Edge
virtual machines, Internet Explorer and Microsoft Edge
:visited pseudoclass, Anchor Tags
visual regression testing, Visual Regression Testing-Testing regressions
- alternatives to Gemini, Testing regressions
- tips for, Tips for Visual Regression Testing
- using Gemini, Visual Regression Testing with Gemini
  - configuration, Configuration
  - gathering baseline images, Gathering baseline images
  - installing Gemini, Visual Regression Testing with Gemini
  - testing regressions, Testing regressions
  - writing test files, Tests

W

webkit vendor prefix, Organize Properties with Vendor Prefixes
website for this book, What You’ll Find on the Companion Website
Windows Insider Pogram, Testing the Bleeding Edge
Wraith, Testing regressions

X

Xcode, downloading and installing, Safari for iOS

Y

Yelp, pattern library, Pattern Libraries

Table of Contents for CSS Refactoring

Index

Symbols

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Table of Contents for
CSS Refactoring