styled-components
CSS 的最後救贖!?
Outline
- 回顧
- 比較比較
- 分享比較完的心得
先回顧一下
過去辛苦走來的
演化之路
是
CSS 開發方式的演化
不是
CSS Layout 的演化
現在回想一下
以前寫的第一個網頁
<head>
<style>
h1:hover {
color: red;
}
</style>
</head>
<body>
<h1 style="font-size: 36px; color: yellow;">學生會ㄉ活動相簿</h1>
<table>
<td style="border: 1px solid black;">
我愛學生會!!
</td>
<td style="background-color: pink; border: 1px solid black;">
分享活動照片給大家看~~ ^_^
</td>
<td style="border: 1px solid black; background-color: grey;">
<img src="https://i.imgur.com/knPxeLP.jpg" alt="2018團體照">
</td>
</table>
</body>
怎麼辦 網頁越長越大了
開始懷疑人生
我只想改個字的顏色啊
頁面結構和樣式全部混雜在一起了!!
到處都有一模一樣的 CSS
不是吧
等等
<head>
<style>
#title { ... }
#title:hover { ... }
table tr td { ... }
.............
</style>
</head>
<body>
<h1 id="title">學生會ㄉ活動相簿</h1>
<table>
<tr>
<td class="table-title">
我愛學生會!!
</td>
<td class="special-td table-description">
分享活動照片給大家看~~ ^_^
</td>
<td class="special-td">
<img src="https://i.imgur.com/knPxeLP.jpg" alt="2018團體照">
</td>
</tr>
</table>
</body>
看起來清爽多了
維護起來也方便多了
直到有個設計系的同學跑來告訴我
欸欸
太醜啦!!!
樣式的部分交給他負責
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1 id="title">學生會ㄉ活動相簿</h1>
<table>
<tr>
<td class="table-title">
我愛學生會!!
</td>
<td class="special-td table-description">
分享活動照片給大家看~~ ^_^
</td>
<td class="special-td">
<img src="https://i.imgur.com/knPxeLP.jpg" alt="2018團體照">
</td>
</tr>
</table>
</body>
一切都如此地美好
直到某天
我親手要改樣式的那刻
打開 styles.css 來看看
問題出在哪?
CSS
功能太陽春啦 駕駛員的問題?
預處理器
既然 CSS 這麼爛
難道沒有其他選擇嗎
瀏覽器永遠是
前端工程師的老母親
我們必須順他的意
長輩觀念保守
不隨便接受牛鬼蛇神之物
/* Sass */
#china
background-color: red
.great-wall
border-style: solid
/* Compiled */
#china {
background-color: red;
}
#china .great-wall {
border-style: solid;
}
人生又再度燃起希望
關關難過關關過
前端再戰十年
又過了一陣子
<ul class="product menu">
<li class="item active"><a href="#"></a></li>
<li class="item"><a href="#"></a></li>
</ul>
反正 Class Name 不用錢盡量用
搞不清楚某個 classname 是樣式還是其他邏輯要用的
各種匪夷所思的名字 .main-content
.main_content .content-body
.main-container .rootContainer
.activebox .inactive_box
或是更慘?
BEM
(Block、Element、Modifier)
Block、Element、Modifier
// Before
<ul class="menu">
<li class="item active"><a href="#"></a></li>
<li class="item"><a href="#"></a></li>
</ul>
// After
<div class="product">
<div class="menu">
<li class="menu__item menu__item--active"><a href="#"></a></li>
<li class="menu__item"><a href="#"></a></li>
</div>
</div>
<form class="site-search site-search--full">
<input type="text" class="site-search__field">
<input type="Submit" class="site-search__button" value="Search">
</form>
// Before
<div class="media">
<img src="logo.png" alt="logo" class="img-rev">
<div class="body">
<h3 class="welcome">Welcome!!!</h3>
<p class="helper">Hint</p>
</div>
</div>
// After
<div class="media">
<img src="logo.png" alt="logo" class="media__img--rev">
<div class="media__body">
<h3 class="welcome">Welcome!!!</h3>
<p class="helper">Hint</p>
</div>
</div>
提出這些方法
真的是好棒棒的一群人
團隊照著這規則開發後
大家都很開心了呢
取 Class Name 什麼的
也變得不再苦惱了(嗎)
很不幸地隨著
團隊 越來越大
專案/產品 越來越大
使用者的需求 越來越大
根據 DRY 原則,我們需要一個:
模組化的架構
有彈性的架構
可重用的架構
目前的前端生態系
CSS
永遠都是前端領域中
發展最慢的
遲緩兒
但 JavaScript 飛的速度我永遠都跟不上
ES6+
Babel
Webpack
......等
Webpack 等打包工具
讓我們邁向前端世界的模組化
參考每個 JS 模塊打包的方式
我們把 CSS 也打包成
一個個模塊!
CSS Modules 是個
CSS 開發的策略與方法
不是工具
也不是語言
import React from 'react';
import styles from './table.css';
export default class Table extends React.Component {
render () {
return <div className={styles.table}>
<div className={styles.row}>
<div className={styles.cell}>A0</div>
<div className={styles.cell}>B0</div>
</div>
</div>;
}
}
/* 產出如下 */
<div class="table__table___32osj">
<div class="table__row___2w27N">
<div class="table__cell___1oVw5">A0</div>
<div class="table__cell___1oVw5">B0</div>
</div>
</div>
每個 CSS 檔案都僅相依於一個 Component
再也、絕對不會互相污染,真的是好棒棒欸
然後這個百家爭鳴的時代
就這樣出現了兩派人馬
CSS Modules 派
vs
Others 派
CSS in JS
來人給 React 一對翅膀
把 CSS 寫進 JS ?!
Title Text
import React from 'react'
import styled from 'styled-components'
const Title = styled.h1`
/* This is a comment */
text-align: center;
color: red;
&:hover {
background-color: white;
}
`
render() {
return <Title>Hello World</Title>
}
什麼都可以模組化
Font Awesome
Feather
Material
Octicons
import styled from 'styled-components'
import { Menu } from 'styled-icons/feather'
import { Check } from 'styled-icons/fa-solid'
const RedCheck = styled(Check)`
color: red;
`
<div>
<Menu />
<RedCheck size={12} />
</div>
原來寫 React 也可以這麼快樂
等等!好像哪裡怪怪的
難道我完全沒辦法共用樣式嗎?
styled-components 強大之處在於
龐大的社群
跟 Bootstrap 說再見
還是有些缺點想吐槽
哪一種適合我?
CSS in CSS
優點:
1. 大家習慣的模式
2. 完美搭配已經相當成熟的 Sass/SCSS、Less、Stylus 等預處理器
門派:
CSS Modules
及過去熟悉的各種開發方式
CSS in JS
優點:
1. 只生成頁面會 render 到的樣式,易於實現 lazy-import
2. 可做 CSS 單元測試
3. 完全把樣式封裝在 Component 內
門派:
Radium, aphrodite,
styletron, polished,
styled-components
Q & A
謝謝大家
styled-components - CSS 的最後救贖!?
By hinx
styled-components - CSS 的最後救贖!?
- 1,509