株式会社トリアナのブログtriBlogトリアナのブログ。webサイト制作なら、トリアナへ。【vol.1】有名な3つのCSS設計をまとめてみた〜OOCSS編〜WEB制作フロントエンド2019.7.25【vol.1】有名な3つのCSS設計をまとめてみた〜OOCSS編〜2019.7.25運転免許はAT限定ですおくだこんにちは〜〜〜!インターンの奥田です!今日はみんな大好き(?)CSSのお話。triBlogを読んでいる人の中にはWEB制作に携わっている人も多くいるかと思います。そんな人達にとってCSSはとても身近な存在。拡張性OOCSSまとめCSS設計とは「なんじゃこのコードは...。他人のコードを見てこう思ったことはありませんか。どんなルールでクラス名を振っているのか分からないし、なぜか何度も同じスタイルが指定されている...。それらは全部、CSS設計を無視しているからです。ウェブサイトはイベントページを除いて、何年にも渡って運用していくことがほとんどです。適当にクラスを振って、とりあえず見た目がデザイン通りならOK!ではありません。公開後にデザインが変更になったり、コンテンツが追加されたりしたときに、ちゃんと考えられたCSSでないとものすごい量のコードを修正することになります。そこで必要になるのがCSS設計です。今回は世界的に支持されている3つの設計のうちのOOCSSをご紹介します(⌒▽⌒)OOCSSとはオーオーシーエスエスと読みます。オークスとかじゃダメだったんですかね。CSSの略で、オブジェクト指向をCSSに当てはめた設計です。言ってもイマイチぴんとこないですよね。OOCSSにおけるオブジェクト指向を簡単に言うと、パーツそれぞれを独立させて再利用可能なものにしようってことです。前述したOOCSSにおけるオブジェクト指向は「構造」と「見た目」の分離とよく言われます。ひとことで言うと「colorとかとpaddingとかを一緒のクラスに指定すなよ!」ってことです。ご覧いただきましょう。こんなラベルを作成する場合。みなさんならどうクラスを振ってスタイリングしますか?まずは再利用性がないアンチパターン(ダメな例)から紹介。class="label-info">INFOMATION</div>background-colorなどの色情報(見た目)と、paddingやdisplay、border-radiusなどの位置や大きさ(構造)に関する記述が1つのクラスにごちゃまぜです。そのせいで以下の記述が繰り返し書かれています。20px;もしこのラベルのpaddingの値を変更する場合、3箇所も書き換える必要があります。似たようなラベルが10個も20個もある場合、大変な作業になってしまいます。OOCSSに基づいた記述ではどうなるでしょうか。info">INFOMATION</div>構造を.labelに、見た目を.newと.pickup、.infoに定義しました。すると、全体のコードの量が減ってスッキリするだけでなく、構造に変更があった場合でもCSSを1箇所変更するだけです。.labelというクラスは再利用でき、もしerrorというラベルを追加することになっても以下のクラスを足すだけで済みます。error">ERROR</div>もうお気づきかもしれませんが、OOCSSはマルチクラスを採用しています。シングルクラスとマルチクラスは主に以下のように分類されます。「コンテナー」と「コンテンツ」の分離さらに、再利用ができるように「コンテナー」と「コンテンツ」を分離します。」みたいに、親子で指定すなよ!ってことです。(伝われ...!)「コンテンツ」は再利用する部品そのものです。「コンテナー」はその部品を包んでいる大枠です。見出しを例にコードを見ていきましょう。アンチパターン(ダメな例)。class="heading">見出し</h2></main>ここでは.mainがコンテナー、.headingがコンテンツです。親クラスの下に子クラスを連ねると、同じ見出しをサイドバーにも配置しようと思った時、また同じ記述を書かなければいけません。以下がそのパターンです。class="heading">見出し</h2></aside>コンテンツがコンテナーに依存しているため、このようなことが起きます。OOCSSに基づいてコンテンツは1つの部品として定義してしまいましょう。700;}親要素に依存していないので、複数配置するときにCSSを足さずに済みます。拡張性OOCSSには拡張性があります。クラスを足し算していくことによって、様々なパターンに対応します。これがアンチパターン。#ccc;あとで2本線のスタイルで上書きしてしまっています。#ccc;上書きを多用するとプロパティの詳細度を上げるために親要素をたくさん連ねたり、!importantを使うことになりかねません。詳細度を上げることを繰り返すと、いずれ!importantだらけになってしまいます。.aside(コンテナー)の下に.heading(コンテンツ)を連ねてスタイルを指定していることで、2本線の見出しが他の場所に移った時、また同じCSSを書かなければいけません。この場合は.headingには最小限の構造のスタイルだけを残し、別に.simple-heading、.primary-headingというクラスを用意します。コンテナーとコンテンツを連ねて指定するのではなく、クラスを独立させて指定します。primary-heading">2本ボーダー見出し</h2></aside>こうすればプロパティの詳細度を気にする必要がなく、コンテナーに依存していないので2本ボーダーをどこに配置しても書き直す必要はありません。CSSを上書きして元のスタイルを打ち消すのでなく、まず最小限のスタイルを当てて、それからクラスを足し算していくイメージです。OOCSSまとめOOCSSはマルチクラスを採用しているので、CSSがスッキリするというメリットがありますが、その分、クラスが多くなるデメリットもあります。「構造と見た目の分離」と「コンテナーとコンテンツの分離」によって、メンテナンス性と再利用性に優れています。次回はSMACSS編です。【静的サイトジェネレータ】WordPress不要!2020年注目のVuePressの特徴をまとめてみたホームページ制作費が分割払いできます【WEB制作編】2019年の記事を振り返る。インターンインタラクティブ表現とUIを極めたい。自称トリアナの新しい風。常に焦りを感じながら、誰よりも戦略的に成長します。インターンインタラクティブ表現とUIを極めたい。自称トリアナの新しい風。常に焦りを感じながら、誰よりも戦略的に成長します。reserverd.。