JSDay 2019: ApocalipCSS

Uno de los grandes problemas a la hora de trabajar en web llega a la hora de lidiar con los estilos: con el CSS. Los desarrolladores JavaScript estamos acostumbrados a lidiar con transpilaciones, Babel, Polyfills, Internet Explorer, etc… sin embargo, nos olvidamos de CSS o no le dedicamos suficiente tiempo a entender como funciona, convenciones de uso o qué maneras o tecnologías existen para resolver los principales problemas que nos afectan. ¿Preprocesadores? ¿LESS? ¿Sass? ¿Stylus? ¿PostCSS? ¿CSS-in-JS? ¿Shadow DOM?

Esta charla estará dirigida a todos aquellos que quieran comprender mejor CSS, conocer el rumbo que ha tomado hasta el momento y profundizar en las tecnologías y formas que existen de trabajar con él para saber que dirección tomar dependiendo de nuestro caso.

Transcript

1. J. Román Hdez twitter.com/Manz APOCALIPCSS DE CSS A SHADOW DOM PASANDO POR POSTCSS
2. A D V I S O R Y D I S C L A I M E R SUBJECTIVE CONTENT
3. DOCUMENTS ERA PREPROCESSORS ERA COMPONENTS ERA 2000 2020 1995 2005 2010 2015
4. FIRST ERA DOCUMENTS ERA SECOND ERA THIRD ERA Gene S
5. Håkon Wium Lie 1994, CERN 1998, CTO Opera CSS Proposal (1994)
6. Håkon Wium Lie Acid2 Test (2005)
7. WHATWG community
8. CSS IS AWESOME IS IT RIGHT?
9. CSS IS AWE SOM E /* Break */ word-break: break-word; height: auto; solution one
10. CSS IS AWESOME /* Content */ display: inline-block; text-align: center; solution two
11. CSS IS AWES OME /* Container */ display: inline-block; width: 150px; height: 150px; word-break: break-word; solution three
12. CSS IS AWES /* Overflow */ overflow: scroll; solution four
13. /* Stack Overflow */ https://stackoverflow.com/ other solutions
14. SEPARATION OF CONCERNS https://manzdev.github.io/htmlreally/
15. OLD PROBLEMS NIGHTMARES IE6 IE9 cu rent p o le yet Float center vertical Safari
16. <div class="one two"></div> <div class="two one"></div> First & second element colors? .one { background: red; } .two { background: blue; } A: red, blue C: red, red B: blue, red D: blue, blue D: blue, blue Prio ity or er does 't atte
17. PROGRAMMER CSS is weird
18. Nicholas C. Zakas, ESLint author Instead of assuming that people are dumb, ignorant, and making mistakes, assume they are smart, doing their best, and that you lack context.
19. <div class="one two"></div> <div class="two one"></div> First & second element colors? .one.two { background: green; } .two.one { background: purple; } .one { background: red; } .two { background: blue; } A: blue, red C: purple, purple C: purple, purple B: green, purple D: green, green Spe ifi it 020 020 010 010 Prio ity
20. ? 0 Inline styles 1 IDs 2 Classes, attributes and pseudo-classes 1 Elements and pseudo-elements #nav .selected > a:hover .class {} [attr=""] {} :pseudoclass {} #id { } element {} ::pseudoelem {} <a style=".."> CASCADE: SPECIFICITY
21. LA VIEJA CONFIABLE !important
22. !important BAD PRACTICES
23. BAD PRACTICES .page .container .main .grid-parent ul .item > div li .element span { ... }
24. BAD PRACTICES z-index: 1; z-index: 5; z-index: 99999; z-index: 99;
25. NICE FEATURES
26. <div class="parent"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> </div> .parent { display: flex; background: grey; padding: 10px; height: 100px; } CSS (Flexbox) .item { width: 100% } .item1 { background: red } .item2 { background: gold } .item3 { background: green }
27. <div class="parent"> <div class="item item1"></div> ... <div class="item item6"></div> </div> .parent { display: grid; grid-template-rows: repeat(3, 50px); grid-template-columns: repeat(2, 50%); background: grey; padding: 10px; } CSS (Grid)
28. <div class="star"></div> .star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: gold; width: 300px; height: 300px; } CSS (Clip Path)
29. <div class="parent"> <div class="car"></div> </div> .car { offset-path: path('m 21,36 c 12,-6 27,-7 41,-8 21,-1 43,-3 63,3 ...'); animation: move 10s infinite; background: url(car.png) no-repeat; background-size: 60px 50px; width: 75px; height: 50px; } CSS (Motion Path) @keyframes move { from { offset-distance: 0 } to { offset-distance: 100% } }
30. CAN I USE... https://caniuse.com/ 2013 POLYFILL
31. FIRST ERA DOCUMENTS ERA SECOND ERA PREPROCESSORS ERA THIRD ERA
32. CSS Framework Design System
33. CSS Frameworks FANBOY POSITIVE FEEDBACK NOT INTERESTED HATER
34. 50 lines 190 lines 100 lines CSS Custom props CSS Nesting #27 ScanDisk · https://manzdev.github.io/
35. 66 lines 339 lines 14 lines (audio) Grid CSS + Flexbox CSS Nesting #26 GameBoy · https://manzdev.github.io/
36. PREPROCESSORS ? ? ? ? ? File/code organization Hardcoded values Duplicated code ? Loops
37. 2006 2009 2009 2010 Sass C (SCSS)
38. Preprocessors * PostCSS is not a preprocessor FANBOY POSITIVE FEEDBACK NOT INTERESTED HATER
39. COMPILERS BEFORE AFTER
40. COMPILERS @import "file.css"; @import url("file.css"); GET / HTTP/1.1 text/css HTTP Requests GET / HTTP/2 text/css HTTP/2 Requests @import @import Block Requests
41. COMPILERS NESTING .parent { background: red; & .child { display: none; } } .parent { background: red; } .parent .child { display: none; }
42. COMPILERS NESTING VARS $color: green; .parent { $color: red } .elem { background: $color } :root { --color: green } .parent { --color: red } .elem { background: var(--color) }
43. COMPILERS NESTING VARS MIXINS @mixin card($col: red) { background: $col; display: flex; } .content { @include card(cyan); } .content { background: cyan; display: flex; }
44. COMPILERS NESTING VARS MIXINS LOOPS @for $i from 1 through 4 { .class-#{$i} { width: 50px + $i; } } .class-1 {...51px} .class-2 {...52px} .class-3 {...53px} .class-4 {...54px}
45. COMPILERS NESTING VARS MIXINS LOOPS table.data tr:nth-child(2n) { background: lightgray; } 2·0 = 0 2·1 = 2 2·2 = 4 2·3 = 6
46. COMPILERS NESTING VARS MIXINS LOOPS EXTENDS .share { color: red; } .parent { @extend .share; } .child { @extend .share; background: blue; } .share, .parent, .child { color: red; } .child { background: blue; }
47. NAMING CONVENTION
48. ORGANIZATION Utility-first Specificity Theming !im portant selectors
49. OOCSS 2009 Nicole Sullivan <!-- Split layout & skin --> <a class="btn btn-blue">...</a> <!-- Split container & content --> <a class="btn btn-blue"> <i class="btn-icon">...</i> <span class="btn-text">...</span> </a>
50. OOCSS BEM 2009 2009 Yandex /* Main entity */ .block { } Element Block State /* Entity part */ .block__element { } /* State change */ .block__element--disabled { } .block--disabled { }
51. OOCSS BEM 2009 2009 <div class="media"> <img class="media__img" src="logo.png" alt="logo"> <div class="media__text"> <p>Text description</p> </div> </div> .media .media__img .media__text Yandex
52. OOCSS BEM 2009 2009 /* LESS (or others) */ .block { &__element { &--disabled { } } } Element Block Element /* CSS */ .block {} .block__element {} .block__element--disabled {} Yandex
53. OOCSS BEM SMACSS 2009 2009 2013 Jonathan Snook Base Modules Layout State Theme
54. OOCSS BEM SMACSS 2009 2009 2013 Jonathan Snook Base Modules Layout State Theme
55. OOCSS BEM SMACSS ACSS 2009 2009 2013 2013 <div class="mt-20 bb-0"> <img src="logo.png" alt="logo"> <div class="text-center"> <p>Text description</p> </div> </div> ma in-to : 20p bo er-bottom: 0 te t-ali : center
56. OOCSS BEM SMACSS ACSS 2009 2009 2013 2013 Adam Wathan TailWind CSS (2017)
57. OOCSS BEM SMACSS ACSS ITCSS 2009 2009 2013 2013 2014 Harry Roberts SETTINGS TOOLS GENERIC ELEMENTS OBJECTS COMPONENTS UTILITIES ITCSS CSS SPECIFICITY CLEAN + - MIXINS... VARS RESETS... HTML TAGS PATTERNS, LAYOUTS EXCEPTIONS BEMIT BEM+ITCSS
58. OOCSS BEM SMACSS ACSS ITCSS BEMIT 2009 2009 2013 2013 2014 2015 .o-layout {} /* o- for objects */ .c-modal {} /* c- for components */ .u-center {} /* u- for utilities */ .t-dark {} /* t- for themes */ .is-open {} /* for state changes */ .has-items {} ._temp {} /* for temporary */ Harry Roberts
59. Methodologies FANBOY POSITIVE FEEDBACK NOT INTERESTED HATER
60. FIRST ERA DOCUMENTS ERA SECOND ERA PREPROCESSORS ERA THIRD ERA COMPONENTS ERA
61. SPOILER
62. POSTCSS 2013 PostCSS Preprocessor Other tools Postprocessor 2014 StyleLint
63. PREPROCESS ? (Not CSS) CSS (Real CSS) CSS (End CSS) & postcss-nesting postcss-font-magician postcss-import postcss-preset-env autoprefixer POSTPROCESS ?
64. 2016 DEAD CODE 2013 2017 2015 CSSO PurifyCSS unCSS PurgeCSS 2011 2015 clean-css cssnano CSS MINIFICATION
65. postcss-preset-env rucksack-css ESTÁNDAR NO ESTÁNDAR postcss-font-magician ? ? ?
66. FOR DESIGNERS: CASCADE THE "C" IN CSS... FOR PROGRAMMERS: COLLISION
68. THE GREAT DIVIDE https://css-tricks.com/the-great-divide/
69. PROGRAMMER DESIGNER Local scope Global scope HTML as an end asset Semantic HTML Composition Cascade/Inheritance Compiling (transpilers) How browser works CSS is broken!! CSS doesn't scale Break the web!! Learn CSS instead of avoiding it!!
70. GLOBAL COMPONENT COMPONENT COMPONENT COMPONENT LOCAL
72. document.body.innerHTML = ` <style> div { color: red; } </style> <div>Hello!</div> `; innerHTML ES2015+ glo l
73. const div = document.createElement('div'); div.textContent = 'Hello!'; div.style.color = 'red'; document.body.append(div); inline styles lo <div style="color: red"> ... </div>
75. CSS MODULES 2015 CSS Modules /* local button.css */ .button { background: blue; } /* global w/ css modules */ ._button_a7BHw81t { background: blue; } { 'button': '_button_a7BHw81t' }
77. 2010 FRAMEWORKS 2013 2014 React Vue.js AngularJS 2016 Angular
78. 2010 FRAMEWORKS 2013 2014 React Vue.js AngularJS 2016 Angular not opinionated not opinionated <div class="container" data-v-635028> <div class="item" data-v-3b5678></div> <div class="item" data-v-3b5678></div> <div class="item" data-v-3b5678></div> </div> <style lang="less"> ... </style> sass stylus postcss
79. 2012 Webpack BUILD TOOLS 2013 2017 Gulp.js Parcel.js
80. CSS-in-JS Andrey Sitnik, PostCSS author
81. s-ns css-loader pre-style cssobj react-free- perstyle hiccup-css react-stylematic react-c s-constructor react-style cssx-loader smart- act-jss linaria j2c styled-components react- yling aphrodite radium glamor classy react-c act-statics-styles i-css csjs hyperstyles re act-styleable jsxstyle freestyler react-them bel-plugin-pre-style es-css-modules react-fe anium react-styl emotion scope-styles react- amorous babel-plugin-css-in-js react-inline- act-css-modules typestyle css-light restyles ile-react-media-queries react-look reactcss no-css react-inline styled-jsx react-css-bui
82. CSS-IN-JS 2016 2017 2018 Styled Components Emotion Linaria
83. import styled from 'styled-components'; const color = 'hotpink'; const Button = styled.div({ background: props => props.bg || color, textAlign: 'center', color: 'white', padding: '10px' }); const App = () => ( <Button bg="blue">Hi!</Button> ); Styled Components Object syntax
84. import styled from 'styled-components'; const color = 'hotpink'; const Button = styled.div` background: ${props => props.bg || color }; text-align: center; color: white; padding: 10px; `; const App = () => ( <Button bg="blue">Hi!</Button> ); Styled Components Template literal syntax
85. import { css } from 'emotion'; const base = css`border-top: 10px solid black;` const myClass = css` ${base} margin: 0; background: hotpink; `; document.body.classList.add(myClass); Emotion Agnostic
86. THE CHOSEN
87. CSS-in-JS FANBOY POSITIVE FEEDBACK NOT INTERESTED HATER
88. SHADOW DOM v1 WEBCOMPONENTS
89. h1 { background: hotpink } const node = document.querySelector('.node'); node.attachShadow({ mode: 'open' }); <slot>Default content</slot> `; <h1>Outside</h1> <div class="node"> <h1>Inside</h1> </div> node.shadowRoot.innerHTML = ` <style> h1 { background: blue }</style> <h1>Shadow DOM</h1> Inside Outside `; Shadow DOM Inside
90. <base-element></base-element> class BaseElement extends HTMLElement { constructor() { super(); this.innerHTML = `<h2>Hi!</h2>`; } } customElements.define('base-element', BaseElement);
91. <base-element></base-element> class BaseElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <style> h2 { background: green; } </style> <h2>Hi!</h2>`; } } customElements.define('base-element', BaseElement);
92. WebComponent LightDOM WebComponent ShadowDOM (open) CSS Global a ects DOM selectable WebComponent ShadowDOM (closed)
93. PRESENT { HTML Templates } { Shadow DOM } { Custom Elements } FUTURE { CSS Modules } { HTML Modules } { JSON Modules }
94. CONSTRUCTABLES STYLE SHEETS const css = new CSSStyleSheet(); css.insertRule('h2 { background: red }'); this.shadowRoot.adoptedStyleSheets = [css];
95. PRESENT { HTML Templates } { Shadow DOM } { Custom Elements } FUTURE { CSS Modules } { HTML Modules } { JSON Modules } import html from './BaseElement.html'; import json from './BaseElementData.json'; import sheet from './BaseElement.css';
96. Litedom 3KB, Vue2 API-like RIOT.js Vue SFC HTML-like Svelte Compiler, write less LitElement TypeScript support, lit-html Stencil Compiler, vDOM, JSX + TS Atomico Functions & hooks only
97. WebComponents.dev Online Platform Editor
98. https://github.com/ManzDev/frontend-evolution
99. Mark Dalgleish, CSS Modules author I think people often reject these new ideas so strongly because they feel like they're being left behind in the linear view of history.
101. ¡THANKS! J. Román Hdez twitter.com/Manz