カスケーディングを味方につけて、スタイルシートと格闘するのはもうやめにしましょう！
多くのフロントエンドエンジニアにとってCSSは悩みの種だと思います。
禁忌とされる !important を連発してしまったり…。
これは全て、カスケーディングというCSSのもともとの構造に原因があります。そんな「カスケーディング」を嫌うエンジニアは、「カスケード」を使わない、または極力減らした設計方法を開発しています。OOCSSやSMACSS、BEMがそれにあたります。
これらの設計手法は、スタイルシートのコントロールを容易にします。でももし、CSSのカスケーディング機能をもっと有効に使えたら？CSSルールを1つ記述し、それを下流要素に引き継がせられたら？
「カスケード」を使わない手法も素晴らしいですが、ここではCSSの「カスケード」を有効利用する方法を見ていきます。
そのために、あまり知られていないCSS単位やキーワードを使っていきましょう。
- ・EM（またはREM）単位
- ・キーワード inherit
- ・キーワード currentColor
EMとREMについて
pxの単位は、要素やマージン、パディングやボーダーなどの幅やサイズ指定によく使うと思います。
実は、EMやREMも同様に使えるんです。ただし、これらの単位は絶対値ではなく、関連値になります。Mozillaの説明によると、
EMは
当該要素の font-size の計算値を表します。font-size プロパティ自身に使われると、要素の継承されたフォントサイズの値を表します。
とあります。
つまり、EMは「要素の継承されたフォントサイズの値を表し」、「拡縮可能なレイアウトでよく使われ」る。まさに探していた機能です！
また、REMについてMozillaの説明では
ルート要素の font-size (例えば、<html> 要素の font-size) です。ルート要素の font-size で使うと初期値を表します。
とあります。
EMとREMの大きな違いは、REMが常にルート要素のfont-sizeを照合するのに対し、EMは要素のfont-sizeから単位を継承します。
以下のCSSをご覧ください。
上記の要素のパディングは、10pxと同等になっています。EM単位は要素のfont-sizeと関連づけられているので、パディングの方程式は20×0.5=10となります。
では上記のような場合はどうでしょうか： .elementのパディングは10pxと同等なことはわかるが、 .element-childの値が分からない。
EMが数式を乱してしまうので分かりにくくなりますが、.element-childのfont-sizeは5px（20×0.25=5）と同等になります。
親要素のfont-sizeを20pxとし、子要素のfont-sizeを親要素の0.25emと定義しているので、計算値は5pxと同等ということになります。
この場合のパディングはもっと簡単で、EMがfont-sizeの値を参照するので、パディングは5pxと同等になります。
EMの扱いにくさは、出力値の計算式の管理にあります。
キーワード inherit
さて、CSS兵器の一つにinheritがあります。この値は、親要素の定義を子要素へ継承させることができます。inheritを使うと、同じルールを2回繰り返さずにすみます。
Mozillaではinheritを次のように定義しています。
inherit キーワードは全ての CSS プロパティに対し指定可能な値です。親要素の 計算値を継承します。
キーワードinheritを使って次のようなケースを見てみましょう。
.element-childは.elementからpaddingの値を得ています。.elementのpaddingを変えたら、.element-childのpaddingも変わるので変更も楽ちん！何回も同じスタイルを記述しなくてすむのです。
一点不便な点は、キーワードは親要素の値しか参照しないので、DOMツリーを辿ってルートの値を参照することはできません。
キーワード CurrentColor
このキーワードもinheritとほぼ同じ機能を持ちます。通常なら継承できない、プロパティの色のような値も、currentColorを使うことで継承可能になります。
Mozillaは次のように説明しています。
要素の color プロパティの計算値です。プロパティや、デフォルトでは継承を行わない子要素のプロパティに、色のプロパティを継承させることができます。
値のカスケードをコントロールするテクニックについて学びましたので、実践で試してみましょう。
最後に
ちょっと難しいですが、紹介させていただいたテクニックはCSSをコントロールするのに素晴らしい方法です。
単位の値にEMを使うことが、入れ子要素を作るときの妨げになることもありますが、これは簡単な計算か、Sassのfunctions とmixin、あるいはその他の処理方法を用いて解決することができます。
何にしろ、少しの頑張りで作業負担は軽くなるし、もっと柔軟にスタイルシートを作れるようになるのです！ぜひ試してみてくださいね！
※本稿は「Utilizing the “C” in CSS」を翻訳・再編集したものです。
おすすめ新着記事
おすすめタグ