:beforeなどのセレクタが使えなかったり、階層構造が持てないのでアニメーションしたりなどなども出来ないです。先にあった使えないプロパティのところもあるので、凝ったことをするのはできなさそうですねー。読書や本この記事は公開されてから1年以上経過しており、情報が古い可能性があります。目次CSS設計がなぜ重要か設計をどうやっていくかOOCSSSMACSSBEMMCSSFLOCSSここまで読んでこんにちは、ごみばこです。教科書を読みました(設計の大事さと紹介まで)。そのメモというか、まとめです。アソシエイトも審査落ちしたので、ごみばこいんからのリンクはノーアフィリエイトです。かなしみ、ビールの一杯くらい稼いだっていいじゃないCSS設計がなぜ重要かフロントエンドも作って終わりではない。サイトの内容が変わっていくので、それに合わせて各コードのメンテナンスをしていかないといけない。それはもしかしたら誰かに引き継ぐかもしれないし、自分でやるかもしれない。複雑なものになっていく。シンプルに書ける一方でたくさんの記述が必要がゆえ、複雑なことをしようとすると、スパゲッティコードになりやすい。設計というルールを設けていく。設計をすることで、予測しやすい、再利用しやすい、保守しやすい、拡張しやすい、ものを記述できるようになる。設計をどうやっていくか見た目の変更や入れ替えがあるなかで、使いまわすようなものも多くある。その使いまわしのために、要素を部品=モジュール、コンポーネントと考えていく設計が有効になる。そのコンポーネントとして考えるために、いくつかの実際に活用されている設計方針を紹介していく。CSS構造と見た目の分離、コンテナとコンテンツの分離を挙げている。コンポーネントとしての構造、ブラウザ上での見た目を分離して考えること。ある要素がどこにいるかのコンテナ、ある要素のコンテンツを分離して考えること。後者は難しいが「場所に依存しないセレクタを書くこと。どこそこの中にある○○、とし定義されるようなものを避けること」と考えるとわかりやすい。言われている分離を実践するためのカテゴリが決められている。:コンポーネントの見た目違いもう一つのSMACSSのポイントとして「HTMLとCSSの分離」が挙げられている。ModifierCSSにおける命名規則の提案。OOCSS、SMACSSを考えてのコンポーネントを記述できるよう規則が決められている。いう形式たしかにBEMでは、アンダースコアを付けるように、と言っているがそれはさほど重要ではない。キャメルでもハイフンでもいい。コンポーネントの体に合わせた命名規則を設けることで、シンプルにたくさん書けるCSSへ規律をもたらし、事故を未然に防いだり可読性を上げることが大事。レイヤーというルールを足すようなもの。複数のレイヤーを構成することによってCSSを設計する。レイヤーとして縛りを設けることで、CSSプロパティの汚染を防いでいく。他のレイヤーから拡張変更ができる必要があるBaseレイヤーコンポーネントは上書きできるProject具体的なページを構成する要素、Baseレイヤーコンポーネントの集まり。現実的にはこのレイヤーが厚くなりがちだけど、上書きによって階層が深くならないようにするBaseレイヤーコンポーネント、Projectレイヤーコンポーネントを上書きできるCosmetic下層レイヤーコンポーネントに含まれないちょっとしたスタイル。ヘルパー、ユーティリティのようなもの、グローバルなModifierなど。基本的に上書きは出来ないContext例外的なレイヤー。すべてを上書きできる。特定のブラウザ、デバイス、状況によって切り替えるようなもの。セクションを持たず、各コンポーネントについて書かれるセクションの中で記述される。レイヤーの分け方に合わせて、CSSを記述するときの基本原則がいくつかある。コンポーネントを1つのセクションにまとめるModifierを個別クラスにし、単体で利用しないコンポーネントのカスケーディング(上書き)が出来るあるコンポーネントに含まれる別のコンポーネントに適用するスタイル。上層のコンポーネントを上書きしてはいけない。同じ層か、下層のみ上書き可能クラス名を略語にするFLOCSSこの本の筆者が考えている、全部まぜのいいとこ取り。ソースファイルのセクションわけ、レイヤー制約、命名制約が盛り込まれている。意識して作ったところ、非常にわかりやすく、事故もなく、安心安全にできてちょっと感動してました。みんなやろうぜ!というわけではなく。本にも書かれているのですが、色々な考え方があるけど俺達はどうやってやるよ、というのを改めてちゃんと考えないとね、って思いましたとさ。技術的な話題この記事は公開されてから1年以上経過しており、情報が古い可能性があります。