CSSの設計手法　①CSSの手軽さと壊れやすさ

こんばんは。

本日から数回に分けて、システム開発技術に関する記事を書きたいと思います。
企業の情報システム部の方々、エンジニアの方々が読んでくださると光栄です。

題材にするのは、CSSの設計手法です。
CSSは良くも悪くも簡単に開発できてしまうため、各開発者が好き勝手に開発してしまい、無法地帯になりがちな言語です。
その結果、WEBページの一部の色を変更したいだけなのに、全画面のCSSファイルを修正しないといけないケースなどを見てきました。

今回は、WEBDBというプログラミング情報雑誌の119号の特集ページを参考に、CSSの設計手法についてご紹介していきます。

※1 HTMLの簡単なコーディング知識を前提としておりますが、高度な知識は不要です。

※2 ITベンダーとのやり取りにも使える知識なので、ぜひ最後までお読みいただけますと幸甚です。

ＷＥＢ＋ＤＢ ＰＲＥＳＳ Ｖｏｌ．１１９ 特集フロントエンド脱レガシー｜障害対応演習｜深層学習入門以前

そもそもCSSとは

CSSはCascading Style Sheets（カスケーディング・スタイル・シート）の略で、「シーエスエス」と呼びます。

CSSはWebページの文字の色や大きさ、背景、配置といったスタイル（見た目）を設定する言語のことです。
一般的にWebサイトはHTMLで記述されており、これにスタイルシートを記述する言語であるCSSを適用することで、私達が普段見ているWebサイトが構成されています。

なぜ、”カスケーディング”なのかというと、あるHTML要素に適用されるスタイルを、大域的に定義されたものから局所的に定義されたものへと順番に引き継ぎながら適用していくことをカスケードあるいはカスケーディングというからです。

HTMLだけの場合（UdemyのCSS講座より）

HTMLにCSSを付け加えた場合（UdemyのCSS講座より）

つまり、CSSとは、HTMLに色や大きさや背景などを加えて見た目を良くするものです。

CSSの手ごろさと壊れやすさ

シンプルな構造

CSSのコーディングは非常にシンプルです。

P { color; red; }

これだけです。

たったこれだけの記述で、Webページ内のp要素に文字を赤くするスタイルを適用することができます。

図解で簡単！CSSの書き方4つが初心者でも5分で理解で…｜Udemy メディア

CSSでスタイリングを行うために必要なのは、基本的に①宣言と②セレクタのみです。

①宣言は、上記の例でいうと、 color:red　部分のことで、スタイルの定義です。（細かくは、colorという「プロパティ」と、redという「値」のセットです。）

②セレクタは、上記の例で言うと、p　部分のことで、スタイルの適用です。HTMLの要素（pタグ）であったり、class名、id名、だったりします。

競合するルール

CSSファイルで読み込んだスタイルが競合してしまうことがあります。
具体例を見てみましょう。

HTML

<article class="about">
 <h2 class="title">hello</h2>
</article>

CSS

/* 3つのルールはすべて同じ要素に対する宣言を行っている */
h2 { color: black; }
.about h2 { color: red; }
.title {color: green; }

CSSのスタイル３つは、すべて"hello"というタイトルに対する宣言をしており、競合してしまっています。
CSSはコンパイル言語ではないため、このような競合は検知しにくいです。

競合した場合にどのスタイルが優先的に適用されるかは、決められた仕様があります。
しかし、ここで言いたいのは、競合してしまうことで、意図しないスタイルが適用されてしまったり、スタイルを修正したと思ったら修正されていなかったりといったケースが起こりやすいということです。

CSSの破綻

CSSは手軽さゆえに、あまり設計を行わずに、開発者各自が自由に開発を行っているケースをよく見ます。
そうすると、各宣言が何のためのの宣言なのかわからなくなったり、似たような宣言が乱立してしまったり、その挙句巨大なCSSファイルが出来上がったりします。

次回以降、CSS にどのような設計手法があるのか、一般的な手法を見ていきたいと思います。