CSSの記事一覧

【それでもCSSは破綻する】 CSSの設計手法と書き方を考える

それでもCSSは破綻する。書くこと自体はとても簡単なCSSですが、その一方で、CSSの設計が簡単に破綻してしまいます。破綻しないためにCSSの設計手法と書き方のノウハウをご紹介できればと思います。以前の記事とかぶるとこも結構あるのですが、全体的にまとまっているので特に初心者〜中級者の方に見てもらえたら嬉しいです。これは極端な言い方ですが、今まであったデザイナーでCSSできると言った人で本当にできる人あまりいないです。どちらかというとCSSは難しいと言った人の方ができる方が多いです。CSSが簡単だと思われてしまう要因の一つがCSSを書くこと自体は言語としてはかなり簡単な部類に入ります。このようなコードをツラツラ書いていけばHTMLに対してスタイルをつけられますよね。書き方としてはごくごくシンプルです。シンプルであるがゆえに管理するのが難しいのです。前置きはこれくらいにしてここから先はCSSがいかに難しいことについて触れていきたいと思います。何が難しいかと言うと一つだけです。そう「破綻」しやすいんです。では、「**CSSの破綻**」とはなんでしょう？例えば「新しくスタイルを書いたのに適用されない」とか「!importantが乱用されている」とかが挙げられます。破綻というとなかなか難しいですが、複数人で複数人で同じCSSファイルを編集していると起こりやすいです。具体的には・・・似たようなコードもしくは同じコードが重複してしまっている状態。セレクタ名が同じものが乱立している状態。上記を解消するために詳細度を深くしてなんとかスタイルを割り当てている状態だったり「!important」を乱用している状態。上記のようなことが起きているようなCSSのコードは完全に破綻しています。では**「破綻のしない」良いCSSのコード**ってどんなのなんでしょう。よく言われるのが・・・セレクタ名には.aとか.cなど自分だけがわかるものは基本NGです。あとは、クラスセレクタに日付が書いてあったり、「new」とか書いてあるのが見かけることがあります。もうこれは末期ですね。おそらく破綻してます。例えばタイトルならば.title、バナーを配置する場所なら.banner-areaなどクラス名を見ただけでなんとなくどんな使い方がされているかわかるものがいいです。サイト内のどこに配置しても大丈夫なように作られている方がいいでしょう詳細度と関連してくるのですが、詳細度を深くしすぎるとのちのちスタイルの上書きする際に困ります。例えばタイトルであれば、文字の大きさの違うパターンや色違いパターンなどが作りやすい方がいいです。ポイントは5つあります。一つずつご紹介します。まとめられるものがあるならばまとめた方がいいですね。ファイルサイズ節約にもなります。運用の時に付け足す時もそっとまとめてあげるといいですよね！！下記のコードは実際に僕が出くわしたコードです。見た時正直びっくりしました。以前担当していた方が書いたんでしょうけど、同じスタイルじゃん・・・。なんでこうなったかは理解に苦しむんですが、これもクラス一個で各ページ使い回せばいいだけですよね。idセレクタ、クラスセレクタ、タイプセレクタと異なるセレクタが混在していると、マークアップが変わった時に対応ができません。こちらはBEMという書き方をしていますが、後ほど詳しくご紹介します。下記の「Bad」のやり方はわかりやすいっちゃわかりやすいんですが、再利用性に欠けます。というのもh1にしか使えないので、たとえば、マークアップ的にh2の方が適切の場合はスタイルを適用できないですね。cssのテクニックとして「body」タグにクラスをつけてコンテンツのスタイルをページごとに変更したりします。でもこれって「body」タグにクラスに依存しすぎてしまっていて再利用しづらいし、拡張もしにくいですよね。たとえば、デフォルトのヘッダーとメニュー詳細ページでヘッダーのスタイルを変更したい場合、以下のような書き方をします。でもこれって、運用していくなかで新しくページを追加して（LPとかね）詳細ページと同じヘッダーでって場合どうしますか？パターンとしてはdetailと同じスタイルをLP用につくるか、LPのbodyにdetailを付与ですよね？後者の場合ってめちゃくちゃ気持ち悪いですよね。detailページでもないのにbodyにdetailって・・・このパターンでCSSを書くとページが増える度にセレクタを書き加えなければいけませんね。これをBEMでセレクタを書くとめっちゃわかりやすくなります！！ポイントはページ単位で切り分けないでプロパティごとに切り分けた方がいいかなと思います。これまでのことを気をつけても更新作業などをしていればほぼ100%破綻します次に紹介するのは**CSSの設計**です。自由に書けるCSSだからこそルールを設けてみんなで守りましょうというものです。実はCSS設計の手法ってたくさん存在しています。それぞれ特徴があったりしますが基本的な考え方としては**破綻のしにくいCSSのコード**を書きましょうというのは変わりません。自分のやりやすいものやそのWEBサイトにあったものを選ぶのがいいと思います。今回は「**FLOCSS**と**BEM**」をご紹介します。FLOCSSというのは、日本人が考えたCSSの設計手法です。実は、「」という本を書いた谷さんという方が考えたものです。BEMは、セレクタの書き方の考え方です。賛否両論ありますが、HTMLのタグを見ただけでどんなスタイルかわかりやすいというメリットがあります。デメリットとしてはセレクタが長くなりがちです。まずはFLOCSSの基本としてサイトのCSSディレクトリの中身を分けます。これで、どこにどんなスタイルを書くかわかりやすくなりますね。ちなみに、今回はSassを使っている想定にしています。これはなぜかと言うと`import`する際にCSSの場合と言うように書くのですが、このimport文だとサイトの読み込みに時間がかかってしまうんですね。そこでSassを使うと実際にページに読み込まれる時にはいimportし終わっていて一つにまとめられたCSSファイルが生成することができます。importの書き方はと言うようにできます。Sassを使う方がメリットもたくさんあるので興味のある方はぜひ使ってみてください。横道にずれてしまいましたが、ディレクトリの構成は以下のようになります。ここはbase.scssやreset.scssなどサイト全体の下地になる部分を書きます。ここはサイトの基本レイアウトを書く場所です。例えばheaderやfooterなどここではサイト全体で再利用性の高いスタイルを書きます。componentは再利用性の高いパーツを書く場所です。特徴としてはどんなサイトでも大概あるパーツを書くことが多いです。例えば、ボタンスタイル、タブスタイル、見出しスタイルなどprojectも再利用性の高いパーツを書く場所なんですが、componentととの違いは、このサイト特有のパーツの場合はここに書きます。例えば、グラフスタイル、ドロップゾーンなどここはいつでもどこでも使えるスタイルです。基本的には1セレクタに1プロパティになることが多いです。app.scss内に各ファイルをimportします。FLOCSSではなんの属性なのかHTMLのコードを見ただけですぐにわかるように接頭辞をつけることを義務付けしています。こちらはjQueryなどと併用する時によく使われます。例えばボタンを押すと出てくるUIなどは.is-showなどのクラスセレクタをつけたりします。.js-はjs(jQuery)と関わっているのか表す接頭辞です。これはJSで動くなど何かしら操作したときなどにセレクタで呼び出しますが、その際はスタイルで定義されたセレクタを使うのではなく必ず「.js-hoge」などで行うことを義務付けします。そうすることで文書構造、スタイル、スクリプトを完全に分離することができてHTMLを見るだけで何が行われているのか、残さなければいけないセレクタなのかわかりやすくなります。idセレクタとクラスセレクタが基本的にはよく使われるセレクタですが、idセレクタはあまり使わない方がいいです。実はidセレクタには問題点があります。というのも詳細度と関連してくるのですが、基本的にidセレクタは詳細度がかなり強いです。なので、スタイルを上書きしなければいけない場合にどうしてもそれ以上の詳細度にしなければいけません。さらに、1ページに一回しか使えないので、再利用性にかけます。先ほどのdrawerのコードであまり見かけないセレクタの書き方がありました。これが実はBEMの書き方です。そしてBEMのセレクタの書き方には3つの要素でできています。その頭文字をとってBEMと言います。これはdrawerなどのパーツなどの塊を表します。FLOCSSではこのBlockごとにCSSのファイルを書いていくのがいいでしょう。これはBlock内に存在する要素を表します。drawerで言えばボタンやコンテンツですね。これは状態を表します。例えば、背景の色が違うパターンなど注意！.is-や.js-とは使い方が違います。セレクタでBlockとElementのつなぐ方法はアンダースコアを二つつけます。Modifierの前にハイフンを二つつけます。先ほどもご紹介したようにBEMのデメリットはセレクタが長くなりすぎます。こういったケースが頻発するのでcomponentを小分けしていくといいです。そうすると小さい単位のcomponentごとに各componentを組み合わせて使いまわすことが可能になります。ここまでやっても**CSSは破綻**します。そうですねこれでも80%以上の確率で破綻します。複数人いる場合には特に！！そのサイトやサービスに置けるルールを記します。記載する内容は作る人や企業によってまちまちですが、基本的なものとしてはよく使われるcomponentに関してはコードをまとめておくといいです。下記のは僕が作ったフレームワークのものですが、なんとなくの雰囲気はつかめるかなと思います。[Document](http://takumi0901.github.io/flanky/)あくまで「しにくい」です。せっかく作ったガイドラインを無視したりする人がいれば「破綻」します。大体の企業では何かサービス作るにあたってあらかじめガイドラインが設けられていることが多いです。なので、そのサービスに途中から参加する場合などはガイドラインを読み込み、実際のCSSコードを追って理解を深めるのがいいと思います。

2023.04.19