Stop writing css for yourself and start writing it for other people

Css preprocessors, css systems, componentization, and modern front-end practices.

A little talk I did at Refresh Pittsburgh on April 2, 2013.

Transcript

1. S T O P WR I T I N G C S S F O R Y O U R S E L F A N D S T A R T WR I T I N G I T F O R O T H E R P E O P L E .
2. Wh o I a m R o b Wi e r z b o w s k i @ r o b w i e r z b o w s k i L i k e s b u i l d i n g t o o l s , t h i n k i n g a b o u t h o w w e b p r o d u c t s fi t t o g e t h e r . C o n t e n t s t r a t e g y , I A , f r o n t - e n d a r c h e t e c t u r e a n d d e v e l o p me n t , S a s s a n d C o mp a s s . O r g a n i z e s @ S a s s y P g h w i t h We l c h " @ x i w c x " C a n a v a n . e x - D r u p a l , p r e - R u b e x - D r u p a l , p r e - R u b y .
3. A L i t t l e B a c k g r o u n d .
4. A L i t t l e B a c k g r o u n d . WH A T A R E P R E P R O C E S S O R S ?
5. A L i t t l e B a c k g r o u n d . P R E P R O C E S S O R S A D D S I MP L E P R O G R A MA T I C C O N C E P T S T O C S S
6. A L i t t l e B a c k g r o u n d . $ V A R I A B L E S
7. A L i t t l e B a c k g r o u n d . $ V A R I A B L E S L O G I C ( i f t h i s , t h e n )
8. A L i t t l e B a c k g r o u n d . $ V A R I A B L E S L O G I C ( i f t h i s , t h e n ) F U N C T I O N S ( r e t u r n a v a l u e )
9. A L i t t l e B a c k g r o u n d . $ V A R I A B L E S L O G I C ( i f t h i s , t h e n ) F U N C T I O N S ( r e t u r n a v a l u e ) MI X I N S ( b u n d l e s o f c s s r u l e s )
10. Wr i t e c o d e s i mi l a r t o c s s .
11. S e n d i t t h r o u g h t h e p r e p r o c e s s o r .
12. A n d o u t p o p s c o mp i l e d , v a n i l l a c s s .
15. @ S a s s y P g h
16. Wh a t w e ’ r e g o i n g t o t a l k a b o u t .
17. Wh a t w e ’ r e g o i n g t o t a l k a b o u t . WH Y ?
20. P r e p r o c e s s o r s a r e t h e mi s s i n g p i e c e o f a t r u l y mo d e r n c s s a r c h i t e c t u r e .
21. T h e y a l l o w u s t o :
22. T h e y a l l o w u s t o : Wh a t w e ’ r e g o i n g t o t a l k a b o u t . S T O P A U T H O R I N G S T Y L E S H E E T S , T h e y a l l o w u s t o :
23. T h e y a l l o w u s t o : Wh a t w e ’ r e g o i n g t o t a l k a b o u t . S T O P A U T H O R I N G S T Y L E S H E E T S , S T A R T A U T H O R I N G C S S S Y S T E MS T h e y a l l o w u s t o :
24. I ’ m g o i n g t o s h o w y o u h o w .
25. T h i s i s a s t y l e s h e e t .
27. P R E P R O C E S S O R S G I V E O U R C S S ME A N I N G
28. { }
29. { }
32. P R E P R O C E S S O R S G I V E U S A B S T R A C T I O N
33. P R E P R O C E S S O R S G I V E U S A B S T R A C T I O N A N D R E U S A B I L I T Y
48. P R E P R O C E S S O R S G I V E U S MA I N T A I N A B I L I T Y
52. C r a p p y o l d c l e a r fi x .
53. G l o r i o u s n e w Mi c r o C l e a r fi x .
54. P R E P R O C E S S O R S G I V E U S C O MP A T I B I L I T Y
55. P R E P R O C E S S O R S G I V E U S C O MP A T I B I L I T Y R E U S A B I L I T Y E V E R Y WH E R E
56. P r e p r o c e s s o r f u n c t i o n s , mi x i n s , v a r i a b l e s , u n l i k e c s s c l a s s e s , a r e n o t t i e d t o y o u r h t ml .
57. P r e p r o c e s s o r f u n c t i o n s , mi x i n s , v a r i a b l e s , u n l i k e c s s c l a s s e s , a r e n o t t i e d t o y o u r h t ml . T h e y ’ r e a n e w l e v e l o f a b s t r a c t i o n b e t w e e n c s s r u l e s a n d h t ml .
67. C o d e w r i t t e n w i t h a p r e p r o c e s s o r i s t r u l y r e u s a b l e .
68. C o d e w r i t t e n w i t h a p r e p r o c e s s o r i s t r u l y r e u s a b l e . T h e y s e p a r a t e r e p e a t a b l e s t y l e s f r o m c s s s e l e c t o r s , a n d f r o m h t ml .
69. C o d e w r i t t e n w i t h a p r e p r o c e s s o r i s t r u l y r e u s a b l e . T h e y s e p a r a t e r e p e a t a b l e s t y l e s f r o m c s s s e l e c t o r s , a n d f r o m h t ml . T h e y o n l y o u t p u t c o d e w h e n y o u c a l l t h e m.
70. B u t i s n ’ t c s s r e u s a b l e ?
71. B u t i s n ’ t c s s r e u s a b l e ? N O O O O .
72. WE C A N B U I L D T O O L S
73. WE C A N B U I L D T O O L S L I B R A R I E S
74. “ We ’ r e s e e i n g t h e f o c u s s h i f t f r o m v a l u i n g t r i v i a t o v a l u i n g t o o l s . ” R e b e c c a Mu r p h e y A b a s e l i n e f o r f r o n t e n d d e v e l o p e r s
75. WH Y Y O U S H O U L D O P E N S O U R C E , A N D T H E F U T U R E O F C O MP O N E N T I Z A T I O N
76. O p e n S o u r c e
77. O p e n S o u r c e WH Y A R E T H E S E P R O J E C T S S O G O O D ?
78. O p e n S o u r c e WH Y A R E T H E S E P R O J E C T S S O G O O D ? B E C A U S E WE A L L U S E T H E M.
79. P r e f e r a b l y , c o mp o n e n t s d o n ' t l i v e o n l y a c r o s s y o u r p r o j e c t s — t h e y l i v e a c r o s s a n u mb e r o f t a l e n t e d d e v e l o p e r ' s p r o j e c t s .
80. T h e c o r o l l a r y :
81. T h e c o r o l l a r y : U S E O T H E R P E O P L E ’ S WO R K .
82. T h e c o r o l l a r y : U S E O T H E R P E O P L E ’ S WO R K . T H I S WI L L MA K E Y O U A B E T T E R D E V E L O P E R .
83. O K , l e t ’ s b r i n g i t a l l t o g e t h e r .
84. O K , l e t ’ s b r i n g i t a l l t o g e t h e r . G E T T I N G R E A L WI T H C O MP O N E N T I Z A T I O N
85. “ T h e k e y t o b u i l d i n g a l a r g e w e b a p p i s t o n o t c o n s t r u c t a l a r g e w e b a p p . I t ' s b r e a k i n g i t u p i n t o s ma l l l i b r a r i e s a n d p a r t s . ” P a u l I r i s h
86. A c o mp o n e n t i s a s ma l l , w i d e l y r e u s a b l e , s e l f c o n t a i n e d b i t o f c o d e t h a t c a n b e u s e d a s a b u i l d i n g b l o c k i n a s i t e o r a p p l i c a t i o n .
87. P r e p r o c e s s o r s l e t u s c r e a t e s ma l l , w i d e l y r e u s a b l e , s e l f c o n t a i n e d b i t s o f c s s t h a t c a n b e u s e d a s a b u i l d i n g b l o c k i n a s i t e o r a p p l i c a t i o n .
88. I n t h e f u t u r e
89. I n t h e f u t u r e R I G H T N O W p e o p l e a r e b u i l d i n g s i t e s a n d a p p l i c a t i o n s w i t h c o mp o n e n t s .
90. Mo s t p r e p r o c e s s o r s h a v e a n e x t e n s i o n l i b r a r y a n d p a c k a g e ma n a g e r y o u c a n d o w n l o a d a n d u p d a t e w i t h e a s i l y .
91. Mo s t p r e p r o c e s s o r s h a v e a n e x t e n s i o n l i b r a r y a n d p a c k a g e ma n a g e r y o u c a n d o w n l o a d a n d u p d a t e w i t h e a s i l y . g e m i n s t a l l s a s s g e m i n s t a l l c o m p a s s g e m i n s t a l l s i n g u l a r i t y g e m u p d a t e s i n g u l a r i t y
92. B u t I t h i n k t h e r e a l f u t u r e i s a p p l i c a t i o n f r a me w o r k i n g t o o l s a n d “ a g n o s t i c ” w e b p a c k a g e ma n a g e r s :
93. B u t I t h i n k t h e r e a l f u t u r e i s a p p l i c a t i o n f r a me w o r k i n g t o o l s a n d “ a g n o s t i c ” w e b p a c k a g e ma n a g e r s :
94. I n c o n c l u s i o n .
95. I n c o n c l u s i o n . P R E P R O C E S S O R S G I V E Y O U MO R E T H A N P R E F I X I N G
96. I n c o n c l u s i o n . T H E Y ’ R E A K E Y P I E C E O F MO D E R N F R O N T - E N D D E V E L O P ME N T
97. 1 . S t a r t u s i n g a p r e p r o c e s s o r .
98. 1 . S t a r t u s i n g a p r e p r o c e s s o r . 2 . C o mp o n e n t i z e c s s p a t t e r n s .
99. 1 . S t a r t u s i n g a p r e p r o c e s s o r . 2 . C o mp o n e n t i z e c s s p a t t e r n s . 3 . E n j o y y o u r n e w u n d e r s t a n d a b l e , r e u s a b l e , ma i n t a i n a b l e c s s s y s t e m.
100. 1 . S t a r t u s i n g a p r e p r o c e s s o r . 2 . C o mp o n e n t i z e c s s p a t t e r n s . 3 . E n j o y y o u r n e w u n d e r s t a n d a b l e , r e u s a b l e , ma i n t a i n a b l e c s s s y s t e m. 4 . R e l e a s e s o me c o d e . S h a r e , d i s c u s s , r e fi n e , c o n t r i b u t e . B e c o me a b e t t e r d e v e l o p e d e v e l o p e r , a n d ma k e u s b e t t e r t o o .
101. T h i s i s a s t y l e s h e e t :
103. T h i s i s a c s s s y s t e m:
111. @ r o b w i e r z b o w s k i