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
2. @shayhowe Modular HTML & CSS Shay Howe @shayhowe learn.shayhowe.com
3. @shayhowe Modular HTML & CSS 1. The Problem 2. Groundwork 3. Assembling Layout 4. Accommodating Content 5. Onward OUR SCHEDULE
4. @shayhowe Modular HTML & CSS THE PROBLEM
5. The Gust by Willem van de Velde the Younger
6. @shayhowe Modular HTML & CSS COMMON PROBLEMS • Websites have difficulty scaling • Code becomes brittle • Files and code bases begin to swell
7. @shayhowe Modular HTML & CSS WHAT’S WRONG • Best practices aren’t exactly best practices • Standards need to evolve
8. @shayhowe Modular HTML & CSS BEST BAD PRACTICES • Avoid extra elements • Avoid classes • Leverage type selectors • Leverage descendent selectors
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  {...}
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; }
11. @shayhowe Modular HTML & CSS BEST BAD PRACTICES Good .col-­‐1  {    width:  160px; } .col-­‐2  {    width:  280px; }
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
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
14. @shayhowe Modular HTML & CSS
15. @shayhowe Modular HTML & CSS WATCH SPECIFICITY • Be explicit • Keep specificity low • Never use IDs or !important • Avoid nested selectors (#main  .spotlight  strong  span)
16. @shayhowe Modular HTML & CSS WATCH SPECIFICITY Bad #primary  #main  div.gallery  {    text-­‐transform:  uppercase; } #primary  #main  div.gallery  figure.media  {    background:  #ccc; }
17. @shayhowe Modular HTML & CSS WATCH SPECIFICITY Good .gallery  {    text-­‐transform:  uppercase; } .gallery-­‐media  {    background:  #ccc; }
18. Parade of the Black Sea Fleet by Ivan Aivazovsky
19. @shayhowe Modular HTML & CSS MAINTAINABILITY Code must be... • Organized • Modular • Performant
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
21. @shayhowe Modular HTML & CSS GROUNDWORK
22. @shayhowe Modular HTML & CSS REUSE CODE • Do not duplicate code • Remove old code • Defer loading subsequent styles
23. @shayhowe Modular HTML & CSS REUSE CODE Bad .news  {    background:  #eee;    color:  #666; } .social  {    background:  #eee;    color:  #666; }
24. @shayhowe Modular HTML & CSS REUSE CODE Good .news, .social  {    background:  #eee;    color:  #666; } Better .feat-­‐box  {    background:  #eee;    color:  #666; }
25. @shayhowe Modular HTML & CSS USE CLASSES • Write understandable class names • Avoid unnecessary nesting • Use same strength specificity
26. @shayhowe Modular HTML & CSS USE CLASSES Bad .feat-­‐box  .callout  .pr  {    font-­‐size:  12px; } .feat-­‐box  .callout  .pr  .un  {    color:  #39f; }
27. @shayhowe Modular HTML & CSS USE CLASSES Good .feat-­‐box  .price  {    font-­‐size:  12px; } .feat-­‐box  .unit  {    color:  #39f; }
28. @shayhowe Modular HTML & CSS USE CLASSES Bad .btn.large  {    font-­‐size:  24px;        padding:  15px  30px; } <div  class="btn  large">...</div>
29. @shayhowe Modular HTML & CSS USE CLASSES Good .btn-­‐large  {    font-­‐size:  24px;    padding:  15px  30px; } <div  class="btn-­‐large">...</div>
30. @shayhowe Modular HTML & CSS ASSEMBLING LAYOUT
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
32. @shayhowe Modular HTML & CSS ABSTRACT STRUCTURE Bad .news  {    background:  #eee;    color:  #666;    margin:  0  10px;    width:  400px; } <div  class="news">...</div>
33. @shayhowe Modular HTML & CSS ABSTRACT STRUCTURE Good .grid-­‐4  {    margin:  0  10px;    width:  400px; } .feat-­‐box  {    background:  #eee;    color:  #666; } <div  class="grid-­‐4  feat-­‐box">...</div>
34. @shayhowe Modular HTML & CSS TRANSPARENTIZE ELEMENTS • Stylize elements to be transparent • Keep visual properties apart from layout properties
35. @shayhowe Modular HTML & CSS TRANSPARENTIZE ELEMENTS Bad .pagination  {    border-­‐radius:  5px;    border:  1px  solid  #eee;    margin:  0  10px;    width:  620px; } <ul  class="pagination">...</ul>
36. @shayhowe Modular HTML & CSS TRANSPARENTIZE ELEMENTS Good .grid-­‐8  {    margin:  0  10px;    width:  620px; } .offset-­‐box  {    border-­‐radius:  5px;    border:  1px  solid  #eee; } <ul  class="grid-­‐8  offset-­‐box">...</ul>
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
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; }
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; }
40. @shayhowe Modular HTML & CSS ASSEMBLING LAYOUT IN PRACTICE http://bit.ly/modular-html-css
41. @shayhowe Modular HTML & CSS ACCOMMODATING CONTENT
42. @shayhowe Modular HTML & CSS SEPARATE CONTENT • Separate content from container • Stylize content regardless of container
43. @shayhowe Modular HTML & CSS SEPARATE CONTENT Bad .alert  {    background:  #f2dede;    border-­‐radius:  10px;    color:  #b94a48;    padding:  10px  20px; } <div  class="alert">...</div>
44. @shayhowe Modular HTML & CSS SEPARATE CONTENT Good .alert  {    border-­‐radius:  10px;    padding:  10px  20px; } .alert-­‐error  {    background:  #f2dede;    color:  #b94a48; } <div  class="alert  alert-­‐error">...</div>
45. @shayhowe Modular HTML & CSS AVOID PARENT DEPENDENCY • Remove parent container dependency • Decouple CSS from HTML • Create components to be used anywhere
46. @shayhowe Modular HTML & CSS AVOID PARENT DEPENDENCY Bad .feat-­‐box  {    background:  #eee; } article  .feat-­‐box  {    background:  #fff; } <article>    <div  class="feat-­‐box">...</div> </article>
47. @shayhowe Modular HTML & CSS AVOID PARENT DEPENDENCY Good .feat-­‐box  {    background:  #eee; } .feat-­‐box-­‐alt  {    background:  #fff; } <article>    <div  class="feat-­‐box-­‐alt">...</div> </article>
48. @shayhowe Modular HTML & CSS FAVOR SEMANTICS • Allow elements to adapt • Uses individual classes to extend modules
49. @shayhowe Modular HTML & CSS FAVOR SEMANTICS Bad .feat-­‐box  h2  {    color:  #f60;    font:  18px  Helvetica,  sans-­‐serif; } <div  class="feat-­‐box">    <h2>...</h2> </div>
50. @shayhowe Modular HTML & CSS FAVOR SEMANTICS Good .feat-­‐subhead  {    color:  #f60;    font:  18px  Helvetica,  sans-­‐serif; } <div  class="feat-­‐box">    <h2  class="feat-­‐subhead">...</h2> </div>
51. @shayhowe Modular HTML & CSS ACCOMMODATING CONTENT IN PRACTICE http://bit.ly/modular-html-css
52. @shayhowe Modular HTML & CSS ONWARD
53. Ships on the Roadstead by Willem van de Velde the Younger
54. @shayhowe Modular HTML & CSS APPROACH • Stop thinking about pages • Start thinking about components • Take visual inventory
55. @shayhowe Modular HTML & CSS THEMES • Decouple HTML and CSS • Separate presentation from layout • Separate content from container • Extend elements with classes
56. @shayhowe Modular HTML & CSS OUTCOMES • Maintainability! • Reusable code, less duplication • Flexibility and extensibility • Improved standards
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
58. @shayhowe Modular HTML & CSS THANK YOU! Questions? @shayhowe http://learn.shayhowe.com