Yak shaving logs


My life is just yak shaving.

良いCSSの設計を考えるために「Web製作者のためのCSS設計の教科書」を読んでみた

2017/07/13 #css #bem #oocss #smacss

基本的にフロントからバックエンドまで実装することが多いのですが、
バックエンドの方が得意ということもあってHTML, CSSなどは既存のコードを見て雰囲気でやっていました。

既存のCSSを見て使いにくいなあとかイケてなさそうだなあということが多々あり、
ちゃんとCSSの設計を勉強しようと思っていたところ先輩からこの本を貸していただいたので、
読んでみることにしました。

Web製作者のためのCSS設計の教科書

良いCSS

Philip Walton氏のブログCSS Architectureで紹介されていた内容が触れられています。

予測しやすい
予測しやすいCSSとはルールが期待通りに振る舞うことを意味する。ルールを追加・更新したとき、そのルールが意図せずサイトの一部に影響を与えるべきではない。滅多に変更されない小規模なサイトであれば、このことはあまり重要ではないが、数十、数百ページの大規模なサイトであれば、予測しやすいCSSは必須といえる。

再利用しやすい
CSSのルールは抽象的で、十分に分離されているべきである。それはパターンとすでに解決した問題を書きなおす必要なく、既存のパーツから新しいコンポーネントを速くつくることができるということだ。

保守しやすい
サイトに新しいコンポーネントと機能が追加・更新されるか、再編される必要があるとき、既存のCSSのリファクタリングを必要とすべきではない。ページにコンポーネントXを追加するときに、そのわずかな存在によってコンポーネントYを壊すべきではない。

拡張しやすい
サイトが大きく、複雑に成長していくにつれて、通常はたくさんのデベロッパがメンテナンスのために必要となる。 拡張しやすいCSSとはひとりのデベロッパか、大きなエンジニアチームかを問わず、容易に管理できることを意味する。またそのサイトのCSSアーキテクチャに、巨大な学習曲線を必要することなく容易に近づけるという意味でもある。あなたが今日CSSを触る唯一のデベロッパだからといって、先々にも常にあなただけであるというわけではない。

オリジナル記事の翻訳から上記を引用しました。

CSSの設計

Web製作者のためのCSS設計の教科書で紹介されていた設計の思想やフレームワークを簡単にまとめます。

OOCSS

OOCSSはObject-Oriented CSS(オブジェクト指向CSS)の略語です。ひとことで言うと「再利用可能なCSS」です。
オブジェクト指向はエンジニアに馴染み深いですが、最近、オブジェクト指向設計実践ガイドを読みだして、まだまだオブジェクト指向を理解して使いこなせてないと思っています。

脱線しましたが、再利用可能な形でCSSを書くとしたら以下のようなイメージでしょうか。

<div class="main">
  <div class="box bordered">
  </div>
</div>

SMACSS

SMACSSはScalable and Modular Architecture for CSSの略語で、日本語では「スマックス」と読みます。
公式のドキュメントは購入が必要そうなので見るのを諦めました。
https://smacss.com/ja

TODO: 簡単なサンプルを用意する

BEM

BEMは、Block、Element、Modifierの略語で、日本語では「妖怪人間ベム」と読みます。
https://en.bem.info/methodology/

TODO: 簡単なサンプルを用意する

このエントリーをはてなブックマークに追加

categories


最新記事


tags