styled-components

CSS 的最後救贖！？

https://slides.com/hinx/css-and-my-life/

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>
}

https://github.com/styled-components/styled-components

原理
Tagged Template Literals

什麼都可以模組化

 

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 強大之處在於

 

龐大的社群

https://github.com/styled-components/awesome-styled-components

https://www.styled-components.com/ecosystem

跟 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

謝謝大家

Made with Slides.com