Enduring CSS Architect and maintain large-scale CSS codebases Ben Frain © 2015 Ben Frain Contents About the author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Thanks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Chapter 1. Enduring CSS . . . . . . . . . . . . . . . . . . . . . . . . 4 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Definingtheproblem . . . . . . . . . . . . . . . . . . . . . . . . . 5 Solveyourownproblems . . . . . . . . . . . . . . . . . . . . . . . 6 Chapter 2. The problems of CSS at scale . . . . . . . . . . . . . . . 8 Specificity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Markupstructuretiedtoselectors . . . . . . . . . . . . . . . . . . 12 Thecascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Chapter 3. Implementing perceived wisdom . . . . . . . . . . . . . 14 OnOOCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 SMACSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 BEM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Chapter 4. Introducing ECSS . . . . . . . . . . . . . . . . . . . . . . 28 Definingterminology . . . . . . . . . . . . . . . . . . . . . . . . . 29 TheproblemsECSSsolves . . . . . . . . . . . . . . . . . . . . . . 29 EmbracingRepetition . . . . . . . . . . . . . . . . . . . . . . . . . 33 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 CONTENTS Chapter 5. File organisation and naming conventions . . . . . . . 39 Projectorganisation . . . . . . . . . . . . . . . . . . . . . . . . . . 39 NamingclassesandselectorswithECSS . . . . . . . . . . . . . . . 43 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Chapter 6. Dealing with state . . . . . . . . . . . . . . . . . . . . . . 50 HowECSSusedtohandlestatechange . . . . . . . . . . . . . . . 50 SwitchingtoWAI-ARIA . . . . . . . . . . . . . . . . . . . . . . . . 51 ARIAattributesasCSSselectors . . . . . . . . . . . . . . . . . . . 52 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Chapter 7. Applying ECSS to web applications . . . . . . . . . . . . 57 Anexample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Childnodesofamoduleorcomponent . . . . . . . . . . . . . . . 59 Anoteontypeselectors . . . . . . . . . . . . . . . . . . . . . . . . 60 ApplyingECSSmethodologywithvisualcomponents . . . . . . . 62 OrganisingModules,theirComponentsandnamingfiles . . . . . 63 AnoteonworkingwithgeneratedcontentfromaCMS . . . . . . 67 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Chapter 8. The Ten Commandments of Sane Style Sheets . . . . . 70 Whythetencommandments? . . . . . . . . . . . . . . . . . . . . 70 1.Thoushalthaveasinglesourceoftruthforallkeyselectors . . 72 2. Thou shalt not nest (unless thou art nesting media queries, overridesorthoureallyhastto) . . . . . . . . . . . . . . . . . 78 3.ThoushaltnotuseIDselectors(evenifthouthinkestthouhast to) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 4.Thoushaltnotwritevendorprefixesintheauthoringstylesheets 83 5.Thoushaltusevariablesforsizing,coloursandz-index . . . . . 85 6.Thoushaltalwayswriterulesmobilefirst(avoidmax-width) . . 87 7.Usemixinssparingly(andavoid@extend) . . . . . . . . . . . . 89 8.Thoushaltcommentallmagicnumbersandbrowserhacks . . . 91 9.Thoushaltnotplaceinlineimagesintheauthoringstylesheets 92 10. Thou shalt not write complicated CSS when simple CSS will workjustaswell . . . . . . . . . . . . . . . . . . . . . . . . . 94 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 CONTENTS Chapter 9. Tooling for an ECSS approach . . . . . . . . . . . . . . . 96 CSSrequisitesforCSSprocessors . . . . . . . . . . . . . . . . . . 96 BuildingCSSfromauthoringstylesheets . . . . . . . . . . . . . . 97 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 The closing curly brace . . . . . . . . . . . . . . . . . . . . . . . . . 104 Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Appendix 1: CSS selector performance . . . . . . . . . . . . . . . . 106 Testingselectorspeed . . . . . . . . . . . . . . . . . . . . . . . . . 106 GoodCSSarchitecturepractices . . . . . . . . . . . . . . . . . . . 110 Whatdifferencedoesstylebloatmake? . . . . . . . . . . . . . . . 112 Performanceinsidethebrackets . . . . . . . . . . . . . . . . . . . 114 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Appendix 2: Browser representatives on CSS performance . . . . 117 TL;DR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 BrowserrepresentativesonCSSperformance . . . . . . . . . . . . 117 ShouldweworryaboutCSSselectors? . . . . . . . . . . . . . . . . 118 WhataboutJavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 119 DealingwithCSSperformance . . . . . . . . . . . . . . . . . . . . 120 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 About the author Ben Frain has been a web designer/developer since 1996. He is currently employedasaSeniorFront-endDeveloperatbet365. Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degreeinMediaandPerformance. He has written four equally underrated (his opinion) screenplays and still harbours the (fading) belief he might sell one. Outside of work, he enjoys simplepleasures;playingindoorfootballwhilehisbodyandwifestillallow it,andwrestlingwithhistwosons. Hisotherbooks,ResponsiveWebDesignwithHTML5andCSS3andSassand CompassforDesignersareavailablenow.VisitBenonlineatwww.benfrain.com andfollowhimonTwitterattwitter.com/benfrain. 1 Thanks I’dliketoextendmythankstoafewpeoplewhodirectlyorindirectlyhelped ingettingthisbookwritten. Firstly, Matthew Mitchell, who provided the cover artwork, typographic guidance and website design, and endures (pun intended) my constant blatheringaboutCSSonadailybasis. I’dalsoliketothankmyworkcolleaguesatbet365,principallyPeteGriffiths whoencouragedthedevelopmentteamstomakeuseoftheECSSapproach onagrandscale. Finally,I’dliketothankmylong-sufferingwifeforallowingmeto‘tapaway’ inthekitchenforcountlesshoursinordertogetthisstuffoutofmyhead. 2 Preface This is a little book that encapsulates my current thinking for how best to write and maintain CSS codebases for rapidly changing, long-lived web projects. • Thereisnoframeworktodownload. • There are no requisite tools (although there are opinionated guide- linesforwhattoolingshouldprovide). • Nothingiswrittenforyou. Put metaphorically, ‘Enduring CSS’ is not giving you fish; it’s teaching you howtofish. It’samethodologyforwritingCSSthatonceimplemented,willprovideyour projectwithapredictable,andeasytomaintainCSScodebase. The earliest iterations of Enduring CSS were first documented in the blog post, Enduring CSS: writing style sheets for rapidly changing, long-lived projects. However, the ECSS approach has developed a little since then and so this bookshouldbeconsideredthecanonicalresourceontheapproach. Ihopeyouenjoyreadingit. Ben Frain26thOctober,2015 3 Chapter 1. Enduring CSS Writingstylesforrapidlychanging,long-livedwebprojects Introduction Thisisn’t actuallya bookabout writingCSS, as inthe stuffinside thecurly braces. It’s a book about the organising and architecture of CSS; the parts outside the braces. It’s the considerations that can be happily ignored on smaller projects but actually become the most difficult part of writing CSS inlargerprojects. Terms like ‘CSS at scale’, or ‘Large-scale CSS’ can seem quite nebulous. I’ll tryandclarify. When people talk about ‘large scale CSS’ or ‘writing CSS at scale’ there can be a few possible metrics that relate to the ‘large’ or ‘big’ part of the description. • It might be CSS that simply has a large file size. There’s a lot of CSS output and so making changes to that codebase can be difficult, as thereissomuchofthecodetoconsider. • The CSS could be said to be ‘large’ due to the complexity of the user interfacethatisbeingbuiltwithit.Theoverallfilesizemaybesmaller than the first situation but there may be a great many pieces of user interface that’s codified in those styles. Considering how to effect changesacrossallofthosevisualsmaybeproblematic. • It might be ‘large CSS’ simply due to the number of developers that have,are,andwillbelikelytotouchandchangetheCSScodebase. Or,itcanbealltheabove. 4 Chapter1. EnduringCSS 5 Defining the problem EnduringCSSwasbornfrommyownneedtodefinearationalapproachto writingCSSonalargescalewebapplication. Here’sagraboftheapplicationviewedonaniPad: http://mobile.bet365.comin2015 It’s a responsive application that allows users to place bets on sporting eventsworldwide.Thepitchareaattheupperrightgivesaliverepresenta- tion of the selected match with animated SVGs. The odds and game scores on the lower left are updated live as the sporting events plays out and a timeline summary of the game history is constantly updated in the lower right. Due to the complexity of the application, over time and a number of iterations,theCSShadbecomeunruly.Itwasdifficulttoiterateupon,hard