Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modular HTML & CSS Turbo Workshop

Shay Howe
September 27, 2012

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.

Shay Howe

September 27, 2012
Tweet

More Decks by Shay Howe

Other Decks in Technology

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 COMMON PROBLEMS •

    Websites have difficulty scaling • Code becomes brittle • Files and code bases begin to swell
  5. @shayhowe & @darbyfrey Modular HTML & CSS WHAT’S WRONG •

    Best practices aren’t exactly best practices • Standards need to evolve
  6. @shayhowe & @darbyfrey Modular HTML & CSS BEST BAD PRACTICES

    • Avoid extra elements • Avoid classes • Leverage type selectors • Leverage descendent selectors
  7. @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  {...}
  8. @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; }
  9. @shayhowe & @darbyfrey Modular HTML & CSS BEST BAD PRACTICES

    Good .col-­‐1  {    width:  160px; } .col-­‐2  {    width:  280px; }
  10. @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
  11. @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
  12. @shayhowe & @darbyfrey Modular HTML & CSS WATCH SPECIFICITY •

    Be explicit • Keep specificity low • Never use IDs or !important • Avoid nested selectors (#main  .spotlight  strong  span)
  13. @shayhowe & @darbyfrey Modular HTML & CSS WATCH SPECIFICITY Bad

    #primary  #main  div.gallery  {    text-­‐transform:  uppercase; } #primary  #main  div.gallery  figure.media  {    background:  #ccc; }
  14. @shayhowe & @darbyfrey Modular HTML & CSS WATCH SPECIFICITY Good

    .gallery  {    text-­‐transform:  uppercase; } .gallery-­‐media  {    background:  #ccc; }
  15. @shayhowe & @darbyfrey Modular HTML & CSS MAINTAINABILITY Code must

    be... • Organized • Modular • Performant
  16. @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
  17. @shayhowe & @darbyfrey Modular HTML & CSS REUSE CODE •

    Do not duplicate code • Remove old code • Defer loading subsequent styles
  18. @shayhowe & @darbyfrey Modular HTML & CSS REUSE CODE Bad

    .news  {    background:  #eee;    color:  #666; } .social  {    background:  #eee;    color:  #666; }
  19. @shayhowe & @darbyfrey Modular HTML & CSS REUSE CODE Good

    .news, .social  {    background:  #eee;    color:  #666; } Better .feat-­‐box  {    background:  #eee;    color:  #666; }
  20. @shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES •

    Write understandable class names • Avoid unnecessary nesting • Use same strength specificity
  21. @shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES Bad

    .feat-­‐box  .callout  .pr  {    font-­‐size:  12px; } .feat-­‐box  .callout  .pr  .un  {    color:  #39f; }
  22. @shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES Good

    .feat-­‐box  .price  {    font-­‐size:  12px; } .feat-­‐box  .unit  {    color:  #39f; }
  23. @shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES Bad

    .btn.large  {    font-­‐size:  24px;        padding:  15px  30px; } <div  class="btn  large">...</div>
  24. @shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES Good

    .btn-­‐large  {    font-­‐size:  24px;    padding:  15px  30px; } <div  class="btn-­‐large">...</div>
  25. @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
  26. @shayhowe & @darbyfrey Modular HTML & CSS ABSTRACT STRUCTURE Bad

    .news  {    background:  #eee;    color:  #666;    margin:  0  10px;    width:  400px; } <div  class="news">...</div>
  27. @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>
  28. @shayhowe & @darbyfrey Modular HTML & CSS TRANSPARENTIZE ELEMENTS •

    Stylize elements to be transparent • Keep visual properties apart from layout properties
  29. @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>
  30. @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>
  31. @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
  32. @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; }
  33. @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; }
  34. @shayhowe & @darbyfrey Modular HTML & CSS ASSEMBLING LAYOUT IN

    PRACTICE http://bit.ly/modular-html-css
  35. @shayhowe & @darbyfrey Modular HTML & CSS SEPARATE CONTENT •

    Separate content from container • Stylize content regardless of container
  36. @shayhowe & @darbyfrey Modular HTML & CSS SEPARATE CONTENT Bad

    .alert  {    background:  #f2dede;    border-­‐radius:  10px;    color:  #b94a48;    padding:  10px  20px; } <div  class="alert">...</div>
  37. @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>
  38. @shayhowe & @darbyfrey Modular HTML & CSS AVOID PARENT DEPENDENCY

    • Remove parent container dependency • Decouple CSS from HTML • Create components to be used anywhere
  39. @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>
  40. @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>
  41. @shayhowe & @darbyfrey Modular HTML & CSS FAVOR SEMANTICS •

    Allow elements to adapt • Uses individual classes to extend modules
  42. @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>
  43. @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>
  44. @shayhowe & @darbyfrey Modular HTML & CSS SCSS • CSS

    preprocessor • Extension of CSS3 • Compiled using Ruby • Adds nested rules, variables, mixins, selector inheritance, and more
  45. @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; }
  46. @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
  47. @shayhowe & @darbyfrey Modular HTML & CSS COMPASS • Built

    on top of Sass • Includes reusable patterns • Provides cross browser CSS3 mixins
  48. @shayhowe & @darbyfrey Modular HTML & CSS SCOUT APP •

    GUI for compiling Sass and Compass • Available for both Mac and Windows
  49. @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)
  50. @shayhowe & @darbyfrey Modular HTML & CSS PARTIALS • Must

    begin with an underscore, _ • Must have a file extension of .scss, not .css.scss
  51. @shayhowe & @darbyfrey Modular HTML & CSS IMPORTS workshop.css.scss //

     Compass @import  "compass/css3"; //  Settings @import  "settings/variables"; //  Base @import  "base/layout"; ...
  52. @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
  53. @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; }
  54. @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
  55. @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; }
  56. @shayhowe & @darbyfrey Modular HTML & CSS PLACEHOLDERS • Similar

    to extends • Selector is assigned with a percentage sign • Extended selector is not output, only the styles
  57. @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; }
  58. @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
  59. @shayhowe & @darbyfrey Modular HTML & CSS MIXINS SCSS Syntax

    @mixin  btn($color)  {      color:  $color; } .btn  {    @mixin  btn(#f60); } Compiled CSS .btn  {    color:  #f60; }
  60. @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
  61. @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; }
  62. @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
  63. @shayhowe & @darbyfrey Modular HTML & CSS PARENT SELECTOR SCSS

    Syntax a  {    color:  #8ec63f;    &:hover  {        color:  #f7941d;    } } Compiled CSS a  {    color:  #8ec63f; } a:hover  {    color:  #f7941d; }
  64. @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 #{...}
  65. @shayhowe & @darbyfrey Modular HTML & CSS INTERPOLATION SCSS Syntax

    $logo:  twitter; $offset:  left; .#{$logo}  {    #{$offset}:  20px; } Compiled CSS .twitter  {    left:  20px; }
  66. @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
  67. @shayhowe & @darbyfrey Modular HTML & CSS APPROACH • Stop

    thinking about pages • Start thinking about components • Take visual inventory
  68. @shayhowe & @darbyfrey Modular HTML & CSS THEMES • Decouple

    HTML and CSS • Separate presentation from layout • Separate content from container • Extend elements with classes
  69. @shayhowe & @darbyfrey Modular HTML & CSS OUTCOMES • Maintainability!

    • Reusable code, less duplication • Flexibility and extensibility • Improved standards
  70. @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