Pattern Placeholders

Thinking about the ways of using @extend and placeholders.

Transcript

1. %Pattern Placeholders Jaime Caballero - LDN Sass #2 GIF Source: giphy.com 21/01/2015
3. hi, I’m jaime
4. jamie james jiame jaime
7. • spanish • frontend architect • sass lover
11. this is me when I’m using Sass
13. this is me when somebody hands me over vanilla CSS
15. me gusta • SMACSS • OOCSS • DRYCSS • BEM
16. I worry a lot about keeping my CSS scalable and organised
17. this is me going through my CSS workflow
19. let’s talk about @extend 1.
20. @extend combines selectors
21. .foo
22. .foo{ color: black; }
23. .another
24. .another{ color: black; }
25. .another{ @extend .foo; }
26. .another{ @extend .foo; background: white; }
27. .foo, .another{ color: black; } .another{
 background: white;
 }
28. combining selectors means no repeating CSS chunks
29. this is me when I discovered @extend
31. BUT!
32. we can’t extend without a selector, can we?
33. .foo{ color: black; }
35. introducing placeholder selectors 2.
36. if you don’t @extend them, they will not be in the CSS
37. .foo
38. %foo
39. %foo{ color: black; }
40. you can have anything in one place, ready to use
41. BUT!
42. i’m not here to say @extend FTW
44. all this has its limitations
45. you can’t extend in a @media query
46. %foo{ color: black; } @media (min-width: 20em){ .another{ @extend %foo; } }
47. you can easily get 
 loads of selectors
48. a.icon-listen-bl:hover, .event-related .box-title a:hover, .category-related .box-title a:hover, .readmore a:hover, .footer a:hover, .pagination a:hover, .news a:hover, .latest-tweet .date a:hover, .feature .box-header .title a:hover, .caption .title a:hover, .full-agenda-link a:hover,
49. that was 46 selectors for 1 property
50. i like to call this aggressive extending
51. this is me when i see any of it
53. we are the problem 3.
54. people are complaining
56. BUT!
57. we are the ones extending the wrong way
58. we have to think outside the box
59. embrace these limitations
60. you can’t extend in a @media query?
61. but you can put a media query in a placeholder
62. %foo{ color: black; } @media (min-width: 20em){ .another{ @extend .foo; } }
63. %foo{ }
64. %foo{ @media (min-width: 20em){ } }
65. %foo{ @media (min-width: 20em){ color: black; } }
66. %foo{ @media (min-width: 20em){ color: black; } } .another{ @extend %foo; }
67. @media (min-width: 20em){ .another{ color: black; } }
68. implement placeholder patterns
69. %nav-fixed{…} %nav-offcanvas{…} %nav-footeranch{…} .nav{
 @extend %nav-fixed;
 }
70. %nav-fixed{…} %nav-offcanvas{…} %nav-footeranch{…} .nav{
 @extend %nav-offcanvas;
 }
71. %nav-fixed{…} %nav-offcanvas{…} %nav-footeranch{…} .nav{
 @extend %nav-footeranch;
 }
72. placeholders for everything
73. %foo{…} %foo--good{…} %foo--bad{…}
74. combine them
75. .Foo.is-good{
 @extend %foo; @extend %foo--good;
 }
76. separate them
77. .Foo{ @extend %foo; } .is-good{ @extend %foo--good;
 }
78. BEM? SUITCSS?
 whatever works
80. placeholder patterns add another abstraction layer
81. you can create naming-agnostic CSS systems
82. when you only use placeholders
83. it’s easier to notice a repeated/wrong pattern
84. .button--action{
 @extend %btn; @extend %btn--big; @extend %bg--green;
 }
85. BUT!
86. what about agressive extending
 ?
87. agressive extending: fixed 4.
88. what if we could 
 limit the amount of selectors
 ?
90. actually, we need to set a selector budget
91. a warning when we don’t extend properly
92. a weekend after 
 (last weekend)
93. this is me after last weekend
95. jaicab.com/ext/
96. the ext(); mixin sets a selector budget and warns you (@warn) when you are:
97. extending too much
98. extending the same pair (selector, placeholder)
 more than once
99. extending twice doesn’t affect your CSS, but it is a bad organisation practise
100. this is how it works
101. &
102. html, .foo, .another
103. $selectors: &;
104. getting started
105. bower install ext
106. @import the _ext.scss file into your project
107. set your selector budget
108. $ext-budget: ( total: 15 );
109. it only works with placeholders
110. use ext(placeholder);
111. %foo{ color: black; } .another{ @include ext(foo); }
112. go nuts!
115. is @warn not enough?
116. enable debug mode
117. add ext-debug(); after all your
 @imports
120. set a targeted budget
121. $ext-budget: ( total: 15, heading: 12 );
122. want to see more? change the options
123. $ext-options: ( warn-over: true, warn-duplicates: true, over-only: true, show-all: true );
125. there’s much more
126. but enough for today
128. go to 
 github.com/jaicab/ext/
130. play with it open an issue send me a pull request fire me a tweet
131. thank you! jaicab.com/ext/ @jaicab_ Links: http://bit.ly/1JeTmtr