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

Modular HTML & CSS

Shay Howe
September 27, 2012

Modular HTML & CSS

There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code amongst a team should be a joyful experience, not absolute terror.

Shay talks about how to how to write tactical HTML and CSS, crafting code that is maintainable, flexible, and extensible. Covering new methodologies such as OOCSS and SMACSS learn how to architect websites which are manageable and performant.

Shay Howe

September 27, 2012
Tweet

More Decks by Shay Howe

Other Decks in Programming

Transcript

  1. TACTICAL
    HTML & CSS
    Shay Howe
    @shayhowe
    shayhowe.com
    MODULAR
    HTML & CSS

    View Slide

  2. @shayhowe
    Modular HTML & CSS
    SHAY HOWE
    shayhowe.com – @shayhowe

    View Slide

  3. The Gust by Willem van de Velde the Younger

    View Slide

  4. @shayhowe
    Modular HTML & CSS
    COMMON PROBLEMS
    • Websites have difficulty scaling
    • Code becomes brittle
    • Files and code bases begin to swell

    View Slide

  5. @shayhowe
    Modular HTML & CSS
    WHAT’S WRONG
    • Best practices aren’t exactly best practices
    • Standards need to evolve

    View Slide

  6. @shayhowe
    Modular HTML & CSS
    BEST BAD PRACTICES
    • Avoid extra elements
    • Avoid classes
    • Leverage type selectors
    • Leverage descendent selectors

    View Slide

  7. @shayhowe
    Modular HTML & CSS
    BEST BAD PRACTICES
    Avoiding classes
    section  ul#nav  li  {...}
    section:nth-­‐child(2)  div:nth-­‐child(7)  >  a  {...}
    Leveraging selectors
    a.btn  {...}
    #main  a.btn  {...}
    #main  div.feature  a.btn  {...}

    View Slide

  8. @shayhowe
    Modular HTML & CSS
    BEST BAD PRACTICES
    Bad
    #contact  li:nth-­‐child(1)  input,
    #contact  li:nth-­‐child(2)  input  {
       width:  160px;
    }
    #contact  li:nth-­‐child(3)  textarea  {
       width:  280px;
    }

    View Slide

  9. @shayhowe
    Modular HTML & CSS
    BEST BAD PRACTICES
    Good
    .col-­‐1  {
       width:  160px;
    }
    .col-­‐2  {
       width:  280px;
    }

    View Slide

  10. @shayhowe
    Modular HTML & CSS
    SPECIFICITY?
    • Specificity determines which styles are applied
    • Each selector has a specificity weight
    • High specificity beats low specificity
    • Low specificity is key

    View Slide

  11. Parade of the Black Sea Fleet by Ivan Aivazovsky

    View Slide

  12. @shayhowe
    Modular HTML & CSS
    MAINTAINABILITY
    Code must be...
    • Organized
    • Modular
    • Performant

    View Slide

  13. @shayhowe
    Modular HTML & CSS
    ORGANIZATION

    View Slide

  14. @shayhowe
    Modular HTML & CSS
    APPROACH
    • Stop thinking about pages
    • Start thinking about components
    • Take visual inventory

    View Slide

  15. @shayhowe
    Modular HTML & CSS
    TECHNIQUE
    Base
    • Core styles for entire site
    Normalize (Reset), Default Elements, Grid, Variables
    Components
    • User interface concepts & design patterns
    Alerts, Buttons, Forms, List, Pagination, Tooltips
    Modules
    • Business logic
    Aside, Header, Footer

    View Slide

  16. @shayhowe
    Modular HTML & CSS
    TECHNIQUE

    View Slide

  17. @shayhowe
    Modular HTML & CSS
    MODULARITY

    View Slide

  18. @shayhowe
    Modular HTML & CSS
    ASSEMBLE LAYOUT
    • Separate presentation (or theme) from layout
    • Create an object layer for layout
    • Create a skin layer for theme
    • Use a grid

    View Slide

  19. @shayhowe
    Modular HTML & CSS
    ASSEMBLE LAYOUT
    Bad
    .news  {
       background:  #eee;
       color:  #666;
       margin:  0  10px;
       width:  400px;
    }
    ...

    View Slide

  20. @shayhowe
    Modular HTML & CSS
    ASSEMBLE LAYOUT
    Good
    .grid-­‐4  {
       margin:  0  10px;
       width:  400px;
    }
    .feat-­‐box  {
       background:  #eee;
       color:  #666;
    }
    ...

    View Slide

  21. @shayhowe
    Modular HTML & CSS
    ACCOMMODATE CONTENT
    • Separate content from container
    • Stylize content regardless of container

    View Slide

  22. @shayhowe
    Modular HTML & CSS
    ACCOMMODATE CONTENT
    Bad
    .alert  {
       background:  #f2dede;
       border-­‐radius:  10px;
       color:  #b94a48;
       padding:  10px  20px;
    }
    ...

    View Slide

  23. @shayhowe
    Modular HTML & CSS
    ACCOMMODATE CONTENT
    Good
    .alert  {
       border-­‐radius:  10px;
       padding:  10px  20px;
    }
    .alert-­‐error  {
       background:  #f2dede;
       color:  #b94a48;
    }
    ...

    View Slide

  24. @shayhowe
    Modular HTML & CSS
    AVOID PARENT DEPENDENCY
    • Remove parent container dependency
    • Decouple CSS from HTML
    • Create components to be used anywhere

    View Slide

  25. @shayhowe
    Modular HTML & CSS
    AVOID PARENT DEPENDENCY
    Bad
    .feat-­‐box  {
       background:  #eee;
    }
    article  .feat-­‐box  {
       background:  #fff;
    }

       ...

    View Slide

  26. @shayhowe
    Modular HTML & CSS
    AVOID PARENT DEPENDENCY
    Good
    .feat-­‐box  {
       background:  #eee;
    }
    .feat-­‐box-­‐alt  {
       background:  #fff;
    }

       ...

    View Slide

  27. @shayhowe
    Modular HTML & CSS
    FAVOR SEMANTICS
    • Allow elements to adapt
    • Uses individual classes to extend modules

    View Slide

  28. @shayhowe
    Modular HTML & CSS
    FAVOR SEMANTICS
    Bad
    .feat-­‐box  h2  {
       color:  #f60;
       font:  18px  Helvetica,  sans-­‐serif;
    }

       ...

    View Slide

  29. @shayhowe
    Modular HTML & CSS
    FAVOR SEMANTICS
    Good
    .feat-­‐subhead  {
       color:  #f60;
       font:  18px  Helvetica,  sans-­‐serif;
    }

       ...

    View Slide

  30. @shayhowe
    Modular HTML & CSS
    MEASURING SPECIFICITY
    Formula
    • IDs, Classes/Pseudo-classes/Attributes, Elements
    High Specificity (Bad)
    #primary  #main  div.gallery  figure.media
    IDs: 2, Classes: 2, Elements: 2 — Compiled: 2–2–2
    Low Specificity (Good)
    .gallery-­‐media
    IDs: 0, Classes: 1, Elements: 0 — Compiled: 0–1–0

    View Slide

  31. @shayhowe
    Modular HTML & CSS

    View Slide

  32. @shayhowe
    Modular HTML & CSS
    WATCH SPECIFICITY
    • Be explicit
    • Keep specificity low
    • Never use IDs or !important
    • Avoid nested selectors (#main  .spotlight  strong  span)

    View Slide

  33. @shayhowe
    Modular HTML & CSS
    WATCH SPECIFICITY
    Bad
    #primary  #main  div.gallery  {
       text-­‐transform:  uppercase;
    }
    #primary  #main  div.gallery  figure.media  {
       background:  #ccc;
    }

    View Slide

  34. @shayhowe
    Modular HTML & CSS
    WATCH SPECIFICITY
    Good
    .gallery  {
       text-­‐transform:  uppercase;
    }
    .gallery-­‐media  {
       background:  #ccc;
    }

    View Slide

  35. @shayhowe
    Modular HTML & CSS
    USE CLASSES
    • Write understandable class names
    • Avoid unnecessary nesting
    • Use same strength specificity

    View Slide

  36. @shayhowe
    Modular HTML & CSS
    USE CLASSES
    Bad
    .feat-­‐box  .callout  .pr  {
       font-­‐size:  12px;
    }
    .feat-­‐box  .callout  .pr  .un  {
       color:  #39f;
    }

    View Slide

  37. @shayhowe
    Modular HTML & CSS
    USE CLASSES
    Good
    .feat-­‐box  .price  {
       font-­‐size:  12px;
    }
    .feat-­‐box  .unit  {
       color:  #39f;
    }

    View Slide

  38. @shayhowe
    Modular HTML & CSS
    USE CLASSES
    Bad
    .btn.large  {
       font-­‐size:  24px;    
       padding:  15px  30px;
    }
    ...

    View Slide

  39. @shayhowe
    Modular HTML & CSS
    USE CLASSES
    Good
    .btn-­‐large  {
       font-­‐size:  24px;
       padding:  15px  30px;
    }
    ...

    View Slide

  40. @shayhowe
    Modular HTML & CSS
    METHODOLOGIES
    OOCSS
    • Object-Oriented CSS
    From Nicole Sullivan – oocss.org
    SMACSS
    • Scalable and Modular Architecture for CSS
    From Jonathan Snook – smacss.com

    View Slide

  41. @shayhowe
    Modular HTML & CSS
    PERFORMANCE

    View Slide

  42. @shayhowe
    Modular HTML & CSS
    REUSE CODE
    • Do not duplicate code
    • Remove old code
    • Defer loading subsequent styles

    View Slide

  43. @shayhowe
    Modular HTML & CSS
    REUSE CODE
    Bad
    .news  {
       background:  #eee;
       color:  #666;
    }
    .social  {
       background:  #eee;
       color:  #666;
    }

    View Slide

  44. @shayhowe
    Modular HTML & CSS
    REUSE CODE
    Good
    .news,
    .social  {
       background:  #eee;
       color:  #666;
    }
    Better
    .feat-­‐box  {
       background:  #eee;
       color:  #666;
    }

    View Slide

  45. @shayhowe
    Modular HTML & CSS
    MINIMIZE REQUEST
    • Combine like files (CSS & JS)
    • Use image sprites
    • Leverage data URIs
    • Icon fonts

    View Slide

  46. @shayhowe
    Modular HTML & CSS
    IMAGE SPRITES
    ...
    ...
    .icon  {
       background:  url("icons.png")  0  0  no-­‐repeat;
    }
    .i-­‐twitter  {
       background-­‐position:  0  -­‐16px;
    }
    .i-­‐facebook  {
       background-­‐position:  0  -­‐32px;
    }

    View Slide

  47. @shayhowe
    Modular HTML & CSS
    DATA URIS
    HTML
    src="data:imagepng;base64,...">
    CSS
    .pattern  {
       background:  url("data:imagepng;base64,...")  
           repeat;
    }

    View Slide

  48. @shayhowe
    Modular HTML & CSS
    COMPRESS & CACHE FILES
    • Utilize Gzip compression
    • Losslessly compress images
    • Cache common files

    View Slide

  49. COMPRESS & CACHE FILES

    View Slide

  50. @shayhowe
    Modular HTML & CSS
    COMPRESS & CACHE FILES

    View Slide

  51. @shayhowe
    Modular HTML & CSS
    COMPRESS & CACHE FILES
    Original 455kb Optimized 401kb

    View Slide

  52. Ships on the Roadstead by Willem van de Velde the Younger

    View Slide

  53. @shayhowe
    Modular HTML & CSS
    GETTING STARTED
    Build a styleguide
    • Twitter Bootstrap, Zurb Foundation
    Review methodologies
    • OOCSS, SMACSS
    Test your code
    • CSS Lint, Inspector, PageSpeed

    View Slide

  54. View Slide

  55. @shayhowe
    Modular HTML & CSS
    THANK YOU!
    Questions?
    @shayhowe
    http://learn.shayhowe.com
    http://bit.ly/mod-html-css

    View Slide