Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Architecting Code on Large RWD Projects

Ben Frain
March 12, 2015

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.

Ben Frain

March 12, 2015
Tweet

Transcript

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

    4BTTBOE$PNQBTTGPS%FTJHOFST
    )5.-$44DPEF

    View full-size slide

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

    View full-size slide

  3. @benfrain #RWDSummit
    -BSHFOVNCFSPGIBOETPOUIF
    QSPKFDUPSUIFDPNQMFYJUZPGUIF
    QSPEVDU FHBXFCBQQ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. @benfrain #RWDSummit
    /FDFTTBSZUPBNFOE$44)5.-FBDI
    UJNFUIJOHTXFSFDIBOHFE
    4PNFUJNFT431DMBTTFTOFFEFESFNPWJOH5IFO
    BOFXDMBTTBEEJOHKVTUUPHFUUIFSFRVJSFETUZMFT

    .actual {
    width: 66.666%;
    margin: 0 auto;
    @include MQ(Mplus) {
    width: 100%;
    }
    }

    View full-size slide

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

    View full-size slide

  9. @benfrain #RWDSummit
    8JUIPVUUIFBCJMJUZUPTBGFMZSFNPWFVOOFFEFE
    DPEF UIFTUZMFTIFFUTHSFXCMPBUFE

    View full-size slide

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

    View full-size slide

  11. @benfrain #RWDSummit
    /POFPGUIFBDDFQUFE
    BQQSPBDIFTPSUFDIOJRVFT
    BDUVBMMZTPMWFENZQSPCMFNT

    *Admittedly, it was not quite as dramatic as being betrayed by Robert The Bruce.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. @benfrain #RWDSummit
    5SJVNQIT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. @benfrain #RWDSummit
    .PSFXJOT

    View full-size 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 full-size slide

  19. @benfrain #RWDSummit
    .JTUBLFT1JUGBMMT

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  23. @benfrain #RWDSummit
    %FGJOFZPVSOFFET WBSJBCMFT GVODUJPOT

    5IFOQJDLBTVJUBCMFUFDIOPMPHZ

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

    View full-size slide

  24. @benfrain #RWDSummit
    &OEVSJOH$44

    View full-size slide

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

    View full-size slide

  26. @benfrain #RWDSummit
    *UXBTDBMMFE145
    1PTJUJPO4USVDUVSF5IFNF

    View full-size slide

  27. @benfrain #RWDSummit
    .BSLVQMPPLFEMJLFUIJT

    "EWBOUBHFT5FSTF BCTUSBDU IJHIMZSFVTBCMF 431
    %JTBEWBOUBHFT6OJOUFMMJHJCMF JNQPTTJCMFUPTFOTJCMZ
    BQQMZ38%FWFOUVBMJUJFT
    DON’T DO THIS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. @benfrain #RWDSummit
    &YBNQMFDPNQPOFOU

    The Title
    alt="Callout Hero"/>
    Product Info etc.

    $POWFOUJPODPOWFZTJODSFBTJOHHSBOVMBSJUZ
    WBHVFTQFDJGJD

    View full-size 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 full-size 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 full-size slide

  36. @benfrain #RWDSummit
    %FDJEFPOBOBNJOHDPOWFOUJPO

    PSQJDLBCBUUMFUFTUFEGPSNBUMJLF#&.

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  42. @benfrain #RWDSummit
    4VNNBSZ

    View full-size slide

  43. @benfrain #RWDSummit
    4PPOXFXJMMIBWFXFCDPNQPOFOUT TUZMF
    FODBQTVMBUJPOBTTUBOEBSE

    *OUIFNFBOUJNFXFOFFEUPEFWJTFXBZTUP
    LFFQDPEFNBJOUBJOBCMFGPSPVSTFMWFTBOE
    TVCTFRVFOUMZUSJNGPSPVSVTFST
    5IFSFBSFNBOZXBZTUPEPUIJT'JOEZPVST

    View full-size slide

  44. @benfrain #RWDSummit
    %PDVNFOUUIFQSPCMFNTZPV
    IBWFBOETIBSFUIFTPMVUJPOT
    ZPVBSSJWFBU

    View full-size slide

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

    View full-size slide