Chapter 09

CSS フレームワーク・ライブラリ

ほげさん
ほげさん
2021.12.19に更新

言語

知識とイメージが 20 年前くらいのやつで止まってる

CSS

🤔 さすがに知ってる

  • Cascading Style Sheets は HTML の修飾を指示する仕様の1つ
  • World Wide Web Consortium ( W3C ) が勧告する
  • メディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変えられる
  • CSS を重ねる ( Cascading ) ことができる
    • ユーザエージェントによる定義
    • Web サイト作成者による定義
    • ユーザによる定義

😗 概ね齟齬なし

Sass

🤔 なんかすごい CSS

  • Syntactically Awesome Style Sheets はスタイルシート言語
  • CSS で解釈される 2 種類の構文で構成されたスクリプト言語である
    • SASS 構文: 字下げを用いる、単に Sass と言ったらこれを指すこともある
    • SCSS 構文: ブロック書式を用いる
  • Sass インタプリタが SassScript を CSS に変換する
  • $var@for などを使ったり、ブロックを入れ子にしたりできる

😗 CSS に変換できるなんかすごい ( Awesome ) メタ言語ってことでいいのかな...??

SCSS

🤔 Sass と似ている

  • Sass の記法の 1 つ
  • 従来の CSS のようにブロックや、ネストを使用する
  • SCSS 記法で書かれた Sass ファイルの拡張子は .scss

😗 Sass 使うって言っといて拡張子が .scss なのはそういうことだったのか

SASS

🤔 Sass とは違うの...??

  • Sass の記法の 1 つ
  • インデントを使うことでセミコロンや波括弧を用いない
  • SASS 記法で書かれた Sass ファイルの拡張子は .sass

😗 あまり見かけない気がする、文脈から言語か記法か判断すればいいのかな

CSS フレームワーク

分類のポイントと曖昧さは JavaScript フレームワーク・ライブラリと同じ

Tailwind CSS

🤔 職場でよく聞こえるやつの 1 つ、いかした名前ということしか知らぬ

  • CSS フレームワーク
  • 小さい util class を直接複数つけていくのが基本方針っぽい
  • Tailwind CSS のクラスをまとめたクラスを作るのも容易
  • 従来の CSS 設計とは異なる思想に基づいている

e.g. 従来の class 設計では、どの UI に対して適用するか明確にするし親子関係などもある

<div class="chat">
  <img class="chat-logo" src="logo.svg">
  <h4 class="chat-title">Hoge hoge</h4>
  <p class="chat-message">hoge hoge hoge</p>
</div>

e.g. Tailwind CSS では UI 構造を CSS に持ち込まず、小さい独立 class を用いる

<div class="p-6 bg-white shadow-md flex items-center space-x-4">
  <img class="h-12 w-12" src="logo.svg">
  <h4 class="text-xl font-medium text-black">Hoge hoge</h4>
  <p class="text-gray-500">hoge hoge hoge</p>
</div>

😗 CSS にもフレームワークがあるのか... 全く知らなかった...

CSS ライブラリ

分類のポイントと曖昧さは JavaScript フレームワーク・ライブラリと同じ

Chakra UI

🤔 職場でよく聞こえるやつの 1 つ、キャッチーな名前ということしか知らぬ

  • React の UI コンポーネントライブラリ
  • TypeScript でできている
  • class と style ではなく JSX ( TSX ) でレイアウトする

e.g.

import { Box, Image, Badge, Text } from "@chakra-ui/react";

export default function Example() {
  return (
    <Box p="5" maxW="320px" borderWidth="1px">
      <Image borderRadius="md" src="https://bit.ly/2k1H1t6" />
      <Badge colorScheme="pink">Foo</Badge>
      <Text ml={2} color="pink.800">Foo foo foo</Text>
    </Box>
  );
}
生成結果
<div class="css-gdfgib">
  <img class="chakra-image css-4p5h3n" src="https://bit.ly/2k1H1t6">
  <span class="chakra-badge css-b53wxp">Foo</span>
  <p class="chakra-text css-1nbpsat">Foo foo foo</p>
</div>

<style data-emotion="css" data-s="">
.css-1nbpsat { 
  margin-left:var(--chakra-space-2);
  color:var(--chakra-colors-pink-800);
}
</style>

😗 React 用の CSS ライブラリというところまでは把握した

Material-UI

🤔 職場でよく聞こえるやつの 1 つ、かっこいい名前ということしか知らぬ

  • Google の React の UI コンポーネントライブラリ
  • React 向けに Material Design の UI 部品を定義したコンポーネント集が Material-UI
  • TypeScript でできている
  • class と style ではなく JSX ( TSX ) でレイアウトする

e.g.

import Button from '@mui/material/Button';

function Example() {
  return <Button variant="contained">Hello World</Button>;
}
生成結果
<button class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root css-sghohy-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button">
Hello World
</button>

😗 たまに見る mui ってこれかー

styled-components

🤔 CSS を小さくしましょうみたいなはなし?

  • CSS-in-JS のライブラリの 1 つ

e.g. ( CSS in JS のところに置いたコードを再掲 )

import styled from 'styled-components';

const Text = styled.div`
  color: white,
  backgroundColor: black
`

<Text>hoge hoge hoge</Text>
生成結果
<style>
.ow9s02gin3 {
  background-color: black;
  color: white;
}
</style>

<p class="ow9s02gin3">hoge hoge hoge</p>

😗 方針ではなくてライブラリ名だったのか

ちょっとまとめ

これもぶっちゃけキリがないのでここまで、Bootstrap や emotion などは必要になったら調べる

ライブラリなんだということがわかっただけでも今は十分

まとめ

CSS にフレームワーク / ライブラリがあるとすら考えたことがなかった

それがわかっただけでも今後の会話は少し楽になりそう

image