從 Styled System 看下一代 CSS 技術

2019/12/19
@ ReactJS.tw

從 CSS 的技術演變到 Styled System 的介紹，分享 React 實作 Styled System 的技巧以及目前市面上常見現成套件的選擇。

https://reactjs.kktix.cc/events/react13

Transcript

1. 從 Styled System 看下⼀一代 CSS 技術 Anna Su
2. Anna Su Front-end Engineer
3. 技術演變 CSS
4. 傳統 CSS @池⽥田曉⼦子
5. SASS LESS index.sass .breadcrumb { display: flex; } .breadcrumb-item { display: flex; &.active { color: $breadcrumb-active-color; } }
6. BEM OOCSS SMACSS index.sass .breadcrumb { display: flex; } .breadcrumb__item { display: flex; &.breadcrumb__item--active { color: $breadcrumb-active-color; } }
7. 的時代 元件化
8. CSS Module breadcrumb.sass .breadcrumb { display: flex; .item { display: flex; &.active { color: blue; } } } Breadcrumb.js import React from "react"; import styles from "./breadcrumb.scss"; const Breadcrumb = () => { return ( <div className={styles.breadcrumb}> <div className={styles.item}>products</div> <div className={styles.item}>iphone</div> <div className={`${styles.item} ${styles.active}`}> airpods </div> </div> ); } export default Breadcrumb;
9. CSS Module breadcrumb.sass .breadcrumb { display: flex; .item { display: flex; &.active { color: blue; } } } Breadcrumb.js import React from "react"; import classNames from "classnames"; import styles from "./breadcrumb.scss"; const cx = classNames.bind(styles); const Breadcrumb = () => { return ( <div className={cx('breadcrumb')}> <div className={cx('item')}>products</div> <div className={cx('item')}>iphone</div> <div className={cx('item', 'active')}> airpods </div> </div> ); }; export default Breadcrumb; classnames
10. CSS in JS Breadcrumb.js import React from "react"; import styled from "styled-components"; const Wrapper = styled.div` display: flex; `; const Item = styled.a` display: flex; color: ${props => (props.active ? "blue" : "black")}; &::after { content: "/"; } &:last-child { &::after { content: ""; } } `; const Breadcrumb = () => { return ( <Wrapper> <Item>products</Item>
11. 不容易易修改樣式 UI component library
12. Ant Design
13. Slider
14. @slider-rail-background-color-hover: #e1e1e1; @slider-track-background-color: @primary-3; @slider-track-background-color-hover: @primary-4; Ant Design Less variables
15. 找到對應的 class 名稱，再覆蓋樣式 如果需要變更更樣式
17. const StyledSlider = styled(Slider)` .ant-slider-handle { width: 24px; height: 24px; margin-top: -10px; } `; <StyledSlider defaultValue={30} !/>
18. 有沒有辦法更更彈性的修改樣式？
19. 簡介 Styled System
20. 是⼀一個 Library Styled System 幫我們快速建立 API ⼀一致的 UI 元件
21. 提供 style props API Styled System
22. Button B U T T O N Button
23. import { space, layout, typography, border, color } from 'styled-system'; const StyledButton = styled.button` cursor: pointer; ${space} ${color} ${layout} ${typography} ${border} `; <StyledButton mr="5px" color="white" bg="blue" fontSize="16px" borderRadius="5px!"> Button !</StyledButton>
24. import { space, layout, typography, border, color } from 'styled-system'; const StyledButton = styled.button` cursor: pointer; ${space} ${color} ${layout} ${typography} ${border} `; <StyledButton mr="5px" color="white" bg="blue" fontSize="16px" borderRadius="5px!"> Button !</StyledButton>
25. import { space, layout, typography, border, color } from 'styled-system'; const StyledButton = styled.button` cursor: pointer; ${space} ${color} ${layout} ${typography} ${border} `; <StyledButton mr="5px" color="white" bg="blue" fontSize="16px" borderRadius="5px!"> Button !</StyledButton>
26. import { space, layout, typography, border, color } from 'styled-system'; const StyledButton = styled.button` cursor: pointer; ${space} ${color} ${layout} ${typography} ${border} `; <StyledButton mr="5px" color="white" bg="blue" fontSize="16px" borderRadius="5px!"> Button !</StyledButton>
27. import { space, layout, typography, border, color } from 'styled-system'; const StyledButton = styled.button` cursor: pointer; ${space} ${color} ${layout} ${typography} ${border} `; <StyledButton mr="5px" color="white" bg="blue" fontSize="16px" borderRadius="5px!"> Button !</StyledButton>
28. <Button mr="5px" color="white" bg="blue" fontSize="16px" !!... > Button !</Button> Button B U T T O N Button
29. ⼤大幅降低 props 命名不⼀一致的問題
30. <Label fontColor="green" borderColor="green!">Label1!</Label> Button2 Button1 Label2 Label1 <Button color="white" backgroundColor="blue!">Button1!</Button>
31. <Label color="green" borderColor="green!">Label1!</Label> <Button color="white" bg="blue!">Button1!</Button> Button2 Button1 Label2 Label1
32. 傳入樣式的程式碼更更簡潔
33. const StyledButton = styled.button` padding: ${(props) !=> props.padding}; margin-left: ${(props) !=> props.marginLeft}; width: ${(props) !=> props.width}; height: ${(props) !=> props.height}; font-size: ${(props) !=> props.fontSize}; font-family: ${(props) !=> props.fontFamily}; line-height: ${(props) !=> props.lineHeight}; border: ${(props) !=> props.border}; border-radius: ${(props) !=> props.borderRadius}; color: ${(props) !=> props.color}; background-color: ${(props) !=> props.backgroundColor}; cursor: pointer; … `; const StyledButton = styled.button` ${space} ${layout} ${typography} ${border} ${color} cursor: pointer; `;
34. 可⾼高度⾃自定義的 theme Styled System
35. const theme = { breakpoints: ['768px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { black: '#000', blacks: ['#ccc', '#999'] white: '#fff', primary: '#456000', }, !!... }
36. const theme = { colors: { black: '#000', white: '#fff', primary: '#456000', }, !!... }
37. <Box color="primary" !/> export const Box = styled.div` ${color} `; const theme = { colors: { black: '#000', white: '#fff', primary: '#456000', }, !!... }
38. import React from 'react'; import { ThemeProvider } from 'styled-components'; import theme from './theme'; const App = props !=> ( <ThemeProvider theme={theme}> {!/* application elements !*/} !</ThemeProvider> ) export default App; const theme = { breakpoints: ['768px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { black: '#000', blacks: ['#ccc', '#999'] white: '#fff', primary: '#456000', }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } }
39. <Box m={2} !/> <Box p={[2, 3]} !/> <Box fontSize={[1, 2]} !/> <Box color="primary" !/> <Box color="blacks.0" !/> const theme = { breakpoints: ['768px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { black: '#000', blacks: ['#ccc', '#999'] white: '#fff', primary: '#456000', }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } }
40. <Box m={2} !/> <Box p={[2, 3]} !/> <Box fontSize={[1, 2]} !/> <Box color="primary" !/> <Box color="blacks.0" !/> const theme = { breakpoints: ['768px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { black: '#000', blacks: ['#ccc', '#999'] white: '#fff', primary: '#456000', }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } }
41. <Box m={2} !/> <Box p={[2, 3]} !/> <Box fontSize={[1, 2]} !/> <Box color="primary" !/> <Box color="blacks.0" !/> const theme = { breakpoints: ['768px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { black: '#000', blacks: ['#ccc', '#999'] white: '#fff', primary: '#456000', }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } }
42. ⾃自訂不同的元件變異異 Styled System
43. const theme = { buttons: { size: { large: { height: 40, padding: '0 10px', }, small: { height: 26, padding: '0 10px', }, default: { height: 32, padding: '0 10px', }, }, }, … } Button Button Button Default Small Large
44. const theme = { buttons: { size: { large: { height: 40, padding: '0 10px', }, small: { height: 26, padding: '0 10px', }, default: { height: 32, padding: '0 10px', }, }, }, … } Button Button Button Default Small Large
45. <Button size="large!">Button!</Button> const Button = styled.button` ${buttonSizeStyle} `; const buttonSizeStyle = variant({ prop: 'size', key: 'buttons.size', }); Button Button Button Default Small Large
46. <Button size="large!">Button!</Button> Button Button Button Default Small Large const theme = { buttons: { size: { large: { height: 40, padding: '0 10px', }, small: { height: 26, padding: '0 10px', }, default: { height: 32, padding: '0 10px', }, }, }, … }
47. Primary Default Danger Button Button Button
48. const theme = { buttons = { default: { color: "white", backgroundColor: "gray" }, primary: { color: "white", backgroundColor: "blue" }, danger: { color: "black", backgroundColor: "tomato" }, … }
49. import { buttonStyle } from "styled-system"; const Button = styled.button` ${buttonStyle} `;
50. <Button>Button!</Button> <Button variant='primary'>Button!</Button> <Button variant='danger'>Button!</Button> Button.defaultProps = { variant: 'default', }
51. const theme = { buttons = { default: { color: "white", backgroundColor: "gray" }, primary: { color: "white", backgroundColor: "blue" }, danger: { color: "black", backgroundColor: "tomato" }, … } Button Button Button Primary Default Danger <Button variant='danger'>Button!</Button>
52. Button Danger <Button variant='danger' size='large'>Button!</Button> Large
53. 能夠靈活變更更 RWD 樣式 Styled System
55. <Article width={[1, 1 / 2, 1 / 4]} !/> const theme = { breakpoints: ['576px', '768px'] };
56. const breakpoints = ['576px', '768px']; <Article width={[1, 1 / 2, 1 / 4]} !/>
57. const Article = styled.div` width: 100%; … @media (min-width: 567px) { width: 50%; … } @media (min-width: 768px) { width: 25%; … } `; <Article width={[1, 1 / 2, 1 / 4]} !/> const breakpoints = ['576px', '768px'];
58. Anna Su Front-End Developer anna@branch8.com 935-721-3322 anna@branch8.com 935-721-3322 Anna Su Front-End Developer
59. Anna Su Front-End Developer anna@branch8.com 935-721-3322 anna@branch8.com 935-721-3322 Anna Su Front-End Developer import { flexbox, space, typography } from 'styled-system'; const Info = styled.div` display: flex; ${flexbox} ${space} ${typography} `; <Info justifyContent={['flex-start', 'space-between']} mb={[5, 13]} fontSize={[12, 14]}> !</Info>
60. style props API Theme Specification Variants Responsive Styles
61. 建立⾃自⼰己團隊的 UI Component 透過 Styled System
64. 請設計師提供 Design System
65. @css day 2019
66. @css day 2019
71. @84colors
72. @css day 2019
73. 可以在開發時，更更全⾯面思考該如何抽象化樣式 Design system
74. ⽤用 Styled System 開發元件需要注意的細節
75. theme 使⽤用 array 設定樣式時， 需要花比較多時間思考
76. theme.js const theme = { breakpoints: ['40em', '52em', '64em'], space: [0, 4, 8, 16, 24, 32, 64], colors: { blacks: ['#000', '#ccc', '#aaa', '#eee', '#999'] }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } }
77. <Box m={5} !/> <Box p={[3, 4]} !/> <Box color="blacks.2" !/>
78. const theme = { breakpoints: ['40em', '52em', '64em'], space: [0, 1, 2, 4, 8, 16, 32, 64], colors: { !!... }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } } 有邏輯的 Array space value = 2 的 n 次⽅方 space index = n + 1
79. <Box m={6} !/> <Box p={[3, 4]} / m="32px" p=["4px", "8px"]
80. const theme = { colors: { primary: '#4560B0', primaryDark: '#233771', primaryHover: '#6A7FBF', primaryLight: '#B9C4E3', danger: '#f44336', icon: '#aaa', link: '#4A90E2', border: '#ccc', } } 有語意的 key
81. primary="#4560B0" <Icon color="primary" !/>
82. 注意樣式被覆蓋的問題
83. const Title = styled.h2` ${space} margin: 0; `; <Title m="16px!">Hello!</Title> module 的順序在上⽅方 造成樣式被覆蓋
84. const Title = styled.h2` margin: 0; ${space} `; <Title m="16px!">Hello!</Title> 建議 module 統⼀一放在 樣式下⽅方
85. export const Box = styled.div` box-sizing: border-box; ${space} ${layout} `; <Title m="16px!">Hello!</Title> const Title = styled(Box)` line-height: 1.42; font-weight: normal; margin: 0; `; 擴充元件時， 注意樣式被覆蓋
86. export const Box = styled.div` box-sizing: border-box; ${space} ${layout} `; <Title m="16px!">Hello!</Title> export const Title = styled(Box).attrs({ m: 0 })` line-height: 1.42; font-weight: normal; `; 擴充元件時， 建議使⽤用 attach props
87. 使⽤用第三⽅方 UI Library Styled System
88. rebass
89. grommet
92. Slider
93. <Slider defaultValue={30}> <SliderTrack bg="red.100" !/> <SliderFilledTrack bg="tomato" !/> <SliderThumb size={5} border="2px solid" borderColor="tomato"!/> !</Slider>
94. const StyledSlider = styled(Slider)` .ant-slider-handle { width: 24px; height: 24px; margin-top: -10px; } `; <StyledSlider defaultValue={30} !/> @slider-rail-background-color-hover: #e1e1e1; @slider-track-background-color: @primary-3; @slider-track-background-color-hover: @primary-4; <Slider defaultValue={30}> <SliderTrack bg="red.100" !/> <SliderFilledTrack bg="tomato" !/> <SliderThumb size={5} border="2px solid" borderColor="tomato"!/> !</Slider>
95. <Slider defaultValue={30}> <SliderTrack bg="red.100" !/> <SliderFilledTrack bg="tomato" !/> <SliderThumb size={5} border="2px solid" borderColor="tomato!"> <Box color="tomato" border="5px solid" borderRadius="50%" !/> !</SliderThumb> !</Slider>
98. <Text color="red!">紅⾊色!</Text>
99. <Font color="red!">紅⾊色!</Font> 的逆襲？ HTML
100. ‣ https://styled-system.com/ ‣ Brad Frost | The Technical Side of Design Systems | UI Special, CSS Day 2019 ‣ https://material-ui.com/system/basics/ ‣ https://material.io/design/ ‣ https://ant.design/components/slider/ ‣ https://storybook.grommet.io/ Reference