Avoiding the Threat of Awful CSS

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