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

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
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
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