yagisukeのWebなブログスマートフォン用の表示で見るyagisukeのWebなブログWebなブログお山なブログこの広告は、90日以上更新していないブログに表示しています。2014-07-24AmazonKindle楽天ブックスCSS設計の教科書を読んで、今後意識していくべき項目を大雑把にまとめてみました。知りたいという方は本の購入をオススメします。よいCSSの設計とは予測しやすい期待通りに振る舞い、追加したルールが他のルールに影響を与えない。再利用しやすい抽象的で分離され、再度遭遇した同じUIに対して、再度書き直す必要がない。保守しやすい新しいルールを追加・更新するときに既存のルールのリファクタリングを必要としない。拡張しやすい自分と自分以外の人にもメンテナンス・管理がしやすい。破綻しやすいCSSの特徴HTML構造に依存しているスタイルを取り消している絶対値を多様しいているコンポーネント設計についての概要も記載されており、とても分かりやすく丁寧にまとまっていました。OOCSSとかSMACSSとかBEMとか聞いたことあるけど、、、という方は必見。コンポーネント設計の概要についてOOCSS構造と見た目の分離コンポーネントの基本構造と、具体的なルール・機能を分離する。場所に依存しないセレクタを書く。SMACSS下記のようにカテゴライズして設計する。Baseブラウザ、およびそのプロジェクトに置ける、各要素のデフォルトのスタイルを定義。htmlやbodyに定義するであろう、全体の背景やフォント、リンク色といったものも含む。書き換えはしたくないため、widthやmargin、padding等は記載しない。LayoutIDを用いて定義されるようなヘッダー、フッター、サイドバー、コンテンツエリア、構成の大枠、セクションを作る要素へのルール。これらはIDで詳細度をあげてもOK。Moduleボタン、見出し、リンクなど、layoutを除くあらゆる再利用可能なオブジェクトが該当。StateJSの制御で切り替わるような状態を表すものやメディアクエリでコンポーネントを制御するものが該当。.is-*という接頭辞をつけるのが推奨。Stateでは!importantを使うのは許容。Themeテーマを切り替えるようなもの。.them-*という接頭辞をつけるのが推奨。BEMオブジェクト/コンポーネントを3つに分けて分類する。class="alert__title">パスワードが違います。class="alert__body">再度入力してください。</div>Block例の.alertが該当。Element、Modifierはこれを基点に命名していく。ElementBlockを構成する要素。alertというBlockに対するElementということでアンスコを2つ付けた命名にする。.alert__title、.alert__bodyが該当。ModifierBlockまたはElementのバリエーション違いの要素。SMACSSのStateのようなものも該当。上記では、.alert_waringが該当し、Modifierはアンスコ1つつけて命名する。3回繰り返したものは、パターンとして成立する。{...}セレクタとしては要素を省略しても問題無いし、h2でなくともh1やh3でも使用できるようにするべき。テキストカラーやサイズやボーダーや背景といった見た目とpositionやfloatなどといった構造を一緒のルールセットにしないこと。コンポーネントにおける再利用性というのは、コンポーネントの単位で再利用するということ。過剰に再利用することを意識して、異なるコンポーネントを混ぜないように。設計やリファクタリングを学びたい人には下記がオススメらしい。参加グループインターネットリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!yagi_sukeさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。