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.

Transcript

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

   View Slide

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

   View Slide

3. @benfrain #RWDSummit
   -BSHFOVNCFSPGIBOETPOUIF
   QSPKFDUPSUIFDPNQMFYJUZPGUIF
   QSPEVDU FHBXFCBQQ
   
   

   View Slide

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

   View Slide

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

   View Slide

6. @benfrain #RWDSummit
   #VU#VJMEJOHGSPNBCTUSBDU$44
   QBUUFSOTNBEFJUFSBUJPOTMPX
   

   View Slide

7. @benfrain #RWDSummit
   /FDFTTBSZUPBNFOE$44)5.-FBDI
   UJNFUIJOHTXFSFDIBOHFE
   4PNFUJNFT431DMBTTFTOFFEFESFNPWJOH5IFO
   BOFXDMBTTBEEJOHKVTUUPHFUUIFSFRVJSFETUZMFT
   
   .actual {
   width: 66.666%;
   margin: 0 auto;
   @include MQ(Mplus) {
   width: 100%;
   }
   }
   

   View Slide

8. @benfrain #RWDSummit
   $44CFDBNFMPBEFEXJUITUZMFT
   BVUIPST JODMVEJOHNF
   XFSF
   GFBSGVMUPSFNPWF
   -PUTPGBCTUSBDUFEDMBTTFTUIBU
   XFSFMBSHFMZVOVTFE BOE
   DPVMEOUCFDIBOHFESFNPWFE
   
   

   View Slide

9. @benfrain #RWDSummit
   8JUIPVUUIFBCJMJUZUPTBGFMZSFNPWFVOOFFEFE
   DPEF UIFTUZMFTIFFUTHSFXCMPBUFE
   

   View Slide

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

    View Slide

11. @benfrain #RWDSummit
    /POFPGUIFBDDFQUFE
    BQQSPBDIFTPSUFDIOJRVFT
    BDUVBMMZTPMWFENZQSPCMFNT
    
    *Admittedly, it was not quite as dramatic as being betrayed by Robert The Bruce.
    

    View Slide

12. @benfrain #RWDSummit
    5IFSFIBEUPCFBOPUIFSXBZ
    4VCTFRVFOUMZ *WFCFFOPOBDPEF
    NBJOUFOBODFPEZTTFZ
    

    View Slide

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

    View Slide

14. @benfrain #RWDSummit
    5SJVNQIT
    

    View Slide

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

    View Slide

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

    View Slide

17. @benfrain #RWDSummit
    .PSFXJOT
    

    View Slide

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
    

    View Slide

19. @benfrain #RWDSummit
    .JTUBLFT1JUGBMMT
    

    View Slide

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
    
    +
    

    View Slide

21. @benfrain #RWDSummit
    ",".ZOBNFJT#FO BOE*NBEEJDUFEUPUSZJOHOFXUPPMT
    5PPMJOH
    

    View Slide

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

    View Slide

23. @benfrain #RWDSummit
    %FGJOFZPVSOFFET WBSJBCMFT GVODUJPOT
    

    5IFOQJDLBTVJUBCMFUFDIOPMPHZ

    &YQFDUUPDIBOHFUPPMT
    (SVOU(VMQ8IBUFWFS
    .BLFTUZMFTIFFUTQPSUBCMF
    $444OJQQFUT4BTT$PNQBTT-JC4BTT"VUPQSFGJYFS
    1PTU$44"VUPQSFGJYFS
    $BQBCJMJUZJTJNQPSUBOU UFDIOPMPHZJTOPU
    

    View Slide

24. @benfrain #RWDSummit
    &OEVSJOH$44
    

    View Slide

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

    View Slide

26. @benfrain #RWDSummit
    *UXBTDBMMFE145
    1PTJUJPO4USVDUVSF5IFNF
    

    View Slide

27. @benfrain #RWDSummit
    .BSLVQMPPLFEMJLFUIJT
    
    "EWBOUBHFT5FSTF BCTUSBDU IJHIMZSFVTBCMF 431
    %JTBEWBOUBHFT6OJOUFMMJHJCMF JNQPTTJCMFUPTFOTJCMZ
    BQQMZ38%FWFOUVBMJUJFT
    DON’T DO THIS
    

    View Slide

28. @benfrain #RWDSummit
    *NPGUIF TMJHIUMZDPOUSPWFSTJBM
    PQJOJPOUIBU431
    00$44BCTUSBDUJPOTBSF38%BOENBJOUFOBODFBOUJ
    QBUUFSOT
    8JUI38% DPNQPOFOUTPGUFOIBWFEJGGFSFOUWJTVBM
    USFBUNFOUTBUEJGGFSFOUTJ[FT
    6TJOHDMBTTFTUIBUTQFDJGJDBMMZEFGJOFTUSVDUVSF
    QPTJUJPOPSUIFNFBSFJOIFSFOUMZQSPCMFNBUJDXIFO
    UIBUTUSVDUVSF QPTJUJPOPSUIFNFNBZOFFEUPDIBOHF
    

    View Slide

29. @benfrain #RWDSummit
    0, IPUTIPU XIBUEP
    ZPVSFDPNNFOE
    *DBMMJU&OEVSJOH$44
    

    View Slide

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

    View Slide

31. @benfrain #RWDSummit
    'MBUIJFSBSDIZPGTFMFDUPST
    5PNJUJHBUFTFMFDUPSTQFDJGJDJUZyOPOFTUJOHGPSDPOUFYU
    /BNFTQBDFEDPNQPOFOUT
    1SPWJEFTTFMGRVBSBOUJOJOHVOJUQSFWFOUTDPMMJTJPO NBLFT
    DPNQPOFOUTQPSUBCMFTJNQMFUPEFQSFDBUFSFNPWF
    /PSFTFUOPSNBMJ[FSVMFT
    &WFSZUIJOHJTTFMGDPOUBJOFE
    &OEVSJOH$44IBMMNBSLT
    

    View Slide

32. @benfrain #RWDSummit
    /PBCTUSBDUJPO
    'BWPVSFODBQTVMBUJPOPGTUZMFTPWFSBCTUSBDUJPOBOESF
    VTF
    &NCSBDFSFQFUJUJPO
    ([JQ'58
    %POUOPSNBMJTF
    (PPEEFTJHOFSTEPOUDIBOHFUIJOHTBSCJUSBSJMZ$SFBUFB
    OFXDPNQPOFOUXIFOWJTVBMTEJWFSHF
    "OUJ[FJUHFJTUQSJODJQMFT
    

    View Slide

33. @benfrain #RWDSummit
    &YBNQMFDPNQPOFOU
    
    The Title
    alt="Callout Hero"/>
    Product Info etc.
    
    $POWFOUJPODPOWFZTJODSFBTJOHHSBOVMBSJUZ
    WBHVFTQFDJGJD
    

    View Slide

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
    

    View Slide

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
    
    

    View Slide

36. @benfrain #RWDSummit
    %FDJEFPOBOBNJOHDPOWFOUJPO

    PSQJDLBCBUUMFUFTUFEGPSNBUMJLF#&.
    
    .namespace-Component_ComponentSection-variant {
    /* Styles */
    }
    "OEFOGPSDFJU
    var testPattern = new RegExp("/\.(\w*)+\-+(([A-Z][a-z]+)+$)/g");
    

    View Slide

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);
    }
    }
    

    View Slide

38. @benfrain #RWDSummit
    &OEVSJOH$44
    IUUQCFOGSBJOR
    /BNJOHSBUJPOBMF
    IUUQCFOGSBJOJ
    "SHVJOHBHBJOTU00$44"UPNJD$44GPS38%
    IUUQCFOGSBJOK
    .PSFPO&OEVSJOH$44
    

    View Slide

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

    View Slide

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

    View Slide

41. @benfrain #RWDSummit
    1MFOUZPGTNBSUQFPQMFJOUFSFTUFE
    $44BSDIJUFDUVSF5IFJSTPMVUJPOT
    BQQSPBDIFTNBZCFNPSFBQUGPS
    ZPVSTDFOBSJP JOOPQBSUJDVMBSPSEFS
    
    !OFDPMBT /JDPMBT(BMMBHIFS
    
    !TUVCCFSOFMMB /JDPMF4VMMJWBO
    
    !TOPPLDB +POBUIBO4OPPL
    
    !UIJFSSZLPCMFOU[ 5IJFSSZ,PCMFOU[
    

    !DTTXJ[BSESZ )BSSZ3PCFSUT
    
    !LBFMJH ,BFMJH%FMPVNFBV
    
    

    View Slide

42. @benfrain #RWDSummit
    4VNNBSZ
    

    View Slide

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

    View Slide

44. @benfrain #RWDSummit
    %PDVNFOUUIFQSPCMFNTZPV
    IBWFBOETIBSFUIFTPMVUJPOT
    ZPVBSSJWFBU
    
    

    View Slide

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

    View Slide