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
2. @shayhowe Modular HTML & CSS SHAY HOWE shayhowe.com – @shayhowe
3. The Gust by Willem van de Velde the Younger
4. @shayhowe Modular HTML & CSS COMMON PROBLEMS • Websites have difficulty scaling • Code becomes brittle • Files and code bases begin to swell
5. @shayhowe Modular HTML & CSS WHAT’S WRONG • Best practices aren’t exactly best practices • Standards need to evolve
6. @shayhowe Modular HTML & CSS BEST BAD PRACTICES • Avoid extra elements • Avoid classes • Leverage type selectors • Leverage descendent selectors
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  {...}
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; }
9. @shayhowe Modular HTML & CSS BEST BAD PRACTICES Good .col-­‐1  {    width:  160px; } .col-­‐2  {    width:  280px; }
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
11. Parade of the Black Sea Fleet by Ivan Aivazovsky
12. @shayhowe Modular HTML & CSS MAINTAINABILITY Code must be... • Organized • Modular • Performant
13. @shayhowe Modular HTML & CSS ORGANIZATION
14. @shayhowe Modular HTML & CSS APPROACH • Stop thinking about pages • Start thinking about components • Take visual inventory
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
16. @shayhowe Modular HTML & CSS TECHNIQUE
17. @shayhowe Modular HTML & CSS MODULARITY
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
19. @shayhowe Modular HTML & CSS ASSEMBLE LAYOUT Bad .news  {    background:  #eee;    color:  #666;    margin:  0  10px;    width:  400px; } <div  class="news">...</div>
20. @shayhowe Modular HTML & CSS ASSEMBLE LAYOUT Good .grid-­‐4  {    margin:  0  10px;    width:  400px; } .feat-­‐box  {    background:  #eee;    color:  #666; } <div  class="grid-­‐4  feat-­‐box">...</div>
21. @shayhowe Modular HTML & CSS ACCOMMODATE CONTENT • Separate content from container • Stylize content regardless of container
22. @shayhowe Modular HTML & CSS ACCOMMODATE CONTENT Bad .alert  {    background:  #f2dede;    border-­‐radius:  10px;    color:  #b94a48;    padding:  10px  20px; } <div  class="alert">...</div>
23. @shayhowe Modular HTML & CSS ACCOMMODATE CONTENT Good .alert  {    border-­‐radius:  10px;    padding:  10px  20px; } .alert-­‐error  {    background:  #f2dede;    color:  #b94a48; } <div  class="alert  alert-­‐error">...</div>
24. @shayhowe Modular HTML & CSS AVOID PARENT DEPENDENCY • Remove parent container dependency • Decouple CSS from HTML • Create components to be used anywhere
25. @shayhowe Modular HTML & CSS AVOID PARENT DEPENDENCY Bad .feat-­‐box  {    background:  #eee; } article  .feat-­‐box  {    background:  #fff; } <article>    <div  class="feat-­‐box">...</div> </article>
26. @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>
27. @shayhowe Modular HTML & CSS FAVOR SEMANTICS • Allow elements to adapt • Uses individual classes to extend modules
28. @shayhowe Modular HTML & CSS FAVOR SEMANTICS Bad .feat-­‐box  h2  {    color:  #f60;    font:  18px  Helvetica,  sans-­‐serif; } <div  class="feat-­‐box">    <h2>...</h2> </div>
29. @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>
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
31. @shayhowe Modular HTML & CSS
32. @shayhowe Modular HTML & CSS WATCH SPECIFICITY • Be explicit • Keep specificity low • Never use IDs or !important • Avoid nested selectors (#main  .spotlight  strong  span)
33. @shayhowe Modular HTML & CSS WATCH SPECIFICITY Bad #primary  #main  div.gallery  {    text-­‐transform:  uppercase; } #primary  #main  div.gallery  figure.media  {    background:  #ccc; }
34. @shayhowe Modular HTML & CSS WATCH SPECIFICITY Good .gallery  {    text-­‐transform:  uppercase; } .gallery-­‐media  {    background:  #ccc; }
35. @shayhowe Modular HTML & CSS USE CLASSES • Write understandable class names • Avoid unnecessary nesting • Use same strength specificity
36. @shayhowe Modular HTML & CSS USE CLASSES Bad .feat-­‐box  .callout  .pr  {    font-­‐size:  12px; } .feat-­‐box  .callout  .pr  .un  {    color:  #39f; }
37. @shayhowe Modular HTML & CSS USE CLASSES Good .feat-­‐box  .price  {    font-­‐size:  12px; } .feat-­‐box  .unit  {    color:  #39f; }
38. @shayhowe Modular HTML & CSS USE CLASSES Bad .btn.large  {    font-­‐size:  24px;        padding:  15px  30px; } <div  class="btn  large">...</div>
39. @shayhowe Modular HTML & CSS USE CLASSES Good .btn-­‐large  {    font-­‐size:  24px;    padding:  15px  30px; } <div  class="btn-­‐large">...</div>
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
41. @shayhowe Modular HTML & CSS PERFORMANCE
42. @shayhowe Modular HTML & CSS REUSE CODE • Do not duplicate code • Remove old code • Defer loading subsequent styles
43. @shayhowe Modular HTML & CSS REUSE CODE Bad .news  {    background:  #eee;    color:  #666; } .social  {    background:  #eee;    color:  #666; }
44. @shayhowe Modular HTML & CSS REUSE CODE Good .news, .social  {    background:  #eee;    color:  #666; } Better .feat-­‐box  {    background:  #eee;    color:  #666; }
45. @shayhowe Modular HTML & CSS MINIMIZE REQUEST • Combine like files (CSS & JS) • Use image sprites • Leverage data URIs • Icon fonts
46. @shayhowe Modular HTML & CSS IMAGE SPRITES <span  class="icon  i-­‐twitter">...</span> <span  class="icon  i-­‐facebook">...</span> .icon  {    background:  url("icons.png")  0  0  no-­‐repeat; } .i-­‐twitter  {    background-­‐position:  0  -­‐16px; } .i-­‐facebook  {    background-­‐position:  0  -­‐32px; }
47. @shayhowe Modular HTML & CSS DATA URIS HTML <img  height="100"  width="660"  alt="Pattern"   src="data:imagepng;base64,..."> CSS .pattern  {    background:  url("data:imagepng;base64,...")          repeat; }
48. @shayhowe Modular HTML & CSS COMPRESS & CACHE FILES • Utilize Gzip compression • Losslessly compress images • Cache common files
49. COMPRESS & CACHE FILES
50. @shayhowe Modular HTML & CSS COMPRESS & CACHE FILES
51. @shayhowe Modular HTML & CSS COMPRESS & CACHE FILES Original 455kb Optimized 401kb
52. Ships on the Roadstead by Willem van de Velde the Younger
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
55. @shayhowe Modular HTML & CSS THANK YOU! Questions? @shayhowe http://learn.shayhowe.com http://bit.ly/mod-html-css