JSDay 2019: ApocalipCSS

0c2ab22919db3ccdf58580f8f09618c7?s=47 Manz
November 09, 2019

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.

0c2ab22919db3ccdf58580f8f09618c7?s=128

Manz

November 09, 2019
Tweet

Transcript

  1. 2.

    A D V I S O R Y D I

    S C L A I M E R SUBJECTIVE CONTENT
  2. 11.

    CSS IS AWES OME /* Container */ display: inline-block; width:

    150px; height: 150px; word-break: break-word; solution three
  3. 15.

    OLD PROBLEMS NIGHTMARES IE6 IE9 cu rent p o le

    yet Float center vertical Safari
  4. 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
  5. 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.
  6. 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
  7. 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
  8. 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 }
  9. 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)
  10. 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)
  11. 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% } }
  12. 34.

    50 lines 190 lines 100 lines CSS Custom props CSS

    Nesting #27 ScanDisk · https://manzdev.github.io/
  13. 35.

    66 lines 339 lines 14 lines (audio) Grid CSS +

    Flexbox CSS Nesting #26 GameBoy · https://manzdev.github.io/
  14. 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
  15. 41.

    COMPILERS NESTING .parent { background: red; & .child { display:

    none; } } .parent { background: red; } .parent .child { display: none; }
  16. 42.

    COMPILERS NESTING VARS $color: green; .parent { $color: red }

    .elem { background: $color } :root { --color: green } .parent { --color: red } .elem { background: var(--color) }
  17. 43.

    COMPILERS NESTING VARS MIXINS @mixin card($col: red) { background: $col;

    display: flex; } .content { @include card(cyan); } .content { background: cyan; display: flex; }
  18. 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}
  19. 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; }
  20. 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>
  21. 50.

    OOCSS BEM 2009 2009 Yandex /* Main entity */ .block

    { } Element Block State /* Entity part */ .block__element { } /* State change */ .block__element--disabled { } .block--disabled { }
  22. 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
  23. 52.

    OOCSS BEM 2009 2009 /* LESS (or others) */ .block

    { &__element { &--disabled { } } } Element Block Element /* CSS */ .block {} .block__element {} .block__element--disabled {} Yandex
  24. 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
  25. 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
  26. 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
  27. 61.
  28. 63.

    PREPROCESS ? (Not CSS) CSS (Real CSS) CSS (End CSS)

    & postcss-nesting postcss-font-magician postcss-import postcss-preset-env autoprefixer POSTPROCESS ?
  29. 64.

    2016 DEAD CODE 2013 2017 2015 CSSO PurifyCSS unCSS PurgeCSS

    2011 2015 clean-css cssnano CSS MINIFICATION
  30. 67.
  31. 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!!
  32. 71.
  33. 72.

    document.body.innerHTML = ` <style> div { color: red; } </style>

    <div>Hello!</div> `; innerHTML ES2015+ glo l
  34. 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>
  35. 74.
  36. 75.

    CSS MODULES 2015 CSS Modules /* local button.css */ .button

    { background: blue; } /* global w/ css modules */ ._button_a7BHw81t { background: blue; } { 'button': '_button_a7BHw81t' }
  37. 76.
  38. 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
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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
  44. 90.

    <base-element></base-element> class BaseElement extends HTMLElement { constructor() { super(); this.innerHTML

    = `<h2>Hi!</h2>`; } } customElements.define('base-element', BaseElement);
  45. 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);
  46. 92.
  47. 93.

    PRESENT { HTML Templates } { Shadow DOM } {

    Custom Elements } FUTURE { CSS Modules } { HTML Modules } { JSON Modules }
  48. 94.

    CONSTRUCTABLES STYLE SHEETS const css = new CSSStyleSheet(); css.insertRule('h2 {

    background: red }'); this.shadowRoot.adoptedStyleSheets = [css];
  49. 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';
  50. 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
  51. 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.
  52. 100.