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.

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