Save 37% off PRO during our Black Friday Sale! »

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:


Cristiano Rastelli

January 25, 2017


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

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



  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. Christopher “Vjeux” Chedeau - React: CSS in JS, 2014

  12. The Battle CHAPTER ONE - THE WAR

  13. Jeffrey Zeldman - Of Patterns and Power: Web Standards

    Then & Now















  29. And it went on and on… CSS is Broken

    - Sergio Zamarro
  30. And it went on and on… CSS is Broken

    - Sergio Zamarro CSS is Not Broken - Keith J. Grant
  31. And it went on and on… CSS is Broken

    - Sergio Zamarro CSS is Not Broken - Keith J. Grant CSS Sucks - Shaun Bent
  32. And it went on and on… CSS is Broken

    - Sergio Zamarro CSS is Not Broken - Keith J. Grant CSS Sucks - Shaun Bent CSS is Fine, It’s Just Really Hard - Jordan Scales
  33. And it went on and on… CSS is Broken

    - Sergio Zamarro CSS is Not Broken - Keith J. Grant CSS Sucks - Shaun Bent CSS is Fine, It’s Just Really Hard - Jordan Scales 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. The Browser Wars

  40. The Browser Wars

  41. 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. JS vs HTML - Part 2

  44. Flash vs HTML

  45. CHAPTER ONE - THE WAR 2011-2015

  46. The 1st JavaScript War

  47. HTML5 vs Native

  48. The 2nd JavaScript War ANGULAR.JS BACKBONE.JS

  49. 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. 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. 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. Mark Dalgleish


  61. Separation of concerns, not necessarily of technologies

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

  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. 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. Max Stoiber - @mxstbr

  69. Mark Dalgleish - @markdalgleish

  70. Evolution is not linear


  72. Stuart “Stu” Robson - @StuRobson

  73. Adam Onishi - @onishiweb “How to make a Chilli”

  74. 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. 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. Michele Bertoli - @michelebertoli “ Unlearn everything „

  77. Berlin, Germany – CSS Conf EU 2017

  78. Mark Dalgleish: A Unified Styling Language

  79. 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: