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.

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