Modular HTML & CSS Turbo 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. At the end of the workshop and after spending time writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.

Transcript

1. TACTICAL HTML & CSS MODULAR HTML & CSS TURBO WORKSHOP Shay Howe @shayhowe learn.shayhowe.com Darby Frey @darbyfrey darbyfrey.com
2. @shayhowe & @darbyfrey Modular HTML & CSS Shay Howe @shayhowe learn.shayhowe.com Darby Frey @darbyfrey darbyfrey.com
3. @shayhowe & @darbyfrey Modular HTML & CSS 1. The Problem 2. Groundwork 3. Assembling Layout 4. Accommodating Content 5. Turbo with SCSS 6. Onward OUR SCHEDULE
4. @shayhowe & @darbyfrey Modular HTML & CSS THE PROBLEM
5. The Gust by Willem van de Velde the Younger
6. @shayhowe & @darbyfrey Modular HTML & CSS COMMON PROBLEMS • Websites have difficulty scaling • Code becomes brittle • Files and code bases begin to swell
7. @shayhowe & @darbyfrey Modular HTML & CSS WHAT’S WRONG • Best practices aren’t exactly best practices • Standards need to evolve
8. @shayhowe & @darbyfrey Modular HTML & CSS BEST BAD PRACTICES • Avoid extra elements • Avoid classes • Leverage type selectors • Leverage descendent selectors
9. @shayhowe & @darbyfrey 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 & @darbyfrey 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 & @darbyfrey Modular HTML & CSS BEST BAD PRACTICES Good .col-­‐1  {    width:  160px; } .col-­‐2  {    width:  280px; }
12. @shayhowe & @darbyfrey 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 & @darbyfrey 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 & @darbyfrey Modular HTML & CSS
15. @shayhowe & @darbyfrey Modular HTML & CSS WATCH SPECIFICITY • Be explicit • Keep specificity low • Never use IDs or !important • Avoid nested selectors (#main  .spotlight  strong  span)
16. @shayhowe & @darbyfrey Modular HTML & CSS WATCH SPECIFICITY Bad #primary  #main  div.gallery  {    text-­‐transform:  uppercase; } #primary  #main  div.gallery  figure.media  {    background:  #ccc; }
17. @shayhowe & @darbyfrey 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 & @darbyfrey Modular HTML & CSS MAINTAINABILITY Code must be... • Organized • Modular • Performant
20. @shayhowe & @darbyfrey 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 & @darbyfrey Modular HTML & CSS GROUNDWORK
22. @shayhowe & @darbyfrey Modular HTML & CSS REUSE CODE • Do not duplicate code • Remove old code • Defer loading subsequent styles
23. @shayhowe & @darbyfrey Modular HTML & CSS REUSE CODE Bad .news  {    background:  #eee;    color:  #666; } .social  {    background:  #eee;    color:  #666; }
24. @shayhowe & @darbyfrey Modular HTML & CSS REUSE CODE Good .news, .social  {    background:  #eee;    color:  #666; } Better .feat-­‐box  {    background:  #eee;    color:  #666; }
25. @shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES • Write understandable class names • Avoid unnecessary nesting • Use same strength specificity
26. @shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES Bad .feat-­‐box  .callout  .pr  {    font-­‐size:  12px; } .feat-­‐box  .callout  .pr  .un  {    color:  #39f; }
27. @shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES Good .feat-­‐box  .price  {    font-­‐size:  12px; } .feat-­‐box  .unit  {    color:  #39f; }
28. @shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES Bad .btn.large  {    font-­‐size:  24px;        padding:  15px  30px; } <div  class="btn  large">...</div>
29. @shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES Good .btn-­‐large  {    font-­‐size:  24px;    padding:  15px  30px; } <div  class="btn-­‐large">...</div>
30. @shayhowe & @darbyfrey Modular HTML & CSS ASSEMBLING LAYOUT
31. @shayhowe & @darbyfrey 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 & @darbyfrey Modular HTML & CSS ABSTRACT STRUCTURE Bad .news  {    background:  #eee;    color:  #666;    margin:  0  10px;    width:  400px; } <div  class="news">...</div>
33. @shayhowe & @darbyfrey 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 & @darbyfrey Modular HTML & CSS TRANSPARENTIZE ELEMENTS • Stylize elements to be transparent • Keep visual properties apart from layout properties
35. @shayhowe & @darbyfrey 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 & @darbyfrey 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 & @darbyfrey 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 & @darbyfrey 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 & @darbyfrey 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 & @darbyfrey Modular HTML & CSS ASSEMBLING LAYOUT IN PRACTICE http://bit.ly/modular-html-css
41. @shayhowe & @darbyfrey Modular HTML & CSS ACCOMMODATING CONTENT
42. @shayhowe & @darbyfrey Modular HTML & CSS SEPARATE CONTENT • Separate content from container • Stylize content regardless of container
43. @shayhowe & @darbyfrey Modular HTML & CSS SEPARATE CONTENT Bad .alert  {    background:  #f2dede;    border-­‐radius:  10px;    color:  #b94a48;    padding:  10px  20px; } <div  class="alert">...</div>
44. @shayhowe & @darbyfrey 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 & @darbyfrey Modular HTML & CSS AVOID PARENT DEPENDENCY • Remove parent container dependency • Decouple CSS from HTML • Create components to be used anywhere
46. @shayhowe & @darbyfrey 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 & @darbyfrey 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 & @darbyfrey Modular HTML & CSS FAVOR SEMANTICS • Allow elements to adapt • Uses individual classes to extend modules
49. @shayhowe & @darbyfrey 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 & @darbyfrey 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 & @darbyfrey Modular HTML & CSS ACCOMMODATING CONTENT IN PRACTICE http://bit.ly/modular-html-css
52. @shayhowe & @darbyfrey Modular HTML & CSS TURBO WITH SCSS
53. @shayhowe & @darbyfrey Modular HTML & CSS SETUP
54. @shayhowe & @darbyfrey Modular HTML & CSS SCSS • CSS preprocessor • Extension of CSS3 • Compiled using Ruby • Adds nested rules, variables, mixins, selector inheritance, and more
55. @shayhowe & @darbyfrey Modular HTML & CSS SCSS SCSS Syntax .new  {    color:  #f60;    .item  {        font-­‐size:  24px;    } } Compiled CSS .new  {    color:  #f60; } .new  .item  {    font-­‐size:  24px; }
56. @shayhowe & @darbyfrey Modular HTML & CSS SCSS VS. SASS SCSS Syntax .new  {    color:  #f60;    .item  {        font-­‐size:  24px;    } } Sass Syntax .new    color:  #f60    .item        font-­‐size:  24px
57. @shayhowe & @darbyfrey Modular HTML & CSS COMPASS • Built on top of Sass • Includes reusable patterns • Provides cross browser CSS3 mixins
58. @shayhowe & @darbyfrey Modular HTML & CSS SCOUT APP • GUI for compiling Sass and Compass • Available for both Mac and Windows
59. @shayhowe & @darbyfrey Modular HTML & CSS SETUP IN PRACTICE http://bit.ly/modular-html-css
60. @shayhowe & @darbyfrey Modular HTML & CSS ORGANIZATION
61. @shayhowe & @darbyfrey Modular HTML & CSS TECHNIQUE Settings • Utility styles (Extends, Mixins, Variables) Base • Core styles for entire site (Layout, Typography) Components • UI concepts & design patterns (Buttons, List, Navigation) Modules • Business logic (Aside, Header, Footer)
62. @shayhowe & @darbyfrey Modular HTML & CSS TECHNIQUE
63. @shayhowe & @darbyfrey Modular HTML & CSS PARTIALS • Must begin with an underscore, _ • Must have a file extension of .scss, not .css.scss
64. @shayhowe & @darbyfrey Modular HTML & CSS IMPORTS workshop.css.scss //  Compass @import  "compass/css3"; //  Settings @import  "settings/variables"; //  Base @import  "base/layout"; ...
65. @shayhowe & @darbyfrey Modular HTML & CSS ORGANIZATION IN PRACTICE http://bit.ly/modular-html-css
66. @shayhowe & @darbyfrey Modular HTML & CSS SETTINGS
67. @shayhowe & @darbyfrey Modular HTML & CSS VARIABLES • Allow common values to be shared • Assigned with a dollar sign, name, colon, and value • May be a number, string, boolean, null, or multiple comma separated values
68. @shayhowe & @darbyfrey Modular HTML & CSS VARIABLES SCSS Syntax $font-­‐base:  14px; $sans-­‐serif:  "Open  Sans",  sans-­‐serif; p  {    font:  $font-­‐base  $sans-­‐serif; } Compiled CSS p  {    font:  14px  "Open  Sans",  sans-­‐serif; }
69. @shayhowe & @darbyfrey Modular HTML & CSS EXTENDS • Share common styles without duplicating them • Keep code weight low • Generates detailed selectors • Assigned with the @extend  rule followed by the selector
70. @shayhowe & @darbyfrey Modular HTML & CSS EXTENDS SCSS Syntax .alert  {    border-­‐radius:  10px; } .alert-­‐error  {    @extend  .alert;    color:  #b94a48; } .alert-­‐success  {    @extend  .alert;    color:  #468847; } Compiled CSS .alert, .alert-­‐error, .alert-­‐success  {    border-­‐radius:  10px; } .alert-­‐error  {    color:  #b94a48; } .alert-­‐success  {    color:  #468847; }
71. @shayhowe & @darbyfrey Modular HTML & CSS PLACEHOLDERS • Similar to extends • Selector is assigned with a percentage sign • Extended selector is not output, only the styles
72. @shayhowe & @darbyfrey Modular HTML & CSS PLACEHOLDERS SCSS Syntax %alert  {    border-­‐radius:  10px; } .alert-­‐error  {    @extend  %alert;    color:  #b94a48; } .alert-­‐success  {    @extend  %alert;    color:  #468847; } Compiled CSS .alert-­‐error, .alert-­‐success  {    border-­‐radius:  10px; } .alert-­‐error  {    color:  #b94a48; } .alert-­‐success  {    color:  #468847; }
73. @shayhowe & @darbyfrey Modular HTML & CSS MIXINS • Share similar styles based off given arguments • Duplicates properties, providing different values • Assigned with the @mixin  rule followed by the name and arguments
74. @shayhowe & @darbyfrey Modular HTML & CSS MIXINS SCSS Syntax @mixin  btn($color)  {      color:  $color; } .btn  {    @mixin  btn(#f60); } Compiled CSS .btn  {    color:  #f60; }
75. @shayhowe & @darbyfrey Modular HTML & CSS SETTINGS IN PRACTICE http://bit.ly/modular-html-css
76. @shayhowe & @darbyfrey Modular HTML & CSS REFACTOR
77. @shayhowe & @darbyfrey Modular HTML & CSS COMMENTS • Two different types of comments • Standard CSS comments as normal • Silent comments, assigned with two forward slashes, not compiled in the output
78. @shayhowe & @darbyfrey Modular HTML & CSS COMMENTS SCSS Syntax /*  Normal  comment  */ .awesome  {    color:  #3276b1; } //  Omitted  comment .very-­‐awesome  {    color:  #47a447; } Compiled CSS /*  Normal  comment  */ .awesome  {    color:  #3276b1; } .very-­‐awesome  {    color:  #47a447; }
79. @shayhowe & @darbyfrey Modular HTML & CSS PARENT SELECTOR • Add styles to a previous selector • Commonly used with pseudo classes • Assigned with an ampersand • May also be used as the key selector
80. @shayhowe & @darbyfrey Modular HTML & CSS PARENT SELECTOR SCSS Syntax a  {    color:  #8ec63f;    &:hover  {        color:  #f7941d;    } } Compiled CSS a  {    color:  #8ec63f; } a:hover  {    color:  #f7941d; }
81. @shayhowe & @darbyfrey Modular HTML & CSS INTERPOLATION • Occasionally SCSS need to be interpolated • Most commonly happens as part of a class name, property name, or inside a string plain text • Assigned by placing the value inside #{...}
82. @shayhowe & @darbyfrey Modular HTML & CSS INTERPOLATION SCSS Syntax $logo:  twitter; $offset:  left; .#{$logo}  {    #{$offset}:  20px; } Compiled CSS .twitter  {    left:  20px; }
83. @shayhowe & @darbyfrey Modular HTML & CSS REFACTOR IN PRACTICE http://bit.ly/modular-html-css
84. @shayhowe & @darbyfrey Modular HTML & CSS COMPILE
85. @shayhowe & @darbyfrey Modular HTML & CSS OUTPUT STYLES • SCSS has multiple output styles • Nested or expanded is best for development • Compact or compressed is best for production
86. @shayhowe & @darbyfrey Modular HTML & CSS COMPILE IN PRACTICE http://bit.ly/modular-html-css
87. @shayhowe & @darbyfrey Modular HTML & CSS ONWARD
88. Ships on the Roadstead by Willem van de Velde the Younger
89. @shayhowe & @darbyfrey Modular HTML & CSS APPROACH • Stop thinking about pages • Start thinking about components • Take visual inventory
90. @shayhowe & @darbyfrey Modular HTML & CSS THEMES • Decouple HTML and CSS • Separate presentation from layout • Separate content from container • Extend elements with classes
91. @shayhowe & @darbyfrey Modular HTML & CSS OUTCOMES • Maintainability! • Reusable code, less duplication • Flexibility and extensibility • Improved standards
92. @shayhowe & @darbyfrey Modular HTML & CSS WHAT’S NEXT Build a style guide • Twitter Bootstrap, Zurb Foundation Review methodologies • OOCSS, SMACSS Test your code • CSS Lint, Inspector, PageSpeed
93. @shayhowe & @darbyfrey Modular HTML & CSS THANK YOU! Questions? @shayhowe @darbyfrey