.style0 { color: #f26522; border-bottom-color:#f26522;margin-right:12px; } .style1 { color: #f26522; } .style2 { clear:both;height:0px; } .style3 { height:0px;clear:both; } .style4 { vertical-align:top; } .style5 { vertical-align:top; } .style6 { vertical-align:top; } .style7 { vertical-align:top; } .style8 { vertical-align:top; } .style9 { vertical-align:top; }
scriptjunkie{}
CSS アーキテクチャ、パート 1: コード クリーンアップの原則と新しいベスト プラクティス
Denise R. Jacobs | 2013 年 2 月 6 日
メジャーでもマイナーでも Web サイトの CSS の多くは、教科書どおりにコードが記述され、膨大かつ冗長になっています。修飾子要素を不必要に使用し、セレクターのチェーンが不必要に長くて具体的になりすぎ、適切なセレクターがあっても子孫セレクターに大きく依存し、!important を不適切または不必要に使用することでコード行が増えていきます。
組織のスタイルシートの保守性を大幅に改善するため、堅牢な CSS を記述する基本手法をいくつか (英語) 定めます。ただし、このコラムの最終目標は、"スケーラビリティ" が飛躍的に高まるように、特定サイトのスタイルシートの構造を決めることです。
今回取り上げるアプローチは 2 つです。まず、クリーンで効率の良い CSS を記述するため、絶対に不可欠な手法をいくつか取り入れる必要があります。次に、サイトのスタイルシートをレベルアップするため、ますます人気が高まっているスケーラブルな CSS アーキテクチャの核となる手法を学習し、導入する必要があります。
今回は、この 2 つトピックについて説明しますが、スケーラブルなコードの作成に取り組む前に、まず私がお気に入りの方法で少し CSS をクリーンアップしましょう。
便利なテクニックをいくつか
他の開発者から仕事の進め方を学ぶと役に立つことがよくあります。ここでは、個人的な好みをいくつか紹介します。
スタイルをターゲットにする
ページ上のスタイルをターゲットにする手法を用意することをお勧めします。Internet Explorer Developer Toolbar (英語)、Mozilla の Firebug (英語)、または Chrome Developer Tools (英語) のようなツールを使用していない場合は、outline プロパティを追加する昔ながらの手法を使用すれば、要素の表示や操作を希望どおり迅速に行うことができます。
.searchform > .searchsubmit {
width: 14%;
height: 25px;
background: transparent url(images/icon_magnify.png) 0 0 no-repeat;
outline: 1px solid red
}
outline プロパティと値を使用するのは、border プロパティと違って、要素のサイズには影響しない (英語) ためです。red のように色の名前を使用することにも意味があります。コーディングの際には、16 進のカラー コード rgb(a) や hsl(a) だけを使用します。そうすれば、色名を見かけたら、トラブルシューティングを行うためだけに使用しているのがわかります。outline は IE8 以前のブラウザーではサポートされないことに注意してください。
テスト スタイルを追加する
テストやトラブルシューティング時に役立つもう 1 つの優れた手法は、新しく試みるスタイルを字下げ (英語) しておくことです。
.searchform > .searchsubmit {
width: 14%;
height: 25px;
background: transparent url(images/icon_magnify.png) 0 0 no-repeat;
margin: -2px 0 0 0;
}
字下げしておくと、そのスタイルが一時的なものであることを確認でき、後でスキャンして簡単に見つけることができます。スタイルをそのまま使用することに決めたら、既に決まっている他のスタイルと同じように字下げします。
スタイルを無効にする
新しいスタイルを追加する優れた手法以外に、スタイルをすばやく無効にする方法もあります。スタイルを無効にするには、そのスタイルのセレクターまたはルールの前に x- を付けます。
.social a {
-moz-transition: opacity 0.3s ease 0s;
x-display: block;
height: 35px;
opacity: 0.4;
}
この手法は、スタイルをコメントにするより簡単です。スキャンや検索も簡単で、後でそのままにすると決めたら、その場にスタイルとして置いておきます。
CSS のクリーンアップと最適化のガイドライン
余分な話はこれぐらいにして、ここからは最適化したクリーンなコードを記述するための、あるいは、だれかの複雑な CSS をクリーンアップするときのための経験則を中心に説明します。マクロからミクロのレベルまで見ていきます。まず、HTML の読みやすさと意味をわかりやすくする方法について説明してから、スタイルを適切に整理する方法とスタイルの宣言数をさらに減らす方法について説明します。
マクロレベルの最適化
スタイルの宣言自体に注目しがちですが、セレクターを作成する前に、HTML 自体やスタイルシート自体が読みやすくなるようにする必要があります。
スタイルシートの情報を提供して構造を示す
かなり大きなスタイルシートに取り組む場合は、目次を用意します。スタイルシートを初めて目にする開発者のために、セクションに関する情報や、スタイルのグループを見つけるときにどの名前に移動するかがわかるようにしておくと便利です。
基本的なレベルでは、開発者の情報 (名前など) や最終更新日をスタイルシートに挿入することをお勧めします。このようにすれば、開発者はドキュメントの内容について質問がある場合に、だれにたずねればよいかわかります。
/* stylesheet information for XyZ Corp
File created date: 09.15.2010
Last modified date: 06.04.2012
By: [name]
*/
また、ドキュメントの構造やスタイルのさまざまなセクションについて他の開発者が理解できるように、導入部となる目次を用意することをお勧めします。
/* Table of Contents
- Link Styles
- Other sitewide styles
- Actions
- Layout
- LOGO
- TOP NAV
- NAVBAR
- SUBNAV
*/
…
(later in the document…)
/* =Layout */ (etc.)
スタイルシートのセクション名の前に、意図的に等号 (=) を含めていることに注意してください。これはフラグとして機能し、ドキュメント全体から簡単に検索できるようにする方法 (英語) です。
注釈と入れ子
マークアップに注釈を付けたり、マークアップを入れ子にすると、別の要素を含む要素の先頭と末尾を追跡でき、その部分をすばやく特定できます。
div などの主なレイアウト要素に、<!-- #id または .class 名 --> から始まり、<!-- /end #id または .class 名 --> または <!-- / #id または .class 名 --> で終わる注釈を付けます。
入れ子にする必要もないと考えるかもしれません。ただし、見た目という点では役に立ちます。見た目で要素のレベルを明確に示すことで、インライン要素内にブロックレベルの要素が含まれるような問題や、要素が不適切に閉じられたり、再開されたりする問題を見つけるのが簡単になります。このような問題は、しばしば検証で簡単に見つけられない重大なレイアウトの問題につながる可能性があります。
次の例で違いを確認してください。
| 前 | 後 |
<body> <div id="pagewrap"> <div id="header"> <h1>Web サイトのタイトル</h1> <ul id="navigation"> <li><a href="#">ホーム</a></li> <li><a href="#">バージョン</a></li> <li><a href="#">問い合わせ先</a></li> </ul> <div id="contentwrap"> <div id="maincontent"> <h2>メイン コンテンツのタイトル</h2> <p>メイン コンテンツは感動で涙を誘うセカンダリ コンテンツよりもずっと重要です。</p> </div> <div id="secondarycontent"> <h3>サイドバーのタイトル</h3> <p>サイドバーのコンテンツはメイン コンテンツほど重要ではありません (そのためサイドバーに記載します)</p> </div> <div id="footer"> <p>標準の著作権情報やフッター情報</p> </div> </body> |
<body> <div id="pagewrap"> <div id="header"> <h1>Web サイトのタイトル</h1> <ul id="navigation"> <li><a href="#">ホーム</a></li> <li><a href="#">バージョン</a></li> <li><a href="#">問い合わせ先</a></li> </ul> </div><!-- end #header --> <div id="contentwrap"> <div id="maincontent"> <h2>メイン コンテンツのタイトル</h2> <p>メイン コンテンツは感動で涙を誘うセカンダリ コンテンツよりもずっと重要です。</p> </div><!-- end #maincontent --> <div id="secondarycontent"> <h3>サイドバーのタイトル</h3> <p>サイドバーのコンテンツはメイン コンテンツほど重要ではありません (そのためサイドバーに記載します)</p> </div><!-- end #secondarycontent --> </div><!-- end #contentwrap --> <div id="footer"> <p>標準の著作権情報やフッター情報</p> </div><!-- end #footer --> </div><!-- end #pagewrap --> </body> |
詳細については、「効果的なセマンティック マークアップを作成する」(英語) を参照してください。
ミクロレベルの最適化
ミクロレベルの最適化には、ファイル サイズの削減、ページ読み込み時間の短縮、ベスト プラクティスの推進があります。ここからは、ミクロレベルでの CSS 強化方法を説明します。
ルールをアルファベット順にする
CSS の宣言をアルファベット順にすることは、クリーンなコードにし、問題を減らす出発点として優れた方法です。それは、スタイルの宣言をターゲットにしたり、検索するのが非常に簡単になるためです。
例 1: .login { margin-top: 5px; line-height: 1.5em; padding-left: 5px; float: right; list-style-type: none; width: 80px; font-weight: bold; border-left: 1px solid #69824d; } |
例 2: .login { border-left: 1px solid #69824d; float: right; font-weight: bold; line-height: 1.5em; list-style-type: none; margin-top: 5px; padding-left: 5px; width: 80px; } |
効率を上げて高速化
セレクターの要素チェーンが長くなると、ブラウザーはページの DOM が一致するかどうかを調べる際に不必要な検索が多くなります。要素の修飾子を削除し、子孫セレクターを取り除いて、より直接的なセレクターを使用して高速化します。
最適化前:
div#wrapper div#maincontent div#sidebar {
background: #fff url(bg.png) repeat-x 0 0;
border: 1px solid #ff0;
font: normal 1.33em/1.33 Georgia, serif;
margin: 10px 20px;
padding: .1em;
}
最適化後:
#sidebar {
background: #fff url(bg.png) repeat-x 0 0;
border: 1px solid #ff0;
font: normal 1.33em/1.33 Georgia, serif;
margin: 10px 20px;
padding: .1em;
}
このトピックの詳細については、「ページの読み込み時間を短縮するための最適化」(英語) を参照してください。
シンプルかつ短く (KISS: Keep It Simple and Short)
スタイルの宣言やセレクターは短いほど効果があります。スタイル宣言の場合は以下のルールに従います。
- できる限り短縮形のプロパティを使用する。短縮形を使用する場合は、プロパティの短縮形構文、プロパティ値の順序 (指定されている場合)、既定値、プロパティの必須値といった項目に注意する
- 値と単位を凝縮する
- プロパティの重複はできる限り避ける
前:
#sidebar {
background-color: #fff;
background-image: (bg.png);
background-position: 0 0;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: #ffff00;
font-family: Georgia, serif;
font-size: 1.33em;
line-height: 1.33em;
font-weight: normal;
margin: 10px 20px 10px 20px;
padding: .1em;
}
後:
#sidebar {
background: #fff url(bg.png) repeat-x
0 0;
border: 1px solid #ff0;
font: normal 1.33em/1.33 Georgia, serif;
margin: 10px 20px;
padding: .1em;
}
コードの凝縮
最終的には、改行と字下げを削除して、サイトの効率と速度 (英語) を維持します。CSS の開発中は、改行、入れ子、字下げを使用することをお勧めしますが、サイトの稼働準備が整ったら、CSS を簡略化するのが最適です。CSS を圧縮する優れたツールとして、CSS Compressor (英語) や CSS Drive (英語) があります。
ツールの活用
このようなルールを念頭に置いてコーディングすれば、後工程に時間がかかったり、ストレスがたまるのを防ぐことができます。ただし、何でも自分でやらなければならないとは考えないでください。コードのクリーンアップに役立つ優れたツールがあります。CleanCSS (英語) や Code Beautifier (英語) は調べておく価値があります。ここまで説明したアプローチをすべて学んだうえで、さらにこのようなツールを使ってコードをクリーン アップします。
最新のベスト プラクティスを利用してコードを強化する
ご存じのとおり、斬新な考え方が新しいアプローチを生み出し、長年の問題を解決するようになるにつれ、フロントエンド開発の分野はここ数年でかなり進歩しています。ここからは、スタイルシートや HTML にかなり役立つ、フロント エンド コーディングの最新ベスト プラクティスを取り上げます。
Normalize.css によるリセット
CSS のリセットは、全スタイルのベースラインの確立に役立ちます。リセットは、(さまざまな箇所で大きく変えてしまった) 特定の要素を、事実上、ブラウザー既定のスタイルにオーバーライドします。ここ数年、CSS のリセット (英語) は人気になってきていますが、多くのサイトがまだ CSS リセットを採用しておらず、採用していないサイトの CSS のスケーラビリティはかなりやっかいです。
多くの開発者は、Eric Meyer によってかなり有名になった CSS Reset (実現困難という理由で採用されない、英語) や DIY リセット (英語) ではなく、normalize.css (英語) の使用を推奨しています。Normalize.css は、全ブラウザーの要素をベース スタイルにリセットするのではなく、コードを共通のベースラインに "正規化" します。Github の normalize.css プロジェクト (英語) について言えば、CSS リセットに勝るメリットは以下のとおりです。
- 多くの CSS リセットとは異なり、有効な既定のスタイルは保持する
- さまざまな種類の HTML 要素のスタイルを正規化する
- バグや一般的なブラウザーの不整合を修正する
- 巧妙な改良でユーザビリティが向上する
- 詳細コメントを使用してコードが実行する内容を説明できる
標準のリセットの代わりに normalize.css を使用すれば、正しいコーディングを開始でき、ベースライン スタイルの再確立を必要しないため、多くの時間を節約できます。
float の解除に Clearfix を使用する
以下の手法を使用してドキュメントの float を解除している場合は、"強くお勧めする" ことがあります。
<div class="clear"></div>
…
.clear { clear: both; }
上記の解除方法は、おおよそ 10 年前に float を使用する CSS レイアウトが初めて実装されるようになったときに考案されたものですが、これに勝る別の解除方法をお勧めします。
この Micro Clearfix (英語) は、最新の実証済みフロント エンド コーディングのベスト プラクティスを採用する、HTML5 Boilerplate (英語) で使用されています。Micro Clearfix は、Firefox 3.5 以降、Safari 4 以降、Chrome、Opera 9 以降、および Internet Explorer 6 以降をサポートします。以下に例を示します。
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (triggers hasLayout) */
.cf {
*zoom:1;
}
clearfix .cf クラスは float を含むすべての要素に追加します。そうすれば、昔ながらの clear が適用される空の区切り要素 (<div class="clear"></div>) をまったく使用しないで済みます。
Overflow: Hidden について
overflow: hidden を使用しても float を解除できますが、Internet Explorer 7 以前のバージョンでは overflow: hidden メソッドに問題が発生することがあるため、Micro Clearfix の使用を強くお勧めします。
多くの開発者がしばらく overflow:hidden を使っていましたが、以下のような問題が発生します。
- ブラウザー ウィンドウがコンテナーよりも小さいと、スクロール バーが表示されず、コンテンツや子要素も一部表示されない
- margin、border、outline、および絶対位置の PNG とのインターフェイス
- box-shadow、text-shadow、transform などの CSS3 プロパティの適用
『HTML5 & CSS3 for the Real World』(Sitepoint、2011 年) の共著者である Louis Lazaris は、overflow:hidden を使用すると複雑なレイアウトに問題が発生する (英語) ことを示唆しており、Micro Clearfix を使用してこの問題を回避することを提案しています。
overflow:hidden にこだわることに決めた場合は、以下のようにすると、Internet Explorer やブロックレベルの要素で hasLayout を使用できるようになります。
.container {
overflow: hidden; /* Clearfix! */
zoom: 1; /* Triggers "hasLayout" in IE */
display: block; /* Element must be a block to wrap around contents. Unnecessary if only
/* using on elements that are block-level by default. */
}
divider
空の div タグの不適切な使い方としては、border と clear を適用した空の <div> 要素をページ区切りとして使用するのを止めます。
<div class="divider"></div>
…
div.divider {
border-top: 1px solid #ABAA9A;
clear: both;
}
もちろん、上記のコードが表示上のページ区切りとして適切に機能することはわかっていますが、正しい意味合いを表していません。CSS エキスパートで、オブジェクト指向 CSS (OOCSS) の作者でもある Nicole Sullivan (英語) は、<hr> 要素を使用してページのセクションを区切り、そこに必要なスタイルを追加することを推奨しています。
つまり、上記のコードではなく、以下のコードを使用します。
<hr class="divider">
…
.divider {
border-top: 1px solid #ABAA9A;
clear: both;
}
画像の置き換え
フロントエンド開発には、テキストを画像に置き換えることを目的とする CSS 手法に関して長く輝かしい歴史 (英語) があります。2012 年 3 月、Jeffrey Zeldman が Kellum Method (英語) という新しい手法を加えました。-9999px を指定してテキストを画面外に隠す (プロセスで大きな非表示のボックスを作成する) のではなく、画面リーダーのアクセシビリティを変えずにテキストを非表示にします。
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
特にタブレットや画面が小さいデバイスでは、パフォーマンスが向上します。
アイコン要素の使用
ページにアイコンを配置する方法として、以下のように <span></span> を使用することがあります。
<li class="favorite">
<span class="icon favorite"></span><span
id="favorite-insert-point" class="favorite"></span>
</li>
この方法を使用している場合は、サイズに関して <i> タグを活用するアイコン要素を使ったアイコンの使用を試してください。このアプローチは、Twitter Bootstrap で採用されたことによって人気が高まっています。
<p><i class="icon icon-comment"></i>23 comments</p>
...
.icon { background-image: url( sprites.png ); }
.icon-comments { background-position: 0 -30px; }
<i> タグは <span> タグよりもややセマンティックな使い方で、ページ上のアイコンの場所を特定するのが簡単になります。
CSS3 の利用
多くのサイトは、まったく必要がなくても要素に画像を多用しています。CSS3 を使用すると、サイトをレスポンシブ デザイン手法に移行する準備をしながら、画像を大幅に削除できます。角丸 (border-radius)、影付きボックス (box-shadow)、影付きテキスト (text-shadow)、グラデーション (gradient)、ボックスのサイズ指定 (box-sizing) などを行っている多くのサイトでは、CSS3 が役に立ちます。
ただし、CSS3 には次の 2 つのデメリットがあります。まず、CSS3 仕様の多くの部分がまだ定まっておらず、最新ブラウザーでさえ、ほとんどプロパティにベンダー プレフィックスが必要です。また、以前からよく使われているブラウザーが CSS3 をサポートしていないため、フォールバックやヘルパー スクリプトが必要になります。
CSS3 の互換性
残念ながら、Internet Explorer の以前のバージョンには、CSS3 との間に互換性の問題が数多く存在します。現時点では、Internet Explorer 9 が CSS3 を部分的にしかサポートしておらず (最も顕著なのは CSS3 セレクターです。最新の一覧については HTML5 および CSS3 のサポート状況 (英語) を参照してください)、Internet Explorer 6 ～ 8 はまったくサポートしません。CSS3 プロパティの使用を計画している場合は、Internet Explorer 9、8、およびそれ以前のバージョンを使用する閲覧者のために、適切なフォールバックのインストールが必要です。
さいわい、フォールバックに使用できるスクリプトがあります。以下のツールを使用すれば、Internet Explorer で CSS3 をサポートできます。
- Ie9. js (英語)。IE9.js の効果があるプロパティと、解決される問題点 (英語) についての詳しい説明もあります。
- Selectivizr (英語)
- CSS3 PIE (英語)
- cssSandpaper (英語)
- Modernizr (英語)
このようなスクリプトのデメリットは、ページのサイズが増え、読み込み時間が長くなることですが、メリットも大きくなります。
CSS3 用のツール
CSS3 の概要 (英語) や、どのプロパティを安全に使用できるかについては別の記事で取り上げられています。CSS3 に関して最も重要な手順の 1 つは、仕様の変更やブラウザーでの仕様の採用に関する最新情報を把握しておくことです。すべてを把握するのは少し大変なので、http://css3please.com/ (英語) や http://html5please.com (英語) を利用して、構文の最新の変更やサポート状況を把握してください。
多くの優れた CSS3 ジェネレーターが利用できます。ほぼどのプロパティについても、CSS3, Please! (英語) が優れたリソースです。グラデーションについては、Ultimate CSS Gradient Generator (英語) が適切な構文とフォールバックを使ってグラデーション コードを生成する優れたツールです。
楽することが好きで、すべてのベンダー プレフィックスの記述方法を覚えたくなければ、Prefixr (英語) を使用すればこのようなコードをすべて追加できます。また、サーバーへのアップロード後にすべてのプレフィックスが CSS に追加される、Lea Verou が作成したコード (英語) も使用することができます。
グリッドの利用
現時点でサイトでグリッドを確立していない場合は、すぐにこの状態を解消 (英語) して、グリッドを定めます。現在のコードに大量の width、margin、padding の各インスタンスがあり、同じサイズになるはずの要素のサイズが揃っていない場合は、グリッドを利用するタイミングがきています。
要素のサイズを指定して独自のグリッドを構築するか、事前に用意されている CSS グリッド フレームワーク (英語) を利用します。さまざまな種類のフレームワーク (英語) があり、レスポンシブなフレームワーク (英語) もあります。
box-sizing の使用
独自のグリッドを作成する場合に便利な CSS プロパティが box-sizing です。box-sizing プロパティは、ブラウザーが要素のボックス サイズを計算する方法を変更でき、特にレイアウトやグリッドのサイズの扱いに優れています (英語)。
box-sizing プロパティは、"IE ボックス モデル" として知られるモデルに従って、要素のボックス サイズを計算します。つまり、パディング領域はボックスのサイズに含まれます。要素の width プロパティと padding プロパティを一緒に宣言すると、ボックスのサイズは width 値と同じになります (width 値と padding 値を加算した値ではありません)。図 1 にこの考え方を示します。
.png)
図 1 W3C ボックス モデルと Internet Explorer ボックス モデルの比較
(W3C ボックス モデルに基づく既定の box-sizing: content-box ではなく) box-sizing: border-box を使用すると、レイアウトの計算が簡単になるためかなり便利です。box-sizing プロパティには、ベンダー プレフィックスが必要です。
グリッドと画像を流動的にする
先のことも考えて今後も使いやすく (英語) するには、グリッド利用計画の最後として、グリッドの指定を固定ピクセル値から、パーセンテージ (または em) 指定に切り替えます。サイズのパーセンテージを決める最適な方法は、Ethan Marcotte のレスポンシブ Web デザインのゴールデン フォーミュラ: ターゲット=コンテンツ/コンテキスト (英語) です。グリッドの RWD 数値を決めるのに役立つ計算機としては、RWD Calculator (英語) がお勧めです。
また、今後も使いやすさにとって重要なのは、画像がコンテナーのサイズに応じて変化するように設定することです。このためには、次のシンプルなコード行を使用します。
img {
max-width: 100%;
height: auto;
}
これにより、画像が流動コンテナー内で縮小または拡大するようになります。
HTML5 をお忘れなく
最後に、一般的なすべての Web サイトを進化させるには、HTML5 がかなり重要になります。サイトに HTML5 を実装することに疑問の余地はありませんが、問題は "いつ" 実装するかです。レスポンシブ デザインの基礎を築く目的でいずれ採用すれば役に立つと考えられる側面が HTML5 にはいくつかありますが、最も簡単に取り掛かれるのは HTML5 DOCTYPE です。HTML5 DOCTYPE は、HTML5 タグの利用やドキュメント構造の変更に着手する先駆けとして、すぐにページ テンプレート加えることができる簡単な変更です。
<!DOCTYPE html>
この DOCTYPE には旧バージョンとの互換性があるため、ドキュメントの内容を変更する必要はなく、HTML5 タグを実装するだけで動作します。
活用するもう 1 つの側面は HTML5 のタグで、コード モジュールを作成する優れた基礎になると同時に、ページをセマンティック化するのに役立つ新しいタグがいくつかあります。ただし、CSS3 と同様、ブラウザーの旧バージョンとの互換性について考慮することが重要です。新しいタグを認識するにはページでスクリプトを使用する必要があり、このスクリプトにより以前のブラウザーでも HTML5 要素を適切にレンダリングできるようにします。
Internet Explorer 6 ～ 8 で HTML5 を認識できるようにするのに最もよく使われているスクリプトは、html5shiv (英語) です。この唯一のデメリットは、ページの読み込みで追加されるクリプトが他にもあることです。しかし、HTML5 の使用を控える必要はまったくないので、HTML5 の世界に飛び込みましょう (英語)。
優れたクリーン アップ作業によって大がかりな再構築に取り掛かる準備完了
それほど難しくなかったでしょう。コードの構造を適切に組み立て、マクロレベルでクリーンアップしてから、コードをミクロレベルで細かく整理すれば、複雑にからみあった CSS をさまざまな方法で強化できます。古くなったソリューションを効率的なベスト プラクティスに置き換える作業まで進めればかなり役立ちます。
これで序盤のクリーン アップ作業が完了したので、CSS 再構築に本格的に取り掛かる準備ができました。人気が高まっているスケーラブルな CSS アーキテクチャ手法をいくつか取り入れることで、サイトのスタイルシートの保守性や効率性をレベルアップできます。しっかりと取り組みましょう。このシリーズの次回は、上位 4 つのアプローチの概要を説明します。
この記事は、Internet Explorer チームによる HTML5 技術シリーズの一部です。3 か月間無料の BrowserStack クロスブラウザー テスト (https://modern.IE) を使って、この記事の概念をお試しください。
執筆者紹介
Denise R. Jacobs は、Web デザインのエキスパートであり、14 年以上の経験を持つ業界のベテランです。彼女は今最も好きなこと、つまり、講演者、著者、Web デザイン コンサルタント、創造的なエバンジェリストになることに取り組んでいます。Twitter (@denisejacobs、英語) では、"great resources" (優れたリソース) を紹介して高い評価を受けており、CSS コードのトラブルシューティングに関する主な書籍である『The CSS Detective Guide』(New Riders Press、2010 年) の著者であり、『Interact with Web Standards』(New Riders Press、2010 年) および『Smashing Book #3: Redesign the Web』(Smashing Media GmbH、2012 年) の共著者です。長年構想を練ってきた最新のプロジェクトでは、少数派の人々に表舞台で活躍する Web エキスパートになって Web でロックする (英語) ことを奨励しています。彼女の連絡先は、denise@denisejacobs.com (英語のみ) です。DeniseJacobs.com (英語) で詳細を確認できます。