kubosho / s

My slides

0 stars 0 forks source link

builderscon #3

Closed kubosho closed 7 years ago

kubosho commented 8 years ago

kubosho commented 7 years ago

CSSを破綻させない

TL;DR

デザインの意図を正しく理解しよう
CSSの設計手法は詳細度の低さとプロパティと値の定義をできるだけ少なくするためにある
CSS設計が破綻していないかツールを使って検知しよう

想定Q&A

テストはどうするのか？たとえばプロパティを無くしたり上書きしたときはレイアウトが崩れていないことをどうやって見るのか？
すでに破綻しているCSS（プロジェクトに途中から入ってそこのCSSが破綻している）はどうやって改善していけるのか？

CSS設計はなぜ破綻するのか？

上書き合戦
マルチクラス設計の場合は過度な使い回し
ルールセットの定義場所の方針がない
- ファイル・ディレクトリともに

デザインの意図を正しく理解する #とは

ブログの個別記事のキャプチャ
- たとえばタイトルと内容を区切る線

CSS設計

「CSS設計」は何から何までを指すのか？
- HTMLのマークアップも含まれる
- HTMLの要素で意味を持たせることにより、セレクタの名前も意味のある名前にできる
OOCSS, MindBEMding, SMACSS, Suit CSS, FLOCSS, MCSS, ECSS...
- いろいろある
- 望むのは詳細度の低さ、プロパティと値をできるだけ定義しないこと
CSSフレームワークを使うのならそのレールから外れない
- 上書きが多く発生すると破綻する
クラス名をPPAPにする
pen, pineapple, apple, pen

セレクタ設計の破綻を検知する

css-stats
stylestats

kubosho commented 7 years ago

1回ブログ記事として書いて、それを発表用に短くする形式を取るのでclose