Components: A Styling Odyssey

Slide 1

Slide 1 text

COMPONENTS A STYLING ODYSSEY

Slide 2

Slide 2 text

@alexlande alexlande.com

Slide 3

Slide 3 text

SCALE STYLE at

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

.Sidebar {} .Sidebar.isExpanded {} .Sidebar__section {} .Btn {} .Btn--primary {} .Btn--round {} NAMING CONVENTIONS

Slide 6

Slide 6 text

CODE STANDARDS

Slide 7

Slide 7 text

CODE REVIEW

Slide 8

Slide 8 text

DESPITE OUR BEST EFFORTS

Slide 9

Slide 9 text

CSS AT SCALE IS HARD

Slide 10

Slide 10 text

SPECIFICITY HELL

Slide 11

Slide 11 text

SPECIFICITY HELL

Slide 12

Slide 12 text

SPECIFICITY HELL

Slide 13

Slide 13 text

SOURCE ORDER WOES

Slide 14

Slide 14 text

.header a { color: white; } .flyout a { color: purple; } SOME OPTIONS Pages LOG IN MENU

Slide 15

Slide 15 text

SOME OPTIONS Pages LOG IN MENU .flyout a { color: purple; } .header a { color: white; }

Slide 16

Slide 16 text

NAMING COLLISIONS

Slide 17

Slide 17 text

.product-page .sidebar .btn {…}

Slide 18

Slide 18 text

.ui-ProductSideBar__button

Slide 19

Slide 19 text

DEAD CODE

Slide 20

Slide 20 text

HOW DO WE FIX IT?

Slide 21

Slide 21 text

INLINE STYLES RIGHT?

Slide 22

Slide 22 text

Christopher “vjeux” Chedeau React: CSS in JS

Slide 23

Slide 23 text

I HEARD YOU HAVE TO USE INLINE STYLES IN REACT - Unattributed “

Slide 24

Slide 24 text

IT’S REALLY CSS IN JS

Slide 25

Slide 25 text

JSS APHRODITE FELA GLAMOR STYLED COMPONENTS RADIUM

Slide 26

Slide 26 text

BUTTON TIME styles = { background: "purple", display: "block", padding: "1rem" }

Slide 27

Slide 27 text

BUTTON TIME ":hover": { background: "blue" }

Slide 28

Slide 28 text

"@media (min-width: 400px)": { display: "inline-block" } BUTTON TIME

Slide 29

Slide 29 text

NO SPECIFICITY SOURCE ORDER INDEPENDENT NO NAMING COLLISIONS STYLE CO-LOCATION RUNTIME COMPUTATION GREAT

Slide 30

Slide 30 text

INCREASES JS BUNDLE SIZE CAN’T USE CSS ECOSYSTEM MORE RUNTIME COMPLEXITY LESS GREAT

Slide 31

Slide 31 text

CSS MODULES

Slide 32

Slide 32 text

// blog-post.css .title { font-size: 2rem; } // blog-post.js var styles = require("./blog-post.css");

// Rendered HTML

Slide 33

Slide 33 text

COMPOSITION

Slide 34

Slide 34 text

// blog-post.css .normal { font-size: 2rem; } .highlight { composes: normal; color: orange; } // blog-post.js var styles = require("./blog-post.css");

// Rendered HTML

Slide 35

Slide 35 text

NO NAMING COLLISIONS EXPLICIT SELECTOR IMPORTS COMPOSITION GREAT

Slide 36

Slide 36 text

DOESN’T HELP WITH SPECIFICITY DOESN’T HELP WITH SOURCE ORDER MORE BUILD COMPLEXITY LESS GREAT

Slide 37

Slide 37 text

FUNCTIONAL CSS

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

COMPOSITION (AGAIN)

Slide 41

Slide 41 text

// virtual-classes.js var title = 'font-md color-black mb3 uppercase' // blog-post.js

// Rendered HTML

Slide 42

Slide 42 text

FLAT SPECIFICITY GRAPH SOURCE ORDER INDEPENDENT SMALL CSS BUNDLE SIZES GREAT

Slide 43

Slide 43 text

NAMING COLLISIONS POSSIBLE LEARNING CURVE LESS GREAT

Slide 44

Slide 44 text

OBJECT ORIENTED CSS

Slide 45

Slide 45 text

CHALLENGES CAN BE SOLVED WITH DILIGENCE

Slide 46

Slide 46 text

CAREFUL WITH DESCENDANT SELECTORS PREFER CLASS SELECTORS CAREFUL WITH MULTI-CLASS PATTERN OOCSS ADVICE USE STYLELINT TO CHECK FOR THE ABOVE

Slide 47

Slide 47 text

THERE IS NO RIGHT ANSWER

Slide 48

Slide 48 text

BETTER UX BETTER DX means

Slide 49

Slide 49 text

KEEP PUSHING

Slide 50

Slide 50 text

@alexlande alexlande.com THANKS!

Slide 51

Slide 51 text

LINKS Speciﬁcity Graphs http://csswizardry.com/2014/10/the-speciﬁcity- graph/ React: CSS in JS https://vimeo.com/116209150 CSS Modules https://github.com/css-modules/css-modules Basscss http://www.basscss.com/ Tachyons http://tachyons.io/ Basscss Box Example http://www.basscss.com/#box React Functional CSS Protips (Virtual Classes) https://github.com/chibicode/react-functional- css-protips Radium https://formidable.com/open-source/radium/ JSS https://github.com/cssinjs/jss Aphrodite https://github.com/Khan/aphrodite Glamor https://github.com/threepointone/glamor Fela http://fela.js.org/ Styled Components https://styled-components.com/