book

CSS Refactoring

by Steve Lindstrom

November 2016

Intermediate to advanced

160 pages

3h 6m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Intended AudienceObjectives of This BookWhat’s Not In This BookNomenclatureWhat You’ll Find on the Companion WebsiteConventions Used in This BookO’Reilly SafariHow to Contact UsAcknowledgments
What Is Refactoring?What Is Software Architecture?Good Architectures Are PredictableGood Architectures Promote Code ReuseGood Architectures Are ExtensibleGood Architectures Are MaintainableSoftware Architecture and RefactoringShortcomings that Lead to RefactoringChanging RequirementsPoorly Designed ArchitectureUnderestimating DifficultyIgnoring Best PracticesWhen Should Code Be Refactored?When Should Code NOT Be Refactored?Am I Allowed to Refactor My Code?Refactoring ExamplesRefactoring Example 1: Calculating the Total Price of an Ecommerce OrderRefactoring Example 2: A Simple Example of Refactoring CSSChapter Summary
What Is the Cascade?Selector SpecificityRuleset OrderInline CSS and SpecificityOverriding the Cascade with the !important DeclarationChapter Summary
Use CommentsConsistently Structure RulesetsOrganize Properties with Vendor PrefixesKeep Selectors SimplePerformant SelectorsDecouple CSS and JavaScriptPrefix Classes and IDs that Are Used in JavaScriptModify Element Styles with ClassesUse ClassesAssign Classes Meaningful NamesAvoid Over-Modularized ClassesBuild a Better Boxbox-sizing: content-boxbox-sizing: border-boxcontent-box or border-box?Chapter Summary
The Importance of Classifying StylesNormalizing StylesBase StylesDefining Base StylesDocument MetadataSectioning ElementsHeading and Text ElementsAnchor TagsText SemanticsListsGrouping ElementsTablesFormsImagesComponent StylesDefine the Behavior that Needs to Be BuiltKeep Component Styles GranularLet the Component’s Container Override Visual Styles as NeededDelegate the Assignment of Dimensions to Structural ContainersStructural StylesUtility StylesBrowser-Specific StylesChapter Summary
Why Is Testing Difficult?Which Browsers Are Important to Test?Browser Market ShareAccessing Browser Statistics and Screen Resolutions in Google AnalyticsTesting with Multiple BrowsersSafari for iOSAndroidTesting with Old Versions of BrowsersInternet Explorer and Microsoft EdgeFirefoxSafari and Safari for iOSChromeTesting the Bleeding EdgeThird-Party Testing ServicesTesting with Developer ToolsEmulating Device SizesThe Document Object Model (DOM) and CSS StylesVisual Regression TestingTips for Visual Regression TestingVisual Regression Testing with GeminiMaintaining Your CodeCoding StandardsPattern LibrariesChapter Summary
Organize CSS from Least Specific to Most Specific StylesNormalizing StylesBase StylesStyles for Components and Their ContainersStructural StylesUtility StylesBrowser-Specific StylesMultiple Files or One Big File?Serving CSSDeveloping with a Single FileDeveloping with Multiple FilesAuditing Your CSS Before RefactoringRefactoring StrategiesConsistently Structure RulesetsDelete Dead CodeDecouple CSS and JavaScriptSeparate Base StylesRemove Redundant IDsConvert IDs to ClassesSeparate Utility StylesDefine Reusable ComponentsRemove Inline CSS and Over-Modularized ClassesSegregate Browser-Specific CSS HacksMeasuring SuccessIs Your Website Broken?Number of UI BugsReduced Development and Testing TimeChapter Summary

Overview

Revisiting your code to remove redundancies and inconsistencies—known as refactoring—is a common practice when using programming languages. With this book, author Steve Lindstrom not only shows you how to structure your CSS to build a responsive, easy-to-use website, but also how to use refactoring tools to create faster, more readable CSS.