Let There Be Peace On CSS

Let There Be Peace On CSS

In the last few months there's been a growing friction between those who see CSS as an untouchable layer in the "separation of concerns" paradigm, and those who have simply ignored this golden rule and found different ways to style the UI (typically applying CSS styles via JavaScript).

This debate is getting more and more intense every day, bringing division in a community that used to be immune to this kind of “wars”.

This talk is my attempt to bring peace between the two fronts. To help these two opposite factions to understand and listen to each other, see the counterpart's points of views. To find the good things they have in common, and learn something from that.

## This talk has been presented at London CSS Meetup + Design Exchange Nottingham (DXN) + Front End London (FEL) + State of The Browser ##

Video of the talk: https://www.youtube.com/watch?v=bb_kb6Q2Kdc

A34bc430e87a74eba5d92719ea92cfdc?s=128

Cristiano Rastelli

January 25, 2017
Tweet

Transcript

  1. Cristiano Rastelli – Front End London / 31 Aug 2017

    Let There Be Peace on CSS
  2. Cristiano Rastelli Front-End Designer & Developer didoo.net / @areaweb

  3. badoo.com

  4. badoo.com

  5. None
  6. PROLOGUE A story

  7. I am going to tell you a story. A story

    of war and –hopefully– peace. It’s a war of words, so I won’t use mine, but those of the protagonists.
  8. CHAPTER ONE The War

  9. War?
 What war?

  10. The War Declaration CHAPTER ONE - THE WAR

  11. https://speakerdeck.com/vjeux/react-css-in-js Christopher “Vjeux” Chedeau - React: CSS in JS, 2014

  12. The Battle CHAPTER ONE - THE WAR

  13. http://www.zeldman.com/2016/01/05/13913/ Jeffrey Zeldman - Of Patterns and Power: Web Standards

    Then & Now
  14. https://twitter.com/LeaVerou/status/686651368736698370

  15. https://twitter.com/AaronGustafson/status/743073596789133312

  16. https://twitter.com/Real_CSS_Tricks/status/754045216449933312

  17. https://medium.learnreact.com/scale-fud-and-style-components-c0ce87ec9772

  18. https://medium.com/@bitwiselover/functional-css-with-special-characters-643f25d653c7

  19. https://twitter.com/mezzoblue/status/794419442272714752

  20. https://twitter.com/snuggsi/status/820614541931376640

  21. https://twitter.com/mholzschlag/status/820703602096283648

  22. https://twitter.com/thomasfuchs/status/810885087214637057

  23. https://twitter.com/BenLesh/status/812092408519413761

  24. https://twitter.com/ReactiveConf/status/823239310552002560

  25. https://twitter.com/thierrykoblentz/status/823584827169349632

  26. https://twitter.com/zeldman/status/816343871491870721

  27. https://twitter.com/thejameskyle/status/824790686822129665

  28. https://medium.com/@zamarrowski/css-is-broken-5138773e17a5 CSS IS BROKEN

  29. And it went on and on… https://medium.com/@zamarrowski/css-is-broken-5138773e17a5 CSS is Broken

    - Sergio Zamarro
  30. And it went on and on… https://medium.com/@zamarrowski/css-is-broken-5138773e17a5 CSS is Broken

    - Sergio Zamarro http://keithjgrant.com/posts/2017/03/css-is-not-broken/ CSS is Not Broken - Keith J. Grant
  31. And it went on and on… https://medium.com/@zamarrowski/css-is-broken-5138773e17a5 CSS is Broken

    - Sergio Zamarro http://keithjgrant.com/posts/2017/03/css-is-not-broken/ CSS is Not Broken - Keith J. Grant https://medium.com/@shaunbent/css-sucks-9a4471ede74b CSS Sucks - Shaun Bent
  32. And it went on and on… https://medium.com/@zamarrowski/css-is-broken-5138773e17a5 CSS is Broken

    - Sergio Zamarro http://keithjgrant.com/posts/2017/03/css-is-not-broken/ CSS is Not Broken - Keith J. Grant https://medium.com/@shaunbent/css-sucks-9a4471ede74b CSS Sucks - Shaun Bent https://medium.com/@jdan/css-is-fine-its-just-really-hard-638da7a3dce0 CSS is Fine, It’s Just Really Hard - Jordan Scales
  33. And it went on and on… https://medium.com/@zamarrowski/css-is-broken-5138773e17a5 CSS is Broken

    - Sergio Zamarro http://keithjgrant.com/posts/2017/03/css-is-not-broken/ CSS is Not Broken - Keith J. Grant https://medium.com/@shaunbent/css-sucks-9a4471ede74b CSS Sucks - Shaun Bent https://medium.com/@jdan/css-is-fine-its-just-really-hard-638da7a3dce0 CSS is Fine, It’s Just Really Hard - Jordan Scales https://jeremywagner.me/blog/css-is-broken-my-dime-a-dozen-opinion CSS is Broken: My Dime a Dozen Opinion - Jeremy Wagner
  34. None
  35. The matter in dispute CHAPTER ONE - THE WAR

  36. Separation of concerns CSS has inherent problems CSS global scope

    People use this tech because they don’t know CSS CSS doesn't scale and was never meant for that You’re breaking the web Excessive tooling Cascading and Inheritance
  37. Been there, seen that CHAPTER ONE - THE WAR

  38. CHAPTER ONE - THE WAR 2000-2005

  39. https://en.wikipedia.org/wiki/Browser_wars The Browser Wars

  40. https://en.wikipedia.org/wiki/Browser_wars The Browser Wars

  41. http://www.digital-web.com/articles/separating_behavior_and_structure_2/ JS vs HTML I hope this will convince moderate

    anti-JavaScripters that JavaScript is on the move towards integration in accessible XHTML/CSS pages, and that there is
 no fundamental reason to avoid it. Peter-Paul Koch - Separating behavior and structure
  42. CHAPTER ONE - THE WAR 2006-2010

  43. http://alistapart.com/article/behavioralseparation JS vs HTML - Part 2

  44. https://www.flexmonster.com/blog/blog-pivot-flash-vs-html5/ Flash vs HTML

  45. CHAPTER ONE - THE WAR 2011-2015

  46. The 1st JavaScript War https://www.quora.com/What-makes-jQuery-win-the-JavaScript-libraries-wars-instead-of-Dojo-etc https://www.quora.com/Why-did-jQuery-win

  47. https://twitter.com/Carnage4Life/status/238702428927700992 HTML5 vs Native

  48. www.softfinity.com/blog/the-battle-of-modern-javascript-frameworks-conclusion-which-one-to-choose/ The 2nd JavaScript War ANGULAR.JS BACKBONE.JS

  49. https://www.webdirections.org/blog/not-real-programming/ JS vs “Real Programming” There has been another, even

    longer running constant regarding the web for the last 20 years—working with web technologies is not “programming”, not “real coding”.
  50. CHAPTER ONE - THE WAR 2015-2017

  51. https://medium.com/tastejs-blog/yet-another-framework-syndrome-yafs-cf5f694ee070#.1x0cum4l7 Yet Another Framework Syndrome Almost every day, we see

    new libraries, frameworks and tools being released in the JavaScript community — many of which simply reinvent the wheel.
  52. https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.qhs31chdx The “tooling” bloat

  53. Max Stoiber on stage (React London 2017 - Flickr) The

    Advent of React
  54. INTERLUDE A plan

  55. Recently I have started to ask myself why this war,

    what is causing it. I don’t want to take a position. I see good reasons and valid points on both “sides” of the contention.
  56. What I want to do is to understand the reasons

    behind this war and do my part to stop it. Because if you understand the causes, you can try to find a solution, (or at least find a truce).
  57. CHAPTER TWO The Peace

  58. The Main Causes CHAPTER TWO - THE PEACE

  59. https://markdalgleish.github.io/presentation-first-class-styles/#11 Mark Dalgleish

  60. https://twitter.com/oliverturner/status/900325985018667008 OLD GENERATION NEW GENERATION

  61. https://en.wikipedia.org/wiki/Separation_of_concerns Separation of concerns, not necessarily of technologies

  62. Separation of Concerns Separation of Concerns (only, from a different

    point of view) JS CSS HTML BUTTON DATE PICKER MODAL LIST LIST-ITEM MEDIA
  63. My understanding CHAPTER TWO - THE PEACE

  64. CSS is a “young” community "Standard" patterns and architectures started

    to appear, and developers somehow stopped to fight one against the other for the "best" JS framework to use. The world of the CSS development is undergoing a metamorphosis that the JavaScript world has seen a few years ago, when it was completely transformed by the appearance of web-based applications. JavaScript became a professional language, with its own dignity and business relevance.
  65. CSS is a “young” community Nowadays you have “CSS developer”

    as a specific role in a team.
 As a community we have started to discuss of CSS Architectures and how to use CSS in the specific context of web applications. So maybe we are simply a too young community in that sense, and we never had the necessary discussion about who we are and what we do. Well, maybe that's what is happening to CSS too.
  66. https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals JavaScript Best Practices Global variables and function names are

    an incredibly bad idea. There are several workarounds to avoid using globals. “ ”
  67. Non-partisans CHAPTER TWO - THE PEACE

  68. https://twitter.com/mxstbr/status/755481795206971392 Max Stoiber - @mxstbr

  69. https://twitter.com/markdalgleish/status/819289589911146496 Mark Dalgleish - @markdalgleish

  70. http://evolution.berkeley.edu/evolibrary/article/evograms_07 Evolution is not linear

  71. https://twitter.com/oliverturner/status/816392203568291840

  72. https://twitter.com/StuRobson/status/757684093329039364 Stuart “Stu” Robson - @StuRobson

  73. http://adamonishi.com/2016/06/how-to-make-a-chilli/ Adam Onishi - @onishiweb “How to make a Chilli”

  74. https://benfrain.com/holier-than-thou/ Ben Frain - @benfrain Every few months somebody commits

    a cardinal sin of web development. They openly discuss or document a technology choice they have made that is contrary to the received wisdom of the ‘web community’. You know what happens next. Other web developers, brave behind their avatars (even those of great standing), use social media to pour scorn on said developer and denounce them for their practice/proclamation. “Holier Than Thou”
  75. https://css-tricks.com/increasing-wariness-dogmatism/ Chris Coyier - @chriscoyier “My Increasing Wariness of Dogmatism”

    It's certainly wordier to avoid dogma when you're trying to make a point. But it's more honest. It's more clear. It's showing empathy for people out there doing things different.
 It makes it easier for others to empathize with you.
  76. https://speakerdeck.com/michelebertoli/unlearn-everything Michele Bertoli - @michelebertoli “ Unlearn everything „

  77. Berlin, Germany – https://2017.cssconf.eu/ CSS Conf EU 2017

  78. https://www.youtube.com/watch?v=X_uTCnaRe94 Mark Dalgleish: A Unified Styling Language

  79. https://www.youtube.com/watch?v=X_uTCnaRe94 Glen Maddern: The road to styled components

  80. FINALE The End

  81. Call for a truce FINALE - THE END

  82. Embrace the ever changing nature of the web. Be careful

    with your words: they can hurt. Be pragmatic, non dogmatic. But most of all, be curious.
  83. “The two most powerful warriors are patience and time.” –

    Leo Tolstoy
  84. Cristiano Rastelli MOBILE WEB TEAM

  85. Photo Credits All the photos used in this presentation are

    from the tv series “War & Peace”, broadcasted on BBC One in 2016. You can see the full photo-gallery here: http://www.bbc.co.uk/programmes/p039wcdk/galleries