Slide 1

Slide 1 text

J. Román Hdez twitter.com/Manz APOCALIPCSS DE CSS A SHADOW DOM PASANDO POR POSTCSS

Slide 2

Slide 2 text

A D V I S O R Y D I S C L A I M E R SUBJECTIVE CONTENT

Slide 3

Slide 3 text

DOCUMENTS ERA PREPROCESSORS ERA COMPONENTS ERA 2000 2020 1995 2005 2010 2015

Slide 4

Slide 4 text

FIRST ERA DOCUMENTS ERA SECOND ERA THIRD ERA Gene S

Slide 5

Slide 5 text

Håkon Wium Lie 1994, CERN 1998, CTO Opera CSS Proposal (1994)

Slide 6

Slide 6 text

Håkon Wium Lie Acid2 Test (2005)

Slide 7

Slide 7 text

WHATWG community

Slide 8

Slide 8 text

CSS IS AWESOME IS IT RIGHT?

Slide 9

Slide 9 text

CSS IS AWE SOM E /* Break */ word-break: break-word; height: auto; solution one

Slide 10

Slide 10 text

CSS IS AWESOME /* Content */ display: inline-block; text-align: center; solution two

Slide 11

Slide 11 text

CSS IS AWES OME /* Container */ display: inline-block; width: 150px; height: 150px; word-break: break-word; solution three

Slide 12

Slide 12 text

CSS IS AWES /* Overflow */ overflow: scroll; solution four

Slide 13

Slide 13 text

/* Stack Overflow */ https://stackoverflow.com/ other solutions

Slide 14

Slide 14 text

SEPARATION OF CONCERNS https://manzdev.github.io/htmlreally/

Slide 15

Slide 15 text

OLD PROBLEMS NIGHTMARES IE6 IE9 cu rent p o le yet Float center vertical Safari

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

PROGRAMMER CSS is weird

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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 iﬁ it 020 020 010 010 Prio ity

Slide 20

Slide 20 text

? 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 {} CASCADE: SPECIFICITY

Slide 21

Slide 21 text

LA VIEJA CONFIABLE !important

Slide 22

Slide 22 text

!important BAD PRACTICES

Slide 23

Slide 23 text

BAD PRACTICES .page .container .main .grid-parent ul .item > div li .element span { ... }

Slide 24

Slide 24 text

BAD PRACTICES z-index: 1; z-index: 5; z-index: 99999; z-index: 99;

Slide 25

Slide 25 text

NICE FEATURES

Slide 26

Slide 26 text

.parent { display: flex; background: grey; padding: 10px; height: 100px; } CSS (Flexbox) .item { width: 100% } .item1 { background: red } .item2 { background: gold } .item3 { background: green }

Slide 27

Slide 27 text

...

.parent { display: grid; grid-template-rows: repeat(3, 50px); grid-template-columns: repeat(2, 50%); background: grey; padding: 10px; } CSS (Grid)

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

.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% } }

Slide 30

Slide 30 text

CAN I USE... https://caniuse.com/ 2013 POLYFILL

Slide 31

Slide 31 text

FIRST ERA DOCUMENTS ERA SECOND ERA PREPROCESSORS ERA THIRD ERA

Slide 32

Slide 32 text

CSS Framework Design System

Slide 33

Slide 33 text

CSS Frameworks FANBOY POSITIVE FEEDBACK NOT INTERESTED HATER

Slide 34

Slide 34 text

50 lines 190 lines 100 lines CSS Custom props CSS Nesting #27 ScanDisk · https://manzdev.github.io/

Slide 35

Slide 35 text

66 lines 339 lines 14 lines (audio) Grid CSS + Flexbox CSS Nesting #26 GameBoy · https://manzdev.github.io/

Slide 36

Slide 36 text

PREPROCESSORS ? ? ? ? ? File/code organization Hardcoded values Duplicated code ? Loops

Slide 37

Slide 37 text

2006 2009 2009 2010 Sass C (SCSS)

Slide 38

Slide 38 text

Preprocessors * PostCSS is not a preprocessor FANBOY POSITIVE FEEDBACK NOT INTERESTED HATER

Slide 39

Slide 39 text

COMPILERS BEFORE AFTER

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

COMPILERS NESTING VARS $color: green; .parent { $color: red } .elem { background: $color } :root { --color: green } .parent { --color: red } .elem { background: var(--color) }

Slide 43

Slide 43 text

COMPILERS NESTING VARS MIXINS @mixin card($col: red) { background: $col; display: flex; } .content { @include card(cyan); } .content { background: cyan; display: flex; }

Slide 44

Slide 44 text

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}

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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; }

Slide 47

Slide 47 text

NAMING CONVENTION

Slide 48

Slide 48 text

ORGANIZATION Utility-ﬁrst Speciﬁcity Theming !im portant selectors

Slide 49

Slide 49 text

OOCSS 2009 Nicole Sullivan ... ...

Slide 50

Slide 50 text

OOCSS BEM 2009 2009 Yandex /* Main entity */ .block { } Element Block State /* Entity part */ .block__element { } /* State change */ .block__element--disabled { } .block--disabled { }

Slide 51

Slide 51 text

OOCSS BEM 2009 2009

Text description

.media .media__img .media__text Yandex

Slide 52

Slide 52 text

OOCSS BEM 2009 2009 /* LESS (or others) */ .block { &__element { &--disabled { } } } Element Block Element /* CSS */ .block {} .block__element {} .block__element--disabled {} Yandex

Slide 53

Slide 53 text

OOCSS BEM SMACSS 2009 2009 2013 Jonathan Snook Base Modules Layout State Theme

Slide 54

Slide 54 text

OOCSS BEM SMACSS 2009 2009 2013 Jonathan Snook Base Modules Layout State Theme

Slide 55

Slide 55 text

OOCSS BEM SMACSS ACSS 2009 2009 2013 2013

Text description

ma in-to : 20p bo er-bottom: 0 te t-ali : center

Slide 56

Slide 56 text

OOCSS BEM SMACSS ACSS 2009 2009 2013 2013 Adam Wathan TailWind CSS (2017)

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Methodologies FANBOY POSITIVE FEEDBACK NOT INTERESTED HATER

Slide 60

Slide 60 text

FIRST ERA DOCUMENTS ERA SECOND ERA PREPROCESSORS ERA THIRD ERA COMPONENTS ERA

Slide 61

Slide 61 text

SPOILER

Slide 62

Slide 62 text

POSTCSS 2013 PostCSS Preprocessor Other tools Postprocessor 2014 StyleLint

Slide 63

Slide 63 text

PREPROCESS ? (Not CSS) CSS (Real CSS) CSS (End CSS) & postcss-nesting postcss-font-magician postcss-import postcss-preset-env autoprefixer POSTPROCESS ?

Slide 64

Slide 64 text

2016 DEAD CODE 2013 2017 2015 CSSO PurifyCSS unCSS PurgeCSS 2011 2015 clean-css cssnano CSS MINIFICATION

Slide 65

Slide 65 text

postcss-preset-env rucksack-css ESTÁNDAR NO ESTÁNDAR postcss-font-magician ? ? ?

Slide 66

Slide 66 text

FOR DESIGNERS: CASCADE THE "C" IN CSS... FOR PROGRAMMERS: COLLISION

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

THE GREAT DIVIDE https://css-tricks.com/the-great-divide/

Slide 69

Slide 69 text

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!!

Slide 70

Slide 70 text

GLOBAL COMPONENT COMPONENT COMPONENT COMPONENT LOCAL

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

document.body.innerHTML = ` div { color: red; }

Hello!

`; innerHTML ES2015+ glo l

Slide 73

Slide 73 text

const div = document.createElement('div'); div.textContent = 'Hello!'; div.style.color = 'red'; document.body.append(div); inline styles lo

...

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

CSS MODULES 2015 CSS Modules /* local button.css */ .button { background: blue; } /* global w/ css modules */ ._button_a7BHw81t { background: blue; } { 'button': '_button_a7BHw81t' }

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

2010 FRAMEWORKS 2013 2014 React Vue.js AngularJS 2016 Angular

Slide 78

Slide 78 text

2010 FRAMEWORKS 2013 2014 React Vue.js AngularJS 2016 Angular not opinionated not opinionated

... sass stylus postcss

Slide 79

Slide 79 text

2012 Webpack BUILD TOOLS 2013 2017 Gulp.js Parcel.js

Slide 80

Slide 80 text

CSS-in-JS Andrey Sitnik, PostCSS author

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

CSS-IN-JS 2016 2017 2018 Styled Components Emotion Linaria

Slide 83

Slide 83 text

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 = () => ( Hi! ); Styled Components Object syntax

Slide 84

Slide 84 text

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 = () => ( Hi! ); Styled Components Template literal syntax

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

THE CHOSEN

Slide 87

Slide 87 text

CSS-in-JS FANBOY POSITIVE FEEDBACK NOT INTERESTED HATER

Slide 88

Slide 88 text

SHADOW DOM v1 WEBCOMPONENTS

Slide 89

Slide 89 text

h1 { background: hotpink } const node = document.querySelector('.node'); node.attachShadow({ mode: 'open' }); Default content `;

Outside

Inside

node.shadowRoot.innerHTML = ` h1 { background: blue }

Shadow DOM

Inside Outside `; Shadow DOM Inside

Slide 90

Slide 90 text

class BaseElement extends HTMLElement { constructor() { super(); this.innerHTML = `

Hi!

`; } } customElements.define('base-element', BaseElement);

Slide 91

Slide 91 text

class BaseElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` h2 { background: green; }

Hi!

`; } } customElements.define('base-element', BaseElement);

Slide 92

Slide 92 text

WebComponent LightDOM WebComponent ShadowDOM (open) CSS Global a ects DOM selectable WebComponent ShadowDOM (closed)

Slide 93

Slide 93 text

PRESENT { HTML Templates } { Shadow DOM } { Custom Elements } FUTURE { CSS Modules } { HTML Modules } { JSON Modules }

Slide 94

Slide 94 text

CONSTRUCTABLES STYLE SHEETS const css = new CSSStyleSheet(); css.insertRule('h2 { background: red }'); this.shadowRoot.adoptedStyleSheets = [css];

Slide 95

Slide 95 text

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';

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

WebComponents.dev Online Platform Editor

Slide 98

Slide 98 text

https://github.com/ManzDev/frontend-evolution

Slide 99

Slide 99 text

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.