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
   

   View Slide

2. Cristiano Rastelli
   Front-End Designer & Developer
   didoo.net / @areaweb
   

   View Slide

3. badoo.com
   

   View Slide

4. badoo.com
   

   View Slide

5. View Slide

6. PROLOGUE
   A story
   

   View Slide

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.
   

   View Slide

8. CHAPTER ONE
   The War
   

   View Slide

9. War?

   What war?
   

   View Slide

10. The War Declaration
    CHAPTER ONE - THE WAR
    

    View Slide

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

    View Slide

12. The Battle
    CHAPTER ONE - THE WAR
    

    View Slide

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

    View Slide

14. https://twitter.com/LeaVerou/status/686651368736698370
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

34. View Slide

35. The matter in dispute
    CHAPTER ONE - THE WAR
    

    View Slide

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
    

    View Slide

37. Been there, seen that
    CHAPTER ONE - THE WAR
    

    View Slide

38. CHAPTER ONE - THE WAR
    2000-2005
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

42. CHAPTER ONE - THE WAR
    2006-2010
    

    View Slide

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

    View Slide

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

    View Slide

45. CHAPTER ONE - THE WAR
    2011-2015
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. CHAPTER ONE - THE WAR
    2015-2017
    

    View Slide

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.
    

    View Slide

52. https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.qhs31chdx
    The “tooling” bloat
    

    View Slide

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

    View Slide

54. INTERLUDE
    A plan
    

    View Slide

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.
    

    View Slide

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

    View Slide

57. CHAPTER TWO
    The Peace
    

    View Slide

58. The Main Causes
    CHAPTER TWO - THE PEACE
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

63. My understanding
    CHAPTER TWO - THE PEACE
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    “
    ”
    

    View Slide

67. Non-partisans
    CHAPTER TWO - THE PEACE
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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”
    

    View Slide

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.
    

    View Slide

76. https://speakerdeck.com/michelebertoli/unlearn-everything
    Michele Bertoli - @michelebertoli
    “ Unlearn everything „
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

80. FINALE
    The End
    

    View Slide

81. Call for a truce
    FINALE - THE END
    

    View Slide

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.
    

    View Slide

83. “The two most powerful warriors
    are patience and time.”
    – Leo Tolstoy
    

    View Slide

84. Cristiano Rastelli
    MOBILE WEB TEAM
    

    View Slide

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
    

    View Slide