Home
Add Document
Sign In
Create An Account
React CSS Modules Buy - Amazon AWS
Recommend Documents
No documents
React CSS Modules Buy - Amazon AWS
Download PDF
1 downloads
196 Views
17MB Size
Report
Comment
.css-1ylegpj-C1 { padding:1em;. } .css-12zs2me-C2 { padding:2em;. } . App.j
.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 }) => (
×
Report "React CSS Modules Buy - Amazon AWS"
Your name
Email
Reason
-Select Reason-
Pornographic
Defamatory
Illegal/Unlawful
Spam
Other Terms Of Service Violation
File a copyright complaint
Description
×
Sign In
Email
Password
Remember me
Forgot password?
Sign In
Our partners will collect data and use cookies for ad personalization and measurement.
Learn how we and our ad partner Google, collect and use data
.
Agree & close