「HTML,CSSだって難しいよ！」
初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。
『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』
注意
作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。
初め
壊れない完璧な設計を求めるのではなく、壊れた時に勇気を持って修復できる設計を
サイトを作り始めた時って、どうしてもデザインカンプ通りにならなくて四苦八苦しますよね。しかも、これから先JavascriptやPHP、Wordpressも組み入れてより複雑化していく。ここでつまづいて僕ってエンジニアに向いてないのかなっと思っていました。しかし、そんなふうに感じる人ってたくさんいると思うんです。そんな方にこの言葉を送ります。
この言葉はCSS設計に携わってきた方のものです。どんなベテランのエンジニアも完璧で壊れない設計をするのは難しいです。そんな先人たちは発想を変えてミスをなくすのではなく、ミスを減らし、またミスを見つけやすく修正しやすいような手法やルールを作ってきました。
今回は初心者でも参考になりそうなものを参考文書から引っ張ってきてるのでご紹介させていただきます。
より良いCSSにするために大切な４つのこと
今はデザインカンプの通りにデザインするだけで苦労している方も多いのではないかと思います。しかし、これからはさまざまな機能や変更を考慮した上でコードをかく必要があります。しかも、本当の制作現場では複数人で作業したり、中長期的にメンテナンス作業や改修などがあり、また担当が変わったりすることも多々あります。だからこそこれから、下記の４つのことを意識して欲しいです。
予測しやすい
記述したルールがこちらの想定通りに動いてくれること。また、追加したルールが他のルールに影響を及ばないようにすることです。
JSやJavaのようにカプセル化できないため、どうしてもそれぞれのルールが影響する場合があります。そんな時に意識した方がいいのが要素の** 詳細度 **です。これはルールの優先度を表すものでインライン記述された要素、ID付与された要素、クラス付与された要素、何も付けられていない要素、ユニバーサル要素の順番で優先度が高くなっていきます。
再利用しやすい
同じ機能がいくつもコピー＆ペーストされて記述しているのは見栄え的にも良くないです。再利用できるように機能ごとに分離しておくといいでしょう。
再利用するにはコンポーネント（機能を他にでも活用しやすくすること）させることが大切ですが、CSSは自由度が高い故に他からの影響を受けやすいため、分離させることが難しい言語であります。
その対策としてさまざまな手法がありますがそれらの基礎として挙げられるのがオブジェクト思考の概念を取り入れて考えられた** OOCSS **です。
OOCSSの原則として二つあり
一つ目が「構造と見た目が分離してあること」で、見た目の似てる色が違うボタンがあるとして、見た目は一緒じゃなくても機能として共通部分があるなら一緒にして色など違う部分だけを後から追加しようぜという感じです。
二つ目が「コンテナとコンテンツを分離」です。例えば
下記のコードを見てください。h１タグに対してどちらのCSSの書き方が望ましいでしょうか。
答えは後者です。それは、もしHTML側に変更があった場合（h1→h2に変更）、CSS側も書き換えが必要になってきます。これはHTMLに依存していると言って好ましくないです。しかし、後者ならば変更はHTML側のみですみますし、もし同じ機能を別のところに追加したいとなればこのクラス名をそのまま使えます。
HTML
<h1 class="title">おまえを信じる俺を信じろ</h1>
CSS
//前者
.h1 {
color: red;
}
//後者
.title {
color: red;
}
保守しやすい
既存のルールを損なわない、破壊しないように新しいルールを追加することをリファクタリングと言います。しかし、既存のコードがわかりにくいものだと機能を追加する側も大変です。なので要素のクラス名をわかりやすくすることが大切です。そのための命名規則がありますがその中でも有名なものの一つとして、** BEM **があります。
BEMは、カテゴリー化してみたい - や _ で使い分けており、さまざまな規則があるのでこちらの記事を参考にしてみてください。
拡張しやすい
機能を追加したり、既存のルールをさらに強くしていくこともよくあります。今までのBEMやコンポーネントなども大切ですが、その際にコードを整理しておくことも大切だと思います。
その時に役立つのが** SMAOSS **です。これは機能の特徴などに合わせてカテゴリー化しルールづけすることでわかりやすくしています。