Upgrade to Pro — share decks privately, control downloads, hide ads and more …

いまさら styled components 入門した

8845musign
September 20, 2018

いまさら styled components 入門した

Meguro.css #3 @ oRo

8845musign

September 20, 2018
Tweet

More Decks by 8845musign

Other Decks in Technology

Transcript

  1. CSS in JS のメリット ローカルスコープ スタイルの再利用 JavaScript の利用 変数 関数など

    一部は Sass や LESS といった CSS プリプロセサーでも代替可能です
  2. Vue <template> <h1 class="heading"><slot></slot></h1> </template> <style scoped> .heading { font-size:

    40px; } </style> ... 以下省略... 普通の CSS を書く感覚で CSS in JS の恩恵を得ることができる
  3. styled components import styled from 'styled-components' const Heading = styled.h1`

    font-size: 18px; ... ` const Page = () => <Heading> 見出し</Heading> Tagged Template literals に CSS を記述 コード量がかなり少なくなった React や Vue などでコンポーネントを作るよりはるかに手軽
  4. styled components の良さ class を書かない分、記述量が減る 冗長な名前が減る ‑ ローカルスコープのおかげ Sass や

    LESS でできるようなことはたいていできる ‑ mixin や extend、function など OK
  5. 通常の Web ページのコーディングフロー 1. デザインから HTML 文章構造を設計 2. HTML を構築しつつ

    class を 各要素へ付与 3. CSS を記述して style を付与 4. 1~3 を繰り返す
  6. stlyed components を使った場合のフロー 1. デザインから HTML 文章構造を設計 2. HTML を構築

    3. 構築した HTML から必要なコンポーネントを作成 4. CSS を記述して style を付与 5. コンポーネントを HTML の各要素と置き換え 6. 1~5 を繰り返す
  7. スタイルの使い回し const transition = css` transition: background-color 150ms ease-in-out, color:

    150ms ease-in-out; ` const Button = styled.button` ${buttonBase} ${transition} ... `
  8. ローカルスコープを作るために使う const Component = () => { <Status> <div> <dt>

    腹筋</dt> <dd> 今筋肉痛</dd> </div> ... </Status> } const Status = styled.dl => { ... > div { ... } dt { ... } dd { ... } }
  9. 雑に複数の要素からなるコンポーネントを作る const BaseSiteFooter = ({ className, children }) => (

    <footer className={className}> <p><small> (c ){children}</small></p> </footer> ) className を受け取るコンポーネントを実装する
  10. 雑に複数の要素からなるコンポーネントを作る const SiteFooter = styled(BaseSiteFooter)` footer { display: flex; ...

    } small: { font-size: ${theme.font.sm}; } ` <SiteFooter> 腹筋ローラの力を信じろよ?</SiteFooter> セマンティクスを持った構造をコンポーネントにまとめて スタイルを付与。 とっても楽。
  11. 機能と外観を分離する class BaseButton extends React.Components { onClick: () { ...

    } onHhover () { ... } render () { return ( <button className={this.props.className}> {this.props.children} </button> ) } } const PrimaryButton = styled(BaseButton)`...`; const SecondaryButton = styled(BaseButton)`...`; export PrimaryButton export SecondaryButton
  12. CSS フレームワークを コンポーネント化するために使う // Bootstrap const LgPrimaryButton = styled.button.attrs({ className:

    'btn btn-lg btn-primary' }); コンポーネント生成時に class 属性を指定することができるので CSS を 1 行も書かずにコンポーネントが実装可能