React CSS Modules Buy - Amazon AWS

.css__in--react { will-change: transform; }

CSS IN React

Joe Seifi

Eventbrite

*LI.prebreak: 0.5 *LI.postbreak: 0.5 *OL.LI.label: 1 *OL*OL.LI.label: A

@BODY fo(fa=he,si=18) @P co(nu=3,wi=80)

tags.H1.color = "blue"; tags.p.fontSize = "14pt"; with (tags.H3) { color = "green"; } classes.punk.all.color = "#00FF00" ids.z098y.letterSpacing = "0.3em"

LI { VertPos: Top = LeftSib . Actual Bottom; } A { if (getAttribute(self, "href") != "") then fgColor = "blue"; underlineNumber = 1; endif }

(style a (block #f) ; format as inline phrase (color blue) ; in blue if you’ve got it (click (follow (attval 'href))) ; and on click, follow url

(element H1 (make paragraph font-size: 14pt font-weight: 'bold))

h1.font.size = 24pt 100% h2.font.size = 20pt 40%

(BODY fontSize=normal BGColor=white FGColor=black (H1 fontSize=largest BGColor=red FGColor=white) )

Pre-CSS 1993-1996 RRP @BODY fo(fa=he,si=18) @P co(nu=3,wi=80)

RRP *LI.prebreak: 0.5 *LI.postbreak: 0.5 *OL.LI.label: 1 *OL*OL.LI.label: A

PSL JSSS tags.H1.color = "blue"; tags.p.fontSize = "14pt"; with (tags.H3) { color = "green"; } classes.punk.all.color = "#00FF00" ids.z098y.letterSpacing = "0.3em"

LI { VertPos: Top = LeftSib . Actual Bottom; } A { if (getAttribute(self, "href") != "") then fgColor = "blue"; underlineNumber = 1; endif }

RRP (style a (block #f) ; format as inline phrase (color blue) ; in blue if you’ve got it (click (follow (attval 'href))) ; and on click, follow url

DSSSL (element H1 (make paragraph font-size: 14pt font-weight: 'bold))

CHSS h1.font.size = 24pt 100% h2.font.size = 20pt 40%

PWP (BODY fontSize=normal BGColor=white FGColor=black (H1 fontSize=largest BGColor=red FGColor=white) )

My first website ~ 1997

JavaScript

MVC

!11

Components

💄

CSS

Modular CSS

BEM

in

JS

SMACS

ATOMIC OOCSS

CSS

SUIT

💄

Super Powers of CSS - Automation - Sharable - Adaptable

- Scalable - Maintainable

in

React

Giving up Control, actually gives you more control and new

Super Powers

Automation

Managing CSS Classnames

There are only 2 hard problems in Computer Science: cache invalidation & naming things Phil Karlton from Netscape

B__E--M

>

0__1--0

regular css imports button.css

import './button.css'

.btn { color: #fff; background: pink;
 }

css-modules button.css

import styles from './button.css'

.btn { color: #fff; background: pink;
 }

css-modules button.css

import styles from './button.css' console.log(styles) > { }

“btn": "button_btn_2Yt"

.btn { color: #fff; background: pink;
 }

React CSS Modules button.css

import React from 'react' import CSSModules from ‘react-css-modules' import styles from ‘./button.css’ @CSSModules(styles) const Button = ({ children }) => {children} Buy

.btn { color: #fff; background: pink;
 }

React CSS Modules button.css

import React from 'react' import CSSModules from ‘react-css-modules' import styles from ‘./button.css’ @CSSModules(styles) const Button = ({ children }) => {children} // render Buy

.btn { color: #fff; background: pink;
 }

browser

.button_btn_2Yt { color: #fff; background-color: pink; } Buy Buy

DeCSS Button.css

import React from 'react' import { Button } from './Button.css'

.Button { color: #fff; background: orange; }

DeCSS Button.css

import React from 'react' import { Button } from './Button.css' const MyButton = ({ children }) => ( {children} )

// render Buy

.Button { color: #fff; background: orange; }

DeCSS Button.css

import React from 'react' import { Button } from './Button.css' const MyButton = ({ children }) => ( {children} )

// render Buy

.Button { color: #fff; background: orange; }

browser

.button_Button_2V6 { color: #fff; background: orange; } Buy Buy

Sharable

Bootstrap Nation 122K 2nd largest project on Github

React

classNames

HTML Buy 
 Buy


HTML

JavaScript

Buy 
 Buy


$("#btn").click(() => { // take money
 }

HTML

JavaScript

Buy 
 Buy


$("#btn").click(() => { // take money
 }

HTML

in

Buy 
 Buy


JavaScript

HTML

in

Buy 
 Buy


JavaScript

HTML Buy 
 Buy


CSS .btn { color: #fff; background-color: pink; }

.glue_to_ui { /** **/ }

classNames > Components

Styled Components import React from 'react' import styled from 'styled-components'

Buy

Styled Components import React from 'react' import styled from 'styled-components' const Button = styled.button` color: #fff; background-color: pink; ` Buy

Styled Components import React from 'react' import styled from 'styled-components' const Button = styled.button` color: #fff; background-color: pink; ` Buy // render Buy

browser

.ctyFSz { color: #fff; background-color: pink; } .sc-bdVaJa { } {children} )

.Button { color: #fff; background: orange; } .Button-danger { background: red; }

DeCSS Button.css

.Button { color: #fff; background: orange; }

import React from 'react' import { Button } from './Button.css' const MyButton = ({ children, danger }) => (