3 Pillars of a Successful

CSS is like a bear cub. Cute and inoffensive but as it grows, it'll eat you alive.

Come to this session to learn how to setup, write, and structure CSS in a maintainable way to create large scale, rapidly changing, long-lived web projects.

With practical examples you will learn:
How isolate components to allow rapid iterations
How to apply the “Feature, API, Implementation model“ for long lived projects
Why the separation of UI structure concerns is crucial for flexible implementations

Once you learn a maintainable CSS toolkit, your CSS career will never be the same!

Transcript

1. 3 Pillars of a Successful CSS Architecture Andrés Galante
2. 3 PILLARS OF A SUCCESSFUL CSS ARCHITECTURE Dia Duit!
3. CSS is like a bear cub. CSS is like a bear cub. Cute and inoffensive but when it grows it’ll eat you alive. 3 PILLARS OF A SUCCESSFUL CSS ARCHITECTURE
4. Your codebase will never get smaller 3 PILLARS OF A SUCCESSFUL CSS ARCHITECTURE
5. 3 PILLARS OF A SUCCESSFUL CSS ARCHITECTURE
6. Top Ten Worst Things That Could Happen In Life (According to the Internetz) https://www.thetoptens.com/worst-things-could-happen-life/ 3 PILLARS OF A SUCCESSFUL CSS ARCHITECTURE
7. 3 PILLARS OF A SUCCESSFUL CSS ARCHITECTURE https://twitter.com/csswizardry/status/878420664469925889?lang=en
8. Enduring CSS by Ben Frain https://ecss.io 3 PILLARS OF A SUCCESSFUL CSS ARCHITECTURE
9. 3 Pillars of a successful CSS architecture 3 PILLARS OF A SUCCESSFUL CSS ARCHITECTURE
10. Andrés Galante @andresgalante andresgalante.com Buenos Aires, Argentina Bootstrap
11. “There are many roads to success, but only one sure road to failure, and that is to try to please everyone else.” Benjamin Franklin
12. WHY? Accessibility, Responsiveness and Performance
13. Responsive ACCESSIBILITY, RESPONSIVENESS, AND PERFORMANCE WHY?
14. Accessibility ACCESSIBILITY, RESPONSIVENESS, AND PERFORMANCE WHY?
15. ACCESSIBILITY, RESPONSIVENESS, AND PERFORMANCE WHY?
16. Internet Explorer 9.0 0.96% Internet Explorer 10.0 0.72% Color blind ~9% ACCESSIBILITY, RESPONSIVENESS, AND PERFORMANCE WHY?
17. " 37,627,800 12.1% # 11,000,000 16% ACCESSIBILITY, RESPONSIVENESS, AND PERFORMANCE WHY? Population with disability
18. The web is accessible by default! If your website is not accessible, it’s your fault. ACCESSIBILITY, RESPONSIVENESS, AND PERFORMANCE WHY?
19. Performant ACCESSIBILITY, RESPONSIVENESS, AND PERFORMANCE WHY?
20. Average attention span: 2000: 12 seconds 2015: 8 seconds http://www.statisticbrain.com/attention-span-statistics/ ACCESSIBILITY, RESPONSIVENESS, AND PERFORMANCE WHY?
21. http://www.statisticbrain.com/attention-span-statistics/ 9 seconds ACCESSIBILITY, RESPONSIVENESS, AND PERFORMANCE WHY?
22. LIQUID CAT Responsive Accessible Performant ACCESSIBILITY, RESPONSIVENESS, AND PERFORMANCE WHY?
23. HOW? Good API, Isolation, and Separation
24. WRITE ROCK SOLID HTML 1
25. Feature, API, Implementation WRITE ROCK SOLID HTML HOW?
26. API WRITE ROCK SOLID HTML HOW?
27. Content DOM CSS Feature API Impl WRITE ROCK SOLID HTML HOW?
28. Content DOM CSS Feature API Impl ☹ ☹ WRITE ROCK SOLID HTML HOW?
29. Content DOM CSS Feature API Impl ☹ WRITE ROCK SOLID HTML HOW?
30. Content DOM CSS Feature API Impl WRITE ROCK SOLID HTML HOW?
31. WRITE ROCK SOLID HTML HOW?
32. DEMO
33. API WRITE ROCK SOLID HTML HOW?
34. “Do or do not, there is no try.” Master Yoda
35. CREATE ISOLATED UI STRUCTURES 2 https://meowni.ca/posts/shadow-dom/
36. Let each thing be the thing. And not an extension of another thing. CREATE ISOLATED UI STRUCTURES HOW?
37. CREATE ISOLATED UI STRUCTURES HOW?
38. DEMO
39. When to create a new component? CREATE ISOLATED UI STRUCTURES HOW? Only modify scale or color
40. BEM Block__Element—Modifier CREATE ISOLATED UI STRUCTURES HOW?
41. CREATE ISOLATED UI STRUCTURES HOW? Global Namespace prefix-Block__Element—Modifier pf-name
42. Component Variables CREATE ISOLATED UI STRUCTURES HOW? typography border animations z-index margins paddings shadows colors
43. DEMO
44. 3 SEPARATE UI LAYOUT FROM UI COMPONENTS
45. UI Structures Components Layouts SEPARATE UI LAYOUT FROM UI COMPONENTS HOW?
46. HOW? LIQUID CAT SEPARATE UI LAYOUT FROM UI COMPONENTS
47. Layouts HOW? SEPARATE UI LAYOUT FROM UI COMPONENTS
48. Components HOW? SEPARATE UI LAYOUT FROM UI COMPONENTS
49. Components Layouts % HOW? SEPARATE UI LAYOUT FROM UI COMPONENTS
50. Components Layouts & HOW? SEPARATE UI LAYOUT FROM UI COMPONENTS
51. HOW? SEPARATE UI LAYOUT FROM UI COMPONENTS
52. c-className Components l-className Layouts HOW? Prefix structures SEPARATE UI LAYOUT FROM UI COMPONENTS
53. HOW? SEPARATE UI LAYOUT FROM UI COMPONENTS
54. DEMO 6
55. Writing rock solid HTML Create isolated UI structures Separate UI layout from UI components 1 2 3
56. @andresgalante https://speakerdeck.com/andresgalante/3-pillars-of-a-successful