Your CSS Code Needs an Architect

Presented at TYPO3 Developer Days 2015

Transcript

1. Your CSS Code Needs an Architect by / Dmitri Pisarev @dimaip
2. Work and study in — first independant Christian Theological University in Russia Worked with TYPO3 since 2006 One year ago first installed Neos... And loved it! Neos contributor since then SFI.ru
3. PHP developer looking down on a frontender
5. < d i v c l a s s = " s u m m a r y " i d = " z e n ­ s u m m a r y " r o l e = " a r t i c l e " > < p > A d e m o n s t r a t i o n o f w h a t c a n b e a c c o m p l i s h e d t h r o u g h C S S ­ b a s e d d e s i g n . < / p > < / d i v >
6. Object- oriented CSS by Nicole Sullivan
7. Atomic Design
8. Testable CSS
9. “Semantic” class names?
10. Naming CSS Stuff Is Really Hard Functional class names Content­based class names Presentational class names < b u t t o n c l a s s = " p o s i t i v e ­ b u t t o n " > S e n d M e s s a g e < / b u t t o n > < b u t t o n c l a s s = " s u b m i t ­ b u t t o n " > S e n d M e s s a g e < / b u t t o n > < b u t t o n c l a s s = " g r e e n ­ b u t t o n " > S e n d M e s s a g e < / b u t t o n >
11. Block, Element, Modifier < d i v c l a s s = " B l o c k N a m e B l o c k N a m e ­ ­ m o d i f i e r " > < d i v c l a s s = " B l o c k N a m e ­ e l e m e n t N a m e " > < / d i v > < / d i v >
12. Join the session now!