プログラミング

プログラミング

【嫌われている機能も使い方次第!】CSSのカスケード機能を有効に使う方法

258 views

カスケーディングを味方につけて、スタイルシートと格闘するのはもうやめにしましょう!

 

多くのフロントエンドエンジニアにとって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」を翻訳・再編集したものです。

関連記事

おすすめ記事