$30 off During Our Annual Pro Sale. View Details »

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

Cristiano Rastelli

January 25, 2017
Tweet

More Decks by Cristiano Rastelli

Other Decks in Programming

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