『CSS設計の教科書』を読んだ

『CSS設計の教科書』を読んだWeb制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法」を読みました。読書メモとして記録しておきます。

全体として豊富な、便利サイトの詳解とともに大枠で設計について考えさせてくれる本です。そこに答えはないのですが、考えるためのヒントを沢山もらえるという点で良い本だと思います。そもそも汎用的な答えはないものだと思うので。

設計について

コンポーネント設計

OOCS/SMACSS/BEM/MCSS/FLOCSS(著者作成)と様々な考え方があるが、僕はSMACSS(Scalable and Modular Architecture for CSS)がわかりやすくて、Twitter Bootstrapの書き方と似ていて採用しやすいなと感じた。ただ、BEM(Box Element Modifier)のレイヤーの考え方も意識してやってみたい。

要素の異なるパターンがあった場合、派生のところで元のCSSを無効化する書き方をしない

追加する。

.title {
  margin-bottom: 0.5em;
  font-size: 2em;
}

.headline {
  padding-bottom: 10px;
  border-bottom: 2px solid #000;
}

詳細度を意識する

詳細度が高いほうが優先される。これはちゃんと考えたことがなかった。

  1. !important
  2. インライン記述(style属性)
  3. IDセレクタ
  4. クラスセレクタ、属性セレクタ、擬似クラス
  5. 要素セレクタ、擬似要素
  6. ユニバーサルセレクタ

の順に詳細度が低くなる。それぞれの単位で詳細度を累積しえ高いほうが優先される。Specificity Calculatorが参考になりそう。

シングルクラスかマルチクラスか

シングルクラス設計とは、Sassの@extendsなどを使って1つのクラスで見た目を決めてしまうもの。マルチクラスは、Twitter Bootstrapの様に、複数のクラスの組み合わせで見た目を決めるもの。マルチクラスのほうがHTMLに書き込むものは多くなるけどわかりやすくて良い気がした。

本とは別に調べたことメモ

CSSの基本的なことがわかっていないので、もっと具体的なCSSの概要本にも目を通しておいたほうがいいかもしれない。

display

displayプロパティは、ブロックレベル・インライン等の、要素の表示形式を指定する際に使用します。
ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素で 一般的なブラウザでは前後に改行が入って表示されます。 インライン要素とは、主に文章の一部として利用される要素でその前後は改行されません。

display-スタイルシートリファレンス

position

positionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。
positionプロパティで指定するのは、配置方法(基準位置)のみです。 実際の表示位置の指定には、 top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。

position-スタイルシートリファレンス

content

contentプロパティは、要素の直前または直後に、文字列や画像などのコンテンツを挿入する際に使用します。 contentプロパティを適用することができるのは、:before擬似要素および:after擬似要素のみです。
擬似要素(pseudo-element)とは、直訳すれば「偽りの要素」となります。 要素の一部にスタイルを適用するために、擬似的に設定される「要素のようなもの」のことです。 :before擬似要素および:after擬似要素は、要素の直前および直後に、文字列や画像などのコンテンツ(内容)を挿入するために擬似的に設定されます。

content-スタイルシートリファレンス

overflow

overflowプロパティは、ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。
overflowプロパティは、デザインやインターフェースの好みで、 擬似フレームや擬似テキストエリア的な表現にしたい場合に用いるケースが多いようです。

overflow-スタイルシートリファレンス

Pocket
LINEで送る

You may also like...