$30 off During Our Annual Pro Sale. View Details »

Modular HTML & CSS Workshop

Shay Howe
September 27, 2012

Modular HTML & CSS Workshop

All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.

HTML and CSS are the backbone to every website, and are equally as important as any design or development. In this workshop you will learn how to write modular HTML and CSS, and how reuse code to build maintainable websites. After spending some time playing with legos and writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.

The workshop is geared towards intermediate front end developers, with a love of legos, looking grow their skill set. A laptop and good attitude are preferred.

Shay Howe

September 27, 2012
Tweet

More Decks by Shay Howe

Other Decks in Design

Transcript

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

    View Slide

  2. @shayhowe
    Modular HTML & CSS
    Shay Howe
    @shayhowe
    learn.shayhowe.com

    View Slide

  3. @shayhowe
    Modular HTML & CSS
    1. The Problem
    2. Groundwork
    3. Assembling Layout
    4. Accommodating Content
    5. Onward
    OUR SCHEDULE

    View Slide

  4. @shayhowe
    Modular HTML & CSS
    THE
    PROBLEM

    View Slide

  5. The Gust by Willem van de Velde the Younger

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. @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

  10. @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

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

    View Slide

  12. @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

  13. @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

  14. @shayhowe
    Modular HTML & CSS

    View Slide

  15. @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

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

    View Slide

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

    View Slide

  18. Parade of the Black Sea Fleet by Ivan Aivazovsky

    View Slide

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

    View Slide

  20. @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

  21. @shayhowe
    Modular HTML & CSS
    GROUNDWORK

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. @shayhowe
    Modular HTML & CSS
    ASSEMBLING
    LAYOUT

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. @shayhowe
    Modular HTML & CSS
    TRANSPARENTIZE ELEMENTS
    • Stylize elements to be transparent
    • Keep visual properties apart from layout
    properties

    View Slide

  35. @shayhowe
    Modular HTML & CSS
    TRANSPARENTIZE ELEMENTS
    Bad
    .pagination  {
       border-­‐radius:  5px;
       border:  1px  solid  #eee;
       margin:  0  10px;
       width:  620px;
    }
    ...

    View Slide

  36. @shayhowe
    Modular HTML & CSS
    TRANSPARENTIZE ELEMENTS
    Good
    .grid-­‐8  {
       margin:  0  10px;
       width:  620px;
    }
    .offset-­‐box  {
       border-­‐radius:  5px;
       border:  1px  solid  #eee;
    }
    ...

    View Slide

  37. @shayhowe
    Modular HTML & CSS
    CREATE ADAPTABLE LAYOUTS
    • Height and width should be flexible
    • Height should extend with content
    • Width should extend with a grid

    View Slide

  38. @shayhowe
    Modular HTML & CSS
    CREATE ADAPTABLE LAYOUTS
    Bad
    #main  {
       float:  left;
       margin:  0  10px;
       width:  620px;
    }
    #aside  {
       float:  left;
       margin:  0  10px;
       width:  300px;
    }

    View Slide

  39. @shayhowe
    Modular HTML & CSS
    CREATE ADAPTABLE LAYOUTS
    Good
    .grid-­‐4,
    .grid-­‐8  {
       float:  left;
       margin:  0  10px;
    }
    .grid-­‐4  {
       width:  300px;
    }
    .grid-­‐8  {
       width:  620px;
    }

    View Slide

  40. @shayhowe
    Modular HTML & CSS
    ASSEMBLING LAYOUT
    IN PRACTICE
    http://bit.ly/modular-html-css

    View Slide

  41. @shayhowe
    Modular HTML & CSS
    ACCOMMODATING
    CONTENT

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

       ...

    View Slide

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

       ...

    View Slide

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

    View Slide

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

       ...

    View Slide

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

       ...

    View Slide

  51. @shayhowe
    Modular HTML & CSS
    ACCOMMODATING CONTENT
    IN PRACTICE
    http://bit.ly/modular-html-css

    View Slide

  52. @shayhowe
    Modular HTML & CSS
    ONWARD

    View Slide

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

    View Slide

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

    View Slide

  55. @shayhowe
    Modular HTML & CSS
    THEMES
    • Decouple HTML and CSS
    • Separate presentation from layout
    • Separate content from container
    • Extend elements with classes

    View Slide

  56. @shayhowe
    Modular HTML & CSS
    OUTCOMES
    • Maintainability!
    • Reusable code, less duplication
    • Flexibility and extensibility
    • Improved standards

    View Slide

  57. @shayhowe
    Modular HTML & CSS
    WHAT’S NEXT
    Build a styleguide
    • Twitter Bootstrap, Zurb Foundation
    Review methodologies
    • OOCSS, SMACSS
    Test your code
    • CSS Lint, Inspector, PageSpeed

    View Slide

  58. @shayhowe
    Modular HTML & CSS
    THANK YOU!
    Questions?
    @shayhowe
    http://learn.shayhowe.com

    View Slide