Pro Yearly is on sale from $80 to $50! »

Architecting Code on Large RWD Projects

Architecting Code on Large RWD Projects

Slides from a talk given at the 2015 RWD Summit

When architecting CSS for a large scale project it's a common aim to abstract visual patterns for re-use, DRY out code and normalise our designs as much as possible. However, for rapidly changing projects, I'm no longer convinced those principles should necessarily be followed to the nth degree, nor that they offer the biggest wins.

This session covers what I consider the most advantageous practices and approaches when authoring CSS for a rapidly changing, large scale web project.

Faf2d64943cca673a5de3a565966e8bf?s=128

Ben Frain

March 12, 2015
Tweet

Transcript

  1. "SDIJUFDUJOHDPEF PO MBSHF38%QSPKFDUT #FO'SBJO "VUIPS 3FTQPOTJWF8FC%FTJHOXJUI)5.-BOE$44 4FDPOE&EJUJPO  4BTTBOE$PNQBTTGPS%FTJHOFST )5.-$44DPEF

  2. @benfrain #RWDSummit *WFXPSLFEPOUIF)5.-BOE$44PGUIFTBNF  MBSHFTDBMF 38%QSPKFDUGPSBDPVQMFPGZFBST *UTBOBQQMJDBUJPOEFOTFXJUI6*DPNQPOFOUT FHOPUUFYUDPOUFOUIFBWZ 

  3. @benfrain #RWDSummit -BSHFOVNCFSPGIBOETPOUIF QSPKFDUPSUIFDPNQMFYJUZPGUIF QSPEVDU FHBXFCBQQ 

  4. @benfrain #RWDSummit 5VSOTPVUCVJMEJOHB3FTQPOTJWF 8FC%FTJHOJTFBTZ $PNQBSFEUPJUFSBUJOHBOENBJOUBJOJOHPOF 8SJUJOH$44JTOPUEJGGJDVMU,FFQJOHTUZMF TIFFUTTBOFPWFSUJNFJT

  5. @benfrain #RWDSummit *USJFEUPBQQMZBDDFQUFEGSPOUFOEXJTEPN %3:PVUDPEF BCTUSBDUWJTVBMQBUUFSOTUP431 4JOHMF3FTQPOTJCJMJUZ1SJODJQMF DMBTTFT  OPSNBMJTFEFTJHOT 00$44

    4."$44FUD <div class="li-hor u-2o3 m-10"></div>
  6. @benfrain #RWDSummit #VU#VJMEJOHGSPNBCTUSBDU$44 QBUUFSOTNBEFJUFSBUJPOTMPX

  7. @benfrain #RWDSummit /FDFTTBSZUPBNFOE$44)5.-FBDI UJNFUIJOHTXFSFDIBOHFE 4PNFUJNFT431DMBTTFTOFFEFESFNPWJOH5IFO BOFXDMBTTBEEJOHKVTUUPHFUUIFSFRVJSFETUZMFT <div class="li-hor u-2o3 m-10"></div>

    .actual { width: 66.666%; margin: 0 auto; @include MQ(Mplus) { width: 100%; } }
  8. @benfrain #RWDSummit $44CFDBNFMPBEFEXJUITUZMFT BVUIPST JODMVEJOHNF XFSF GFBSGVMUPSFNPWF -PUTPGBCTUSBDUFEDMBTTFTUIBU XFSFMBSHFMZVOVTFE BOE

    DPVMEOUCFDIBOHFESFNPWFE 
  9. @benfrain #RWDSummit 8JUIPVUUIFBCJMJUZUPTBGFMZSFNPWFVOOFFEFE DPEF UIFTUZMFTIFFUTHSFXCMPBUFE

  10. @benfrain #RWDSummit .PWJOH DPNQPOFOUQBSUT XJUIJOUIFTJUF XBTCSJUUMF 4IBSJOHBDPNQPOFOUBDSPTT UFBNTXBTGSBVHIUTPNBOZ TUZMFEFQFOEFODJFT DPSSFDU

    SFTFUT TIBSFEBCTUSBDUJPOT FUD 
  11. @benfrain #RWDSummit /POFPGUIFBDDFQUFE BQQSPBDIFTPSUFDIOJRVFT BDUVBMMZTPMWFENZQSPCMFNT <div class="li-hor grid-2of3 m-10"></div> *Admittedly,

    it was not quite as dramatic as being betrayed by Robert The Bruce.
  12. @benfrain #RWDSummit 5IFSFIBEUPCFBOPUIFSXBZ 4VCTFRVFOUMZ *WFCFFOPOBDPEF NBJOUFOBODFPEZTTFZ

  13. @benfrain #RWDSummit *EMJLFUPTIBSF XJUIZPVTPNFPG UIFTPMVUJPOT* BSSJWFEBU "OENPSF JNQPSUBOUMZ 4PNFPGUIFCSJDL XBMMT*WFIJU

  14. @benfrain #RWDSummit 5SJVNQIT

  15. @benfrain #RWDSummit 1SPKFDUPSHBOJTBUJPO .PTUDPNNPO DPOWFOUJPOXIFO CVJMEJOHTJUFTJTUP HSPVQCZUFDIOPMPHZ *OUJNFJUCFDPNFT EJGGJDVMUUPMPDBUF DPOTUJUVFOUQBSUT

  16. @benfrain #RWDSummit #ZDPNQPOFOU (SPVQGSPOUFOEDPEFCZ DPNQPOFOU SBUIFSUIBO UFDIOPMPHZ/FWFSOFTU BEEJUJPOBMGPMEFST %FQSFDBUFEBGFBUVSFPS DPNQPOFOU

    5IFXIPMF GPMEFSDBOHP
  17. @benfrain #RWDSummit .PSFXJOT

  18. @benfrain #RWDSummit h 6TF BOEDPOGJHVSF BMJOUJOHUPPM +4)JOU $44MJOU TDTTMJOU h

    ,FFQBEJBSZBOEEPDT8*5)ZPVS QSPKFDU h &NCSBDFUPPMTMJLFCSPXTFSTZODJP GPSNVMUJCSPXTFSUFTUJOH h 6TF(JU.BLFZPVSDPXPSLFSTVTF JU3FHBSEMFTTPGXIBUZPVUIFZ VTFOPX
  19. @benfrain #RWDSummit .JTUBLFT1JUGBMMT

  20. @benfrain #RWDSummit h %POUVTFWFOEPSQSFGJYFT )PMB "VUPQSFGJYFS  h "WPJEMJCSBSZNJYJOTUIFZUSBEF DPOWFOJFODFGPSVOEFSTUBOEJOH-BDL

    QPSUBCJMJUZ h "WPJENBSLVQQBUUFSOTJO$44DPNNFOUT :PVSQBSUJBMOPXTJUTBMPOHTJEFUIF NBSLVQUFNQMBUF h "WPJEDMFWFSDPEF3FTPSUUPDPNQMFYJUZ BTBMBTUSFTPSU h $IFDLZPVSPVUQVU$44 JGQSF QSPDFTTJOH  +
  21. @benfrain #RWDSummit ",".ZOBNFJT#FO BOE*NBEEJDUFEUPUSZJOHOFXUPPMT 5PPMJOH

  22. @benfrain #RWDSummit 5PPMTDBOIFMQZPVEFBMXJUIZPVSQSPCMFN UIFZ DBOOPUTPMWFJU 5SVFTUPSZPWFSIFBSEEFWFMPQFSTUBMLJOH 8F OFFEUPEFDJEFPOBQSFQSPDFTTPSTPXFDBOGJY PVS$44 #FXBSF:PVDBOIBWFNBJOUBJOBCMF$44GPS38%

    QSPKFDUTXJUIBHPPEBQQSPBDIBOEOPQSF QSPDFTTPS5IFJOWFSTFJTOPUUSVF
  23. @benfrain #RWDSummit %FGJOFZPVSOFFET WBSJBCMFT GVODUJPOT 
 5IFOQJDLBTVJUBCMFUFDIOPMPHZ
 &YQFDUUPDIBOHFUPPMT (SVOU(VMQ8IBUFWFS .BLFTUZMFTIFFUTQPSUBCMF

    $444OJQQFUT4BTT $PNQBTT-JC4BTT "VUPQSFGJYFS 1PTU$44 "VUPQSFGJYFS $BQBCJMJUZJTJNQPSUBOU UFDIOPMPHZJTOPU
  24. @benfrain #RWDSummit &OEVSJOH$44

  25. @benfrain #RWDSummit *UIJOL*WFUSJFEWJSUVBMMZFWFSZBQQSPBDIUPXSJUJOH NBJOUBJOBCMF$44 ¨$44BSDIJUFDUVSBMBQQSPBDIFT BSFUIFEJFUQJMMPGGSPOUFOE EFWFMPQFST© "OEDSFBUFETPNFBQQSPBDIFTCFTUMFGUVOEPDVNFOUFE "MUIPVHI*XJMMTIBSFPOF

  26. @benfrain #RWDSummit *UXBTDBMMFE145 1PTJUJPO4USVDUVSF5IFNF

  27. @benfrain #RWDSummit .BSLVQMPPLFEMJLFUIJT <div class=“p1 s3 t4"></div> "EWBOUBHFT5FSTF BCTUSBDU IJHIMZSFVTBCMF

    431 %JTBEWBOUBHFT6OJOUFMMJHJCMF JNQPTTJCMFUPTFOTJCMZ BQQMZ38%FWFOUVBMJUJFT DON’T DO THIS
  28. @benfrain #RWDSummit *NPGUIF TMJHIUMZDPOUSPWFSTJBM PQJOJPOUIBU431 00$44BCTUSBDUJPOTBSF38%BOENBJOUFOBODFBOUJ QBUUFSOT 8JUI38% DPNQPOFOUTPGUFOIBWFEJGGFSFOUWJTVBM USFBUNFOUTBUEJGGFSFOUTJ[FT

    6TJOHDMBTTFTUIBUTQFDJGJDBMMZEFGJOFTUSVDUVSF  QPTJUJPOPSUIFNFBSFJOIFSFOUMZQSPCMFNBUJDXIFO UIBUTUSVDUVSF QPTJUJPOPSUIFNFNBZOFFEUPDIBOHF
  29. @benfrain #RWDSummit 0, IPUTIPU XIBUEP ZPVSFDPNNFOE *DBMMJU&OEVSJOH$44

  30. @benfrain #RWDSummit ¨5XPZFBSTBHP*XSPUFBCPPLXIFSF*XBT QSFBDIJOH%3:DPEF CVUBGUFSXPSLJOHPOFOEVSJOH QSPKFDUT ##$/FXTBOEUIFHVBSEJBODPN JUT EFDPVQMJOHUIBUCFDBNFNPSFJNQPSUBOUUPNF© ,BFMJH%FMPVNFBV

    'SPOUFOEEFWFMPQFS '5-BCT
  31. @benfrain #RWDSummit 'MBUIJFSBSDIZPGTFMFDUPST 5PNJUJHBUFTFMFDUPSTQFDJGJDJUZyOPOFTUJOHGPSDPOUFYU /BNFTQBDFEDPNQPOFOUT 1SPWJEFTTFMGRVBSBOUJOJOHVOJUQSFWFOUTDPMMJTJPO NBLFT DPNQPOFOUTQPSUBCMFTJNQMFUPEFQSFDBUFSFNPWF /PSFTFUOPSNBMJ[FSVMFT &WFSZUIJOHJTTFMGDPOUBJOFE

    &OEVSJOH$44IBMMNBSLT
  32. @benfrain #RWDSummit /PBCTUSBDUJPO 'BWPVSFODBQTVMBUJPOPGTUZMFTPWFSBCTUSBDUJPOBOESF VTF &NCSBDFSFQFUJUJPO ([JQ'58 %POUOPSNBMJTF (PPEEFTJHOFSTEPOUDIBOHFUIJOHTBSCJUSBSJMZ$SFBUFB OFXDPNQPOFOUXIFOWJTVBMTEJWFSHF

    "OUJ[FJUHFJTUQSJODJQMFT
  33. @benfrain #RWDSummit &YBNQMFDPNQPOFOU <div class="hp-Callout_Wrapper"> <h1 class="hp-Callout_Title">The Title</h1> <img class="hp-Callout_Img"

    src="hp- Callout_1.jpg/" srcset="hp-Callout_1@2x.jpg 2x" alt="Callout Hero"/> <p class="hp-Callout_Info">Product Info etc.</p> </div> $POWFOUJPODPOWFZTJODSFBTJOHHSBOVMBSJUZ WBHVFTQFDJGJD
  34. @benfrain #RWDSummit .ip-SubHeader_Wrapper { @include Headline; @include FlexCenter; font-size: $text12;

    background-color: $color-grey-54; border-bottom: 1px solid hsbbrighten($color-grey-54, -3); min-height: $size-fine-quadruple; @include MQ(Mplus) { background-color: $color-grey-a7; color: $color-grey-54; font-size: $text13; min-height: 22px; border-bottom: 1px solid $color-grey-54; border-top: 1px solid transparentize($color-white, .85); } } 0OFSVMFUPEFGJOFUIFNBMM
  35. @benfrain #RWDSummit &SS#MPBU 1SPEVDUJPO$44GJMFVTJOH&OEVSJOH$44NFUIPET XFJHIFEJOBU,# ([JQQFE  .flex { display:

    -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flex-center { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } 3FQFBUFEUJNFT 3FQFBUFEUJNFT "CTUSBDUJOHUPB00$44DMBTTTBWFEKVTU,# GJMFTJ[F,# ([JQQFE 
  36. @benfrain #RWDSummit %FDJEFPOBOBNJOHDPOWFOUJPO
 PSQJDLBCBUUMFUFTUFEGPSNBUMJLF#&.  .namespace-Component_ComponentSection-variant { /* Styles */

    } "OEFOGPSDFJU var testPattern = new RegExp("/\.(\w*)+\-+(([A-Z][a-z]+)+$)/g");
  37. @benfrain #RWDSummit #PSSPXTUFBMVTFGVMDPOWFOUJPOTBOE BQQSPBDIFT .oc-Menu_Wrapper { /* All the Styles

    */ transition: transform .35s; // Modernizr until @supports is ubiquitous .csstransforms3d & { transform: translate3d(0, -200px, 0); transition: transform .35s; } // When Off Canvas invoked: .has-OffCanvasActive.csstransforms3d & { transform: translate3d(0, 0, 0); } }
  38. @benfrain #RWDSummit &OEVSJOH$44 IUUQCFOGSBJOR /BNJOHSBUJPOBMF IUUQCFOGSBJOJ "SHVJOHBHBJOTU00$44"UPNJD$44GPS38% IUUQCFOGSBJOK .PSFPO&OEVSJOH$44

  39. @benfrain #RWDSummit 8IFSFJO*IPQFUPOPUTPVOEQBUSPOJTJOH 'BUIFSMZBEWJDF

  40. @benfrain #RWDSummit 4PMWFZPVSPXOQSPCMFNT*GZPVTPMWFZPVS PXOQSPCMFNTZPVDBOOPUCFEPJOHJUXSPOH 1BSTFJOGPSNBUJPOJOSFMBUJPOUPZPVSDPOUFYU .ZTPMVUJPOTTPMWFQSPCMFNT*IBE5IPTF QSPCMFNTNBZOPUBMJHOXJUIZPVST "UUIFPVUTFU EFGJOFUIFDIBSBDUFSJTUJDTZPV XJTIUPCFJOIFSFOUJOZPVSDPEFCBTF

  41. @benfrain #RWDSummit 1MFOUZPGTNBSUQFPQMFJOUFSFTUFE $44BSDIJUFDUVSF5IFJSTPMVUJPOT BQQSPBDIFTNBZCFNPSFBQUGPS ZPVSTDFOBSJP JOOPQBSUJDVMBSPSEFS  !OFDPMBT /JDPMBT(BMMBHIFS

     !TUVCCFSOFMMB /JDPMF4VMMJWBO  !TOPPLDB +POBUIBO4OPPL  !UIJFSSZLPCMFOU[ 5IJFSSZ,PCMFOU[ 
 !DTTXJ[BSESZ )BSSZ3PCFSUT  !LBFMJH ,BFMJH%FMPVNFBV
  42. @benfrain #RWDSummit 4VNNBSZ

  43. @benfrain #RWDSummit 4PPOXFXJMMIBWFXFCDPNQPOFOUT TUZMF FODBQTVMBUJPOBTTUBOEBSE  *OUIFNFBOUJNFXFOFFEUPEFWJTFXBZTUP LFFQDPEFNBJOUBJOBCMFGPSPVSTFMWFTBOE TVCTFRVFOUMZUSJNGPSPVSVTFST 5IFSFBSFNBOZXBZTUPEPUIJT'JOEZPVST

  44. @benfrain #RWDSummit %PDVNFOUUIFQSPCMFNTZPV IBWFBOETIBSFUIFTPMVUJPOT ZPVBSSJWFBU

  45. 5IF&OE 5IBOLZPVGPSZPVSBUUFOUJPO !CFOGSBJO CFOGSBJODPN .Z#PPLT 4PDJBM8FC