Slide 1

Slide 1 text

Cristiano Rastelli – Front End London / 31 Aug 2017 Let There Be Peace on CSS

Slide 2

Slide 2 text

Cristiano Rastelli Front-End Designer & Developer / @areaweb

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text


Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text


Slide 9

Slide 9 text

 What war?

Slide 10

Slide 10 text

The War Declaration CHAPTER ONE - THE WAR

Slide 11

Slide 11 text Christopher “Vjeux” Chedeau - React: CSS in JS, 2014

Slide 12

Slide 12 text


Slide 13

Slide 13 text Jeffrey Zeldman - Of Patterns and Power: Web Standards Then & Now

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text CSS IS BROKEN

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

The matter in dispute CHAPTER ONE - THE WAR

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Been there, seen that CHAPTER ONE - THE WAR

Slide 38

Slide 38 text


Slide 39

Slide 39 text The Browser Wars

Slide 40

Slide 40 text The Browser Wars

Slide 41

Slide 41 text 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

Slide 42

Slide 42 text


Slide 43

Slide 43 text JS vs HTML - Part 2

Slide 44

Slide 44 text Flash vs HTML

Slide 45

Slide 45 text


Slide 46

Slide 46 text

The 1st JavaScript War

Slide 47

Slide 47 text HTML5 vs Native

Slide 48

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

Slide 49

Slide 49 text 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”.

Slide 50

Slide 50 text


Slide 51

Slide 51 text 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.

Slide 52

Slide 52 text The “tooling” bloat

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text


Slide 55

Slide 55 text

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.

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text


Slide 58

Slide 58 text


Slide 59

Slide 59 text Mark Dalgleish

Slide 60


Slide 61

Slide 61 text Separation of concerns, not necessarily of technologies

Slide 62

Slide 62 text

Separation of Concerns Separation of Concerns (only, from a different point of view) JS CSS HTML BUTTON DATE PICKER MODAL LIST LIST-ITEM MEDIA

Slide 63

Slide 63 text

My understanding CHAPTER TWO - THE PEACE

Slide 64

Slide 64 text

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.

Slide 65

Slide 65 text

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.

Slide 66

Slide 66 text JavaScript Best Practices Global variables and function names are an incredibly bad idea. There are several workarounds to avoid using globals. “ ”

Slide 67

Slide 67 text


Slide 68

Slide 68 text Max Stoiber - @mxstbr

Slide 69

Slide 69 text Mark Dalgleish - @markdalgleish

Slide 70

Slide 70 text Evolution is not linear

Slide 71

Slide 71 text

Slide 72

Slide 72 text Stuart “Stu” Robson - @StuRobson

Slide 73

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

Slide 74

Slide 74 text 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”

Slide 75

Slide 75 text 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.

Slide 76

Slide 76 text Michele Bertoli - @michelebertoli “ Unlearn everything „

Slide 77

Slide 77 text

Berlin, Germany – CSS Conf EU 2017

Slide 78

Slide 78 text Mark Dalgleish: A Unified Styling Language

Slide 79

Slide 79 text Glen Maddern: The road to styled components

Slide 80

Slide 80 text


Slide 81

Slide 81 text

Call for a truce FINALE - THE END

Slide 82

Slide 82 text

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.

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Cristiano Rastelli MOBILE WEB TEAM

Slide 85

Slide 85 text

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: