Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 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.
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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”.
  9. 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.
  10. 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.
  11. 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).
  12. Separation of Concerns Separation of Concerns (only, from a different

    point of view) JS CSS HTML BUTTON DATE PICKER MODAL LIST LIST-ITEM MEDIA
  13. 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.
  14. 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.
  15. 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. “ ”
  16. 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”
  17. 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.
  18. 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.
  19. 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