Every Layout
CSSの方法論
具体的な実装を最小限に抑えることで、堅牢性と一貫性を実現する
本の内容が割と書かれている
できるだけ具体的な指定をせずにCSSを書くというのを追求している
より普遍的なルールに基づいて設計する
例えば、
明示的なmarginは書かない
px単位で指定しない
@mediaでの条件分岐はしない
Every LayoutではLayout Primitiveといういくつかのパーツを提示している
基本的にこれの組み合わせだけでlayoutを定義する
CSSでは意図のみを書いて、実際の見た目の裁量はブラウザに委ねる
結果を書くのではなく、意図を記述する
実際にどういう見た目にするかの裁量はBrowserに委ねる
制作者による個々の場面での判断を徹底的に排除する
CSSは、個別最適を求めれば求めるほど、
構造は複雑化する
それに対処するために場当たり的なルールを増やすことになる
運用コストは増加する
自分の首を絞める事になる
なのでそうしない。
参考
『Every Layout』の監訳者(安田祐平)の解説
>#WIP
pxに依存しない
デバイスによってpxの意味するものは変わるし、拡大してても変わる
mediaqueryを使うと、どこかの1pxの差で表示が大きく変わる点が生じる
この離散的な変更は恣意的なものであり、本来表現したいものとは違うはず
相対的な値を使う
『Every Layout』 3章の内容
utility class
例.css.font-size\:base {
font-size: var(--font-size-base) !important;
}CSSのproperty nameと全く同じ名前のclass名にする
e.g.
text-align: center なら、 .font-size:center のようにclass名に、意味を内包させる
: で連結させる命名らしい !impotant を付けて詳細度を最大化する最終調整のものなので、こうする
!important を推進する系の設計初めて見たな必要になるまで追加しない
こういう段階がある？
global、一般的なstyle
継承を含む
utility class
SMACCSっぽい