Open11

CSS設計について

つきやまつきやま

良いCSSとは

良いCSSの定義としてGoogleのエンジニアのPhilip Waltonさんがブログであげているのがこの4つ

  • 予測しやすい
    そのクラスがどのような挙動をするのか予測しやすいこと。
  • 再利用しやすい
    同じようなコードを作成するのではなくコンポーネント管理をしてコードの記述を最低限にしようということ。
  • 保守しやすい
    コードの記入や修正が容易にできるような状態を作っておくということ。
  • 拡張しやすい
    すでに存在するコードをさらに拡張したい時に誰でも容易に管理ができる状態を維持すること。
つきやまつきやま

OOCSS (Object Oriented CSS / オブジェクト指向CSS)

特徴

  • 入れ物とコンテンツ中身を切り分ける
  • 構造と見た目を切り分ける
  • 場所に依存した指定方法はダメ
  • OOCSSでは1つ1つのパーツをCSSオブジェクト、またはモジュールと呼ぶ
  • 同じパーツを二度コーディングする必要がなくなる

所感

  • 1つ1つのパーツに適切な名前をつける必要がある
  • 同じパーツを使うので依存関係が生まれる
  • ちょっとした変更に弱い

参考文献

https://www.codegrid.net/articles/2014-css-template-1/

つきやまつきやま

BEM (Block、Element、Modifierの略語)

特徴

  • 開発スピードが速い
  • 長期メンテナンスが容易
  • チームの規模拡大が容易
  • コードの再利用が容易
  • JavaScriptの流用も容易
  • 既存のページが変化していくことを前提として考えられている

所感

  • class名が冗長になりがちで、単語を省略しすぎると意味が伝わらなくなる
  • BEMを知らない人から見るとわかりずらい
  • 別のBlockのElementを使い回せない

参考文献

https://www.codegrid.net/articles/2014-css-template-4/

つきやまつきやま

SMACSS (Scalable and Modular Architecture for CSS / スマックス)

スケールできて、モジュール的なCSS設計の考え方

特徴

全てのCSSルールが5つに分類される

  • Base - ベースルール
  • Layout - レイアウトルール
  • Module - モジュールルール
  • State - 状態ルール
  • Theme - テーマルール

まずサイトのCSSは、はじめにベース(Base)が存在し、そこにレイアウト(Layout)を用意し、そこにモジュール(Module)を置き、モジュールは状態(State)により変化する
と考える

厳格な命名規則などはない

Base - ベースルール

ブラウザのデフォルトスタイルのサイト版
Reset CSSやNormalize CSSを利用する

Layout - レイアウトルール

レイアウト構造の枠組みのこと
(モジュールを配置するための枠組み)

Module - モジュールルール

BEMのBlockと呼んだUIの塊

State - 状態ルール

BEMのModifierと同じようなもの

Theme - テーマルール

CSSのルールの集まりをまとめて切り替えるような仕組みです。
CSSファイルを切り替えるだけでページ全体のテーマが変わるような

ほとんどBEM

参考文献

https://www.codegrid.net/articles/2014-css-template-7/
https://www.codegrid.net/articles/2014-css-template-8/

つきやまつきやま

FLOCSS (Foundation Layout Object CSS / フロックス)

OOCSSやBEM、SMACSSのいいとこ取りをしたCSS設計思想。

特徴

構造から管理する

  • Foundation サイト全体のデフォルトスタイルを管理。
    ├ reset.scss
    ├ base.scss
    ├ variable.scss サイト全体で使える変数
    ├ mixin サイト全体で使えるmixnを管理
  • Layout 各ページを構成するサイト全体で共通したエリアを管理。
    ├ l-header.scss
    ├ l-main.scss
    ├ l-footer.scss
  • Object サイト全体で再利用できるパターンを持つモジュールを管理
    Component 小さな単位のモジュールを管理(ボタンなど)
     ├ c-button.scss
     ├ c-grid.scss
     ├ …
    Project いくつかの↑Componentと、他の要素によって構成される大きな単位のモジュールを管理
     ├ p-card.scss
     ├ p-profile.scss
     ├ ...
    Utility ComponentとProjectのモディファイア(パターン)で解決することができないスタイル、また、調整のための便利クラスなどを管理。
     ├ u-utility.scss
     ├ u-color.scss
     ├ u-margin.scss
     ├ u-padding.scss
    Theme テーマによる色の切り替えなど、ページ単位の色違いとか
     ├ t-blue.scss
     ├ ...

所感

ファイル構成まで管理する必要があるのか...?
ほとんどSMACCSでよりルールが厳しい印象

参考文献

https://qiita.com/super-mana-chan/items/644c6827be954c8db2c0

つきやまつきやま

ECSS (Enduring CSS)

特徴

大規模なWebアプリケーションのCSSを合理的に書くためアプローチ
Enduringは、「長続きする、永続的な、不朽の、我慢強い、辛抱強い」という意味を持っている
命名規則はBEMと似ている
ModuleとComponentの考え方はAtomic Designに似ている
ディレクトリ構造まで管理する

所感

FLOCSSと同じ

参考文献

https://qiita.com/manabuyasuda/items/37523e9d0bfbad34211f

つきやまつきやま

ITCSS (Inverted Triangle CSS / 逆三角形CSS)

特徴

多くの人にとって理解しやすい健全な環境
記述順とカスケードを管理すること
新旧問わず全てのルールセットが生きられる場所をつくること
無駄と重複を減らすこと
詳細度の戦いを終わらせること

CSSの詳細度順に記述していく

所感

FLOCSS ITCSSと同じ
ディレクトリを分けるとimportだらけになる

参考文献

https://qiita.com/makotot/items/2c3e99f15dca2789d403

つきやまつきやま

Atomic Design

特徴

デザインシステムを中心とした設計の方法
Atoms(原子)
Molecules(分子)
Organisms(有機体)
Templates(テンプレート)
Pages(ページ)
の5つの構造にUIを分ける

所感

縛りが少ない
CSS設計というよりはUI構造についての考え方

参考文献

https://www.codegrid.net/articles/2017-atomic-design-1/

つきやまつきやま

ディレクトリ構成や命名にまで規則を作るとレビューで不毛なやりとりが増える
ディレクトリ構成がおかしいとか、class名がおかしいとか、

成果物に対して関係がないようなやりとりを減らしたい

つきやまつきやま

CSSでは往々にして先に名前をつけてからスタイルを当てていくが
そもそも名前をつけてからスタイルを当てるのは順序が逆ではないのか?

セマンティックなclass名がCSSのメンテナンスを困難にしている

既存のCSSはちょっとでも触ると、どこに影響するか分からないのでとりあえずそのまま置いておいて、今回の改修で必要なCSSは全部新しく書こうとなる

つきやまつきやま

ユーティリティファースト

特徴

まず、ユーティリティクラスを作ってそれをHTMLに当てていく
class名を考えなくて良い
これはコンポーネントなのか?エレメントなのか?を考えなくて済む
そもそも、そのコンポーネントが2度以上使われるかどうかなんて、その時はわからない
CSSを書くことからの脱却

所感

Bootstrapとtailwindcssの違いは
BootstrapはCSSを理解していない人向けのCSSフレームワークなのに対して、tailwindcssはCSSを理解している人向け
DOMが汚くなるのはしょうがない assetという方法もあるけど名前をつけなければいけない

参考文献

https://qiita.com/Takazudo/items/5180f5eb6d798a52074f
https://note.com/hissy/n/n91a4c435f289