Upgrade to Pro — share decks privately, control downloads, hide ads and more …

3 Pillars of a Successful

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!

03dc4f2e26e476958c952505c8d8f563?s=128

Andres Galante

November 30, 2017
Tweet

More Decks by Andres Galante

Other Decks in Technology

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