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

Avoiding the Threat of Awful CSS

Avoiding the Threat of Awful CSS

CSS: the very acronym sends shivers down the spine of the most hardened Web design veterans. Even for master pixel pushers who have worked with CSS for years, style sheets can quickly become unruly, unfriendly, and unmaintainable. In this session, you'll find out how to make your CSS more developer-friendly: we'll discuss patterns to cut down on duplication while maintaining flexibility and review whether CSS preprocessors are right for you and your project. All skill levels are welcome!

Af7acd01448753af3dfd648c3f5ea287?s=128

timgthomas

June 09, 2012
Tweet

Transcript

  1. Avoiding the Threat of Awful CSS

  2. Tim G. Thomas @timgthomas

  3. Senior Consultant @ Headspring (Work for us!)

  4. The Problem: Maintainability

  5. The Solution: Patterns!

  6. Developers! Developers! Developers! (Are Good at This)

  7. More Maintainable

  8. More Consistent

  9. Fewer Headaches

  10. But How?

  11. Two Steps

  12. Step 1: Layout First

  13. This is Easy*

  14. *Not Interesting (For This Talk)

  15. Step 2: Write Flexible CSS

  16. What makes CSS “"exible”?

  17. Flexible CSS is Purposeful

  18. Purpose: Site Branding

  19. Site Branding === “Global Styles”

  20. Global Styles use <elements>

  21. Global Styles button { background: #333; border: 1px solid #000;

    color: #fff; }
  22. Everything Else === “Component Styles”

  23. Component Styles use .classes

  24. Component Styles .contact-list { line-height: 2.0em; list-style: square; padding: 10px

    20px 0; }
  25. SMACSS(.com)

  26. Global Styles => “Base Styles”

  27. Component Styles => “Layouts” and “Modules”

  28. Layouts are Big Page Parts

  29. None
  30. Layouts in CSS .l-navigation { /* ... */ } .l-hero

    { /* ... */ } .l-featured { /* ... */ } .l-legal { /* ... */ }
  31. Layouts are Unique

  32. Modules are Smaller Parts

  33. None
  34. Modules in CSS .featured-list { /* ... */ } .featured-list

    .title { /* ... */ } .featured-list .item { /* ... */ }
  35. Modules are Designed for Reuse

  36. Modules are Designed for Relocation

  37. Flexible Selectors

  38. Flexible Selectors are Short

  39. Flexible Selectors: Short header > h1 #main .date span >

    em { /* Yuck. */ } .meaningful { /* Yum! */ }
  40. Flexible Selectors use Elements (for Globals)

  41. Flexible Selectors: Elements nav { /* ... */ } button

    { /* ... */ } input { /* ... */ } aside { /* ... */ }
  42. Flexible Selectors use Classes (for everything else)

  43. Flexible Selectors: Classes .messages { /* ... */ } .contacts

    { /* ... */ } .tasks { /* ... */ }
  44. Flexible Selectors DO NOT use IDs

  45. Flexible Selectors: IDs #im-not-flexible { /* :-( */ } .im-flexible

    { /* :-) */ }
  46. Flexible Selectors aren’t Shared with JavaScript

  47. Flexible Selectors: JavaScript $(‘.doSomething’).fadeIn(); .lookLikeSomething { /* ... */ }

  48. Flexible CSS is Meaningfully Named

  49. Meaningful Names: What Stu# Is

  50. Meaningful Names: NOT What Stu# Looks Like

  51. NOT Meaningfully Named .lp10 { } .red { } .big-font

    { }
  52. Meaningfully Named .emphasized-list { } .featured-products { } button.primary {

    }
  53. Flexible CSS is Logically Grouped

  54. Flexible CSS is LOGICALLY Grouped

  55. Logical Groups .green-border { /* Boo! Hiss! */ border: 1px

    solid #0f0; } .user-selected { /* Yay! */ border: 1px solid #f0f; }
  56. Logical Groups Have a Single Reason to Change

  57. Logical Groups DO Reduce Duplication

  58. Logical Groups MAY Contain Duplicate Styles

  59. How to Fix Duplication:

  60. How to Fix Duplication: Preprocessors!

  61. Preprocessors are Transpilers

  62. Preprocessors Turn This… .cohesive-group-a { border: 1px solid #f0f; color:

    #00f; font: 1.2em/2.4em Comic Sans; } .cohesive-group-b { border: 1px solid #f0f; color: #f00; font: 1.2em/2.4em Comic Sans; }
  63. …Into This: .shared-styles { border: 1px solid #f0f; font: 1.2em/2.4em

    Comic Sans; } .cohesive-group-a { .shared-styles(); color: #00f; } .cohesive-group-b { .shared-styles(); color: #f00; }
  64. Other Cool Stu#: Vendor Pre$xes! .scale(scale-amount) { -webkit-transform: scale(scale-amount); -moz-transform:

    scale(scale-amount); -ms-transform: scale(scale-amount); -o-transform: scale(scale-amount); transform: scale(scale-amount); }
  65. Other Cool Stu#: Vendor Pre$xes! .foo { .scale(0.8); } .bar

    { .scale(0.4); }
  66. My Favorite: Nesting! .book-list { .cover { .title { }

    .author { } } }
  67. My Favorite: Nesting! .book-list .cover .title { } .book-list .cover

    .author { }
  68. Preprocessors: LESS and SASS

  69. None
  70. None
  71. To Review

  72. Good CSS is Flexible

  73. Flexible CSS Means Patterns

  74. Flexible CSS Means Separation of Concerns

  75. Flexible CSS Is Helped By SMACSS

  76. Flexible CSS Is Helped By Preprocessors

  77. Above All: Good CSS is Possible!

  78. Above All: Good CSS is Easy!

  79. Above All: Good CSS is Fun!

  80. Thanks for Coming!

  81. Rate meh! http://spkr8.com/t/11651