HTML/CSSが一番大事って言う話

こんにちは、ゆうゆると申します。

唐突ですが、皆さんに質問です。

皆さんはHTML/CSSに対して、どのような印象を持たれますか？

人それぞれの印象があって良いと思いますが、「比較的簡単」という印象をお持ちになった方もいるかと思います。

たぶんですが、そういう印象をお持ちになった方は、他の言語もさわったことがあるのではないでしょうか？(僕の想定としてはJavaScriptやphpなど)

今回の記事では、そう言った方に一度だけでもHTML/CSSを見直していただくために作成しました。

では、よろしくお願いします。

HTML/CSSで管理のしやすさが変わる

まず、前提として話しておきたいのですが、Webサイトを作る上でHTMLは「サイトの基盤」のようなものになってきます。

その基盤に、パーツとしてJavaScriptやcssをくっつけていくようなイメージです。

HTMLは、divタグやid・classを駆使することで比較的管理のしやすいコードにすることが出来ます。

ですが、それにたいしてCSSは簡単にコードが組めるがゆえに、コードが絡まってしまう「スパゲッティーコード」になりやすいんです(たぶん、皆さんも経験があるかと思います

cssがスパゲッティーコードになってしまうと、実際に管理のしにくいコードと化します。

つまり、直接的に見直さなくてはならないのはCSSの絡まりやすいコードになってしまうことなのです。

ちなみに、この問題は先代の方々がいろいろな対処方法を作ってくださっているので、見ていきましょう。

SASSで管理のしやすいコンパクトなコードへ

1つ目の方法としては、sassを使うことです。

軽くSASSがどんなものなのかを説明すると…

通常のcssでは使用できない、変数やコードの使い回しが可能になり、メンテナンス性を向上させるため開発されたもの。

といった感じです。

実際に使用してみると、だいたい40%くらいカットすることが出来ました。

さらに変数を使うことで管理のしやすいコードにすることも出来ました。

そんな便利なSASSですが、ひとつだけデメリットもあります。

それは「SASS自体をブラウザーはスタイルシートだと認識してくれない」ということです。

つまりSASSをCSSにコンパイル(変換みたいな感じ)するという作業が必要になってくるんです。

僕は、それくらいの手間をかける価値があると思うのですが、どうでしょう？

CSS設計を考えるべき

先程のSASSでコードをコンパクトに出来ることは確かなのですが、まだ1つだけ解決すべき点があります。

簡単に言うと「HTMLにてclass名が同名になることがある」ということですね。

つまり、classの指定方法を改めなくてはならないんです。

ちなみにこれを解消する方法も先人たちが作ってくださってます

具体的には「CSS設計を考えておく」ということです。

よく数学などで、自分でルールを決めてそれにしたがって問題をとくというものがありますが、思考方法としては同じ感じです。

classの指定方法にルールを決めてそれにしたがって指定していきます。

実は、そのルールに関してはいろいろな方が考えてきので、いろいろなルールが存在しています。

二つほど例を見ていきましょう。

BEM記法とは

BEMとは「B…block,　E…Element,　M…Modifire」という略語になっております。

ちなみに、BEMはSASSと相性が良いためよく併用して使われます。

詳しくは、検索していただきたいのですが、簡単に言うとブロック・エレメント・モディファイアーの３つの要素でネスト型にするような感じです。

コーディング例を見てみると、以下のような感じ。

<div class="category-list">
<h2 class="category-list__title">タイトル</h2>
<div class="article-list">
<article class="article-list__one"></article>
<article class="article-list__one--red"></article>
</div>
</div>

この記法を使うメリットとしては、2つほどあります。

・ブロックごとにSASSファイルを作成して、スタイルを適用するため、スタイルの変更が他のブロックに影響しない。
・利用者が多い

デメリットは、class名が長くなってしまうことですかね。

まあ、そんな感じでした。

よければ調べてみてください。

OOCSSとは

続いては、OOCSSです。

このCSS設計の考え方としてはプログラミングにおけるオブジェクト指向をCSSにも導入しようというものです。

このCSS設計のclassの付け方は、BEMのように要素に名前をつけるのではなく、機能や性質に名前をつけていくといった感じです。

例えば、ボーダーをつける要素が複数あった場合に「border」というクラスをつけるといったイメージです。

このCSS設計方を利用するメリットとしては、２つほどあります。

・クラス名が短い
・クラス名からスタイルを予測しやすい

要するに、OOCSSはBEMと比べて視覚的にわかりやすいCSS設計といったところでしょう。

ただ、BEMに比べるとCSSは複雑になるので、ここを求めている方はBEMが良いかもしれません。

CSS設計は自分にあったものを

２つほど例を見てきましたが、別に先代が作ったものをまるっきり導入する必要はありません。

自分の使いやすい設計を自分で考えるというのもありだと思います。

あるいは、BEMやOOCSSなどの良いとこ取りをした設計を作るのもありです。

要するに、ルールを決めることが大事ということですね。

是非、皆さんもCSS設計を導入して管理のしやすいコードを作ってみてください！

最後に

最後までご覧いただきありがとうございます。

どうでしたか？

HTML/CSSと管理のしやすさには、綿密な関係があることを理解していただけましたか？

もし理解していただけたなら、SASSやCSS設計を勉強して導入してみてください。

きっとあなたも作りやすく、クライアントも管理のしやすいコードが出来ると思いますよ！