Let There Be Peace On CSS - Cristiano Rastelli - Codemotion Amsterdam 2018
•
0 likes•117 views
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 have brought 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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Let There Be Peace On CSS - Cristiano Rastelli - Codemotion Amsterdam 2018
Similar to Let There Be Peace On CSS - Cristiano Rastelli - Codemotion Amsterdam 2018 (20)
More from Codemotion
More from Codemotion (20)
Recently uploaded
Recently uploaded (20)
Let There Be Peace On CSS - Cristiano Rastelli - Codemotion Amsterdam 2018
- 1. Cristiano Rastelli – Codemotion Amsterdam - 8 May 2018 Let There Be Peace on CSS
- 2. Cristiano Rastelli Front-End Designer & Developer didoo.net / @areaweb
- 3. badoo.com
- 5. 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. The War Declaration CHAPTER ONE - THE WAR
- 9. https://speakerdeck.com/vjeux/react-css-in-js Christopher “Vjeux” Chedeau - React: CSS in JS, 2014
- 10. The Battle CHAPTER ONE - THE WAR
- 11. http://www.zeldman.com/2016/01/05/13913/ Jeffrey Zeldman - Of Patterns and Power: Web Standards Then & Now
- 25. 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
- 32. The matter in dispute CHAPTER ONE - THE WAR
- 33. 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
- 34. Been there, seen that CHAPTER ONE - THE WAR
- 35. CHAPTER ONE - THE WAR 2000-2005
- 37. 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
- 38. CHAPTER ONE - THE WAR 2006-2010
- 40. CHAPTER ONE - THE WAR 2011-2015
- 41. 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
- 43. www.softfinity.com/blog/the-battle-of-modern-javascript-frameworks-conclusion-which-one-to-choose/ The 2nd JavaScript War ANGULAR.JS BACKBONE.JS
- 44. 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”.
- 45. CHAPTER ONE - THE WAR 2015-2017
- 46. 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.
- 48. Max Stoiber on stage (React London 2017 - Flickr) The Advent of React
- 49. INTERLUDE A plan
- 50. 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.
- 51. 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).
- 53. The Main Causes CHAPTER TWO - THE PEACE
- 56. https://en.wikipedia.org/wiki/Separation_of_concerns Separation of concerns, not necessarily of technologies
- 57. Separation of Concerns Separation of Concerns (only, from a different point of view) JS CSS HTML BUTTON DATEPICKER MODAL LIST LIST-ITEM MEDIA
- 58. My understanding CHAPTER TWO - THE PEACE
- 59. 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. “ ”
- 60. 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.
- 61. 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.
- 62. Non-partisans CHAPTER TWO - THE PEACE
- 64. https://twitter.com/markdalgleish/status/819289589911146496 Mark Dalgleish - @markdalgleish
- 69. http://adamonishi.com/2016/06/how-to-make-a-chilli/ Adam Onishi - @onishiweb “How to make a Chilli”
- 70. 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”
- 71. 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.
- 72. Berlin, Germany – https://2017.cssconf.eu/ CSS Conf EU 2017
- 73. https://www.youtube.com/watch?v=X_uTCnaRe94 Mark Dalgleish: A Unified Styling Language
- 74. https://www.youtube.com/watch?v=X_uTCnaRe94 Glen Maddern: The road to styled components
- 75. FINALE The End
- 76. Call for a truce FINALE - THE END
- 77. 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.
- 78. “The two most powerful warriors are patience and time.” – Leo Tolstoy
- 79. Cristiano Rastelli MOBILE WEB TEAM
- 80. 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