scriptjunkie{}

[アーティクル]
10/20/2021

CSS アーキテクチャ、パート 3: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 1 と 2)

Denise R. Jacobs | 2013 年 4 月 10 日

CSS アーキテクチャシリーズで前回(英語) 取り上げた、有名なスケーラブルなモジュール構造のアプローチには、CSS の考え方や CSS の構築方法を変えるのに役立つ特徴がすべて含まれています。これらのアプローチは多くの分野で重なり合っていて、CSS を強化するプロセスのどの側面が真に重要かを示唆しています。新しいサイトを構築するのであれば、いずれのアプローチに従っても問題ありませんが、ここで実行しようとしているのは、手に負えない状態になってしまった既存の CSS を整理することです。

つまり、既に説明したアプローチはどれをとっても優れた威力を発揮しますが、本当に必要なのは、たとえば "JusticeLeague" (ジャスティスリーグ、英語) のスケーラブルなモジュール構造手法のような、各アプローチの優れた点を組み合わせて、複雑になり手に負えなくなったコードに対処する方法です。また、「ローマは一日にして成らず」と言われているように、整頓されていない膨大なコード行を一気に修正することは不可能です。したがって、段階的なアプローチを採用し、各段階に時間をかけてコードを修正していくのが適切です。

CSS のリファクタリングに適切な名前を付ける

昨年、まさに CSS のリファクタリングを行うためにクライアントに雇われ、プロジェクトに加わりました。DRY CSS、OOCSS、SMACSS、および CSSG について学んでから、これらのアプローチの不要部分を取り除き、不可欠な手法のみを抽出することに努めました。突然の閃きでしたが、これらすべてのアプローチは有名なことわざ「measure twice, cut once」(念には念を入れよ) に他ならないことに気付きました。もちろん、これらのアプローチはどれも、パターンを探し、再利用できる移植可能なスタイルやモジュールを作成して、不要で冗長なセレクターやスタイルを追加しないことを推奨しています。

そのうえ、クライアントは多くのコードをメンテナンスしているので、CSS に加える変更に柔軟性を持たせることを求めています。そこで、クライアントの CSS の行数を減らすために、まとまりのある段階的な計画を考案しました。最終的には、4 つのスケーラブルな CSS フレームワーク用にすべての手法とテクニックを統合し、開発したプロセスにより、CSS の行数は大幅に削減されました。

このプロセスの作成時に、プロセスの名前を考える必要がありました。先ほどの「measure twice, cut once」を土台に CSS という文字列を加えて以下のように名前を考えました。

measure twice, cut once css → mtco css → meta coa css → MetaCoax!

したがって、このシリーズでは、サイトに表示されるデザインや機能は変えずに、CSS の判読性、簡潔性、および拡張性を高めるために、冗長で膨大な CSS の行数を削減することを目的として設計した MetaCoax CSS リファクタリングプロセスを紹介します (詳細については、CSS の行数削減に関する最近のプレゼンテーションスライド(英語) を参照してください。

CSS リファクタリングに取り組む準備として、以下の点に留意してください。まず、具体性とカスケード (連鎖) について十分理解します (理解するのとしないのとでは大きな違いが生まれます)。このシリーズ最初の 2 回 (パート 1 とパート 2) をご覧ください。セレクターやルールに過度に具体性を持たせると再利用が難しくなります。特に子孫のセレクターを次々に増やしていくと、すぐに具体性を管理できなくなるのは目に見えているので、子孫セレクターは使用しないようにします。次に、継承のルールを覚えておきます。子要素に継承されるプロパティもあるので、これらのプロパティが DOM の下位に向かって連鎖していくしくみを常に把握しておく必要があります。

MetaCoax プロセス

MetaCoax プロセスは 4 つのフェーズから成るアプローチです。このアプローチでは、各フェーズは前のフェーズに基づき、すべてのフェーズでコード量を削減し、スケーラビリティとメンテナンスの容易性を高め、追加のメリットとして、今後も使いやすい(英語) サイトの基礎を築く手法を取り入れています。ここからは、各フェーズの詳細と、各フェーズに含まれる手法やテクニックについて説明します。今回は、フェーズ 1 とフェーズ 2 を取り上げます。フェーズ 3 とフェーズ 4 については、次回の最終回をお楽しみに。

注: MetaCoax リファクタリングプロセスに取り組む際に使用する優れたツールの 1 つは、Nicole Sullivan の CSS Lint (英語) で、このツールは CSS でクリーンアップが必要な場所を追加で特定したり、クリーンアップ方法についてのアイデアを提供します。

フェーズ 1: セレクターの短縮、ルールセットの利用、およびルールセットの階層化

最初のフェーズでは、最小限の作業でサイトの CSS を強化することに重点を置きます。最小限の作業での変更では、CSS には変更を加えますが、サイトページの現状の HTML には手を加えません。スタイルシートを少し軽量化し、最小限の時間と作業で簡単にメンテナンスや更新を行えるようにすることが目標です。この手法は、ルールセットを賢明に再利用することで、冗長性を取り除きながらセレクターを最適化します。このフェーズの手法を CSS に適用するだけでも、メンテナンスが容易になります。

このフェーズでは以下のことを実行します。

セレクターのチェーンを短くする
- 修飾子を削除する
- 子孫を削除する
- セレクターのチェーンを 3 段階までにする
宣言の利用と階層化
- 継承を使ってカスケードを利用する
- !important プロパティを確認、変更、削減する
- ルールセットで DRY (Don't Repeat Yourself: 同じことを繰り返さない) を実行する

セレクターのチェーンを短くする

連鎖が深いセレクターではなく浅いセレクターを使用して、できるだけチェーンが短縮くなるようにセレクターを最適化するのが目標です。この手法により、コードの連携が容易になり、スタイルの移植が簡単になります。また、セレクターが破損する可能性減り、場所の依存関係が少なくなり、具体性が下がり、!important 宣言を過度に使用することなく具体性の競合を避けられるといったメリットも生じます。

セレクターのチェーンを短くしたり、ここまでに説明したすべてのスケーラブルなアーキテクチャの手法を組み合わせたり、「リデュース、リユース、リサイクル」の精神をさらに当てはめたりと、方法はいくつかありますが、どの手法でも間違いなく CSS コードの寛容性を高めることができます。これこそが、スタイルシートを更新する本質的な目標ではないでしょうか。

子孫セレクターを削除する

子孫セレクター (a b) は、特定の要素を対象にするために使用する、最も負荷の高い連結セレクターの 1 つです。他にもユニバーサルセレクター (*) や子セレクター (a > b) も負荷の高い CSS セレクターです。これらのセレクターの負荷が高くなる原因は何でしょう。その原因は、これらのセレクターは普遍性にあります。つまり、ブラウザーは、多くのページ要素を検索して一致するかどうか調べなければなりません。セレクターのチェーンが長くなるにつれて必要な確認作業も増えるため、ブラウザーがスタイルを画面にレンダリングする時間は長くなります。子孫セレクターを照合する場合、ブラウザーは、ページでキーセレクター (最も右側にあるセレクター) のすべてのインスタンスを検索し、上位ツリーをさかのぼりながら一致するかどうかを確認します。

この動作は、数百行のスタイルシートではあまり問題になりませんが、ドキュメントのサイズが約 10,000 行を超えると問題は悪化していきます。セレクターのチェーンが長くなることにより、処理能力が低い小さなデバイスが不要で膨大な CSS ドキュメントを読み込んで処理しなければならなくなります。今後、モバイル優先(英語) の使いやすいアプローチを採用する場合は特に注意してください。

子孫セレクターに過度に頼るのは、Internet Explorer 6 を対象にコーディングしていた当時のなごりです。Internet Explorer 6 では、CSS 2.1 の他の連結セレクターをまったくレンダリングできませんでした。米国などの主要市場では、Internet Explorer 6 (英語) はほとんど使用されなくなっているため、子孫セレクターを過度に使用するのを止めて、Internet Explorer 7 および Internet Explorer 8 と互換性のあるセレクターを使用しても問題ありません。表 1 は、Internet Explorer 7 で使用できるセレクターを示しています。表中のすべてのセレクターは Internet Explorer 7 以降のすべてのバージョンでサポートされます。

セレクター	Internet Explorer 7
ユニバーサル *	使用可
子: e > f	使用可
属性: e[attribute]	使用可
:first-child	使用可
:hover	使用可
:active	使用可
隣接する兄弟: e + f	使用不可
:before	使用不可
:after	使用不可

表 1 CSS 2.1 のセレクターは Internet Explorer 7 で問題なく使用できる

注: ブラウザーが他の CSS セレクターをサポートしているかどうか判断するには、http://caniuse.com/(英語) および http://www.findmebyip.com/litmus/(英語) の表を参照してください。

子孫セレクターの代わりに、子セレクターを使用します。子セレクターは、親要素の直接の子孫 (つまり、子孫セレクターの場合には含まれる孫やひ孫ではなく、第 1 世代の直接の子) 要素を選択します。図 1は、この選択プロセスを示しています。

図 1子孫セレクターと子セレクターの比較

子セレクターも負荷の高いセレクターですが、具体性は高くなります。つまり、ブラウザーは、キーセレクターに一致するまで継承チェーンを下って検索することはありません。そのため、子セレクターでは、より明確に必要な要素を対象にします。

子孫セレクターを使用する必要がある場合は、子孫セレクターから不要な要素をすべて取り除きます。以下に例を示します。

.widget li a

上記のコードを以下のように変更します。

.widget a

その結果、li 要素があるかどうかに関係なく、スタイルが適用されます。

セレクターの修飾子を削除する

要素に #ID と .class の両方を付けると、ブラウザーは、セレクターに一致するページ要素を追加検索するという不要な処理が実行され、動作が遅くなります。ID を修飾する必要はまったくありません。ID はどのページ上でも一意で、常にそれ自体に直接一致するため、CSS において具体性が最も高いセレクターの 1 つです。また、修飾子が付いたセレクターは、セレクターの具体性を大きく高め、さらに具体的なセレクターの使用や、かなり具体的なルールセットに勝る !important の使用が必要になります。

以下のセレクターは、

div#widget-nav div#widget-nav-slider

次のように単純化できます。

#widget-nav #widget-nav-slider

さらに以下のように単純化できます。

#widget-nav-slider

上記のセレクターはどれも同じ結果になります。

セレクターの要素クラス修飾子を削除すると、セレクターの具体性が下がり、必要に応じて適切にカスケードを使用してスタイルをオーバーライドするのが容易になります。次に例を示します。

li.chapter

理想的には以下のように変更します。

.chapter

さらに、

タグの場合は具体性が高まるため、
タグのクラスを変更して、以下のように CSS にスコープを設定することを考えます。

.li-chapter or .list-chapter

3 段階までにする

セレクターの最適化に取り組む場合、「3 段階まで」とルールを決めます。連結セレクターでは 3 段階までにキーセレクターにたどり着くようにします。たとえば、かなり長い次のセレクターについて考えます。

div#blog-footer div#col2.column div.bestright p.besttitle {margin-bottom: 4px;}

3 段階までにキーセレクターに到達するためには、以下のようにセレクターを変更します。

#col2.column .besttitle {border: 1px solid #eee;}

宣言の利用と階層化

次は、スタイルの宣言自体に注目します。膨大な CSS のリファクタリングを行ってより管理しやすくするときに、主にセレクターに注目し、スタイルはそれ自体でうまくいくと考えがちです。しかし、CSS の行数を減らすには、スタイルの宣言内容 (図 2 参照) や、スタイルを宣言する場所に注目することも重要です。

図 2CSS ルールセットの分析

継承を利用する

多くの場合、実際はあまり理解していないことを理解していると考えてしまうことがありますが、CSS の継承もその例の 1 つです。継承は CSS の基本概念 (英語) であることはわかりますが、実際にはどのプロパティが継承され、どのプロパティが継承されないかは正確には覚えていません。表 2は、子孫要素のスタイルを別に定義しない限り子孫要素に継承される、最も一般的に使用されるプロパティを示しています (それほど使用されていなくても、同じように継承されるプロパティは他にもあります、英語)。

color

font-family

font-size

font-style

font-variant

font-weight

font

letter-spacing

line-height

list-style-image

list-style-position

list-style-type

list-style

text-align

text-indent

text-transform

visibility

white-space

word-spacing

表 2 子孫要素が継承する一般的な要素

冗長なスタイルを探して統合したり取り除いたりするときは、このようなプロパティに注意します。スタイルシートを更新するときは、継承できるプロパティを CSS に配置し、最大限に活用して繰り返さないようにします。これらのプロパティを適切に配置すると、後で冗長なスタイルを宣言する可能性がまったくなくなります。

!important プロパティを確認、変更、削減する

CSS に膨大な数の !important 宣言がある場合は、これを削減します。!important の宣言は、実際には特定のインスタンスでのみ使用します。Chris Coyier の「CSS Tricks」(CSS の手法、英語) では、ユーティリティクラスまたはユーザースタイルシート (英語) で !important 宣言を使用することを推奨しています。これら以外の場所で !important 宣言を使用すると自己中心的で怠惰(英語) な開発者と思われます。だれもこのように思われることは望まないでしょう。

!important を削減するにはどうすればよいでしょう。まず、先ほど推奨した方法でセレクターの具体性を低くします。次に、新しいスタイルで前のルールセットを元に戻すのではなく、理想的には新しいスタイルを前のルールセットに追加します。

つまり、新しいスタイルを記述して前のスタイルを元に戻すことを考えている場合 (!important を使用して具体性が競合する状況で新しいスタイルを優先させようと考えている場合) は、前のスタイルを考え直す必要があります。前のスタイルで不要な部分を取り除いてから、前のスタイルを元に戻さずに新しいスタイルを作成してスタイルを追加します。言い換えると、スタイルのルールセットを「階層化」します。これは、フェーズ 2 のモジュール作成の一部であり、スタイルを「拡張する」とか、スタイルを「サブクラス化する」と表現することもあります。

同じスタイルに膨大な数の !important プロパティを使用している場合、これらのプロパティは、間違いなく、複数の要素に適用できる移植可能なスタイルに変更できます。これについてもフェーズ 2 で説明します。

ルールセットで DRY を実行する

CSS で繰り返される多くのスタイルを削減するには、DRY コーディングの手法を少し取り入れると役に立ちます。完全な DRY CSS アプローチを取り入れるのは少し大変ですが、繰り返される同じルールセットをグループ化することはかなり優れた手法(英語) です。

フェーズ 2: 再構成、調整、モジュール化

フェーズ 2 では、サイトの CSS を強化するための中～上級の作業に注目します。この作業では、ページの CSS と HTML の両方を変更します。HTML の変更では、クラス名の変更と再割り当てが必要になる可能性が高くなります。以前の HTML を削除し、セレクターから余分な要素を削除して、コード効率を上げるためにモジュールを作成し、ページ単位ではなくカテゴリ単位にスタイルをグループ化して、スタイルシートを構造化および整理することが目標です。

このフェーズでは、セレクターの正確性と効率性を高めることにより、冗長性を取り除いてスタイルシートを軽量化し、メンテナンスを容易にします。このレベルの強化作業では、フェーズ 1 に比べて時間や労力がかかりますが、作業の大部分が CSS の強化に必須で、CSS コードの行数を大幅に削減できます。

このフェーズでは、以下のことを行います。

リファクタリングのために構造を変える
- スタイルシートの CSS ルールをカテゴリに分ける
- DOM で修飾子を多く利用しているスタイルの構造を変える
- クラス名をキーセレクターとして使用する
モジュールの作成を始める
- ダブルハイフン (--) を使用してモジュールのサブスタイルを拡張する
移植可能なヘルパースタイルを作成する
- 正確なレイアウトヘルパー
- タイポグラフィカルなスタイル
HTML を調整する
- インラインスタイルを取り除く
- セマンティクスを適切に表現するためにの使用を減らす

リファクタリングのために構造を変える

今回の大きなテーマは CSS の構造を変えることです。構造を変える場合は、まず、ページのコンポーネントやページ階層に基づく固有のスタイルを作成する方法から、移植可能、再利用可能、およびモジュール化可能な方法に移行します。

スタイルシートの CSS ルールをカテゴリに分ける

このシリーズの第 1 回 (英語) では、目次を作成して、CSS でスタイルのセクションを簡単に見つけられるようにすることを推奨しました。CSS リファクタリングのこのフェーズでは、SMACSS のカテゴリ (英語) に従って、各セクションをスタイルの種類に変換して、プロセスを数段階ステップアップします。これらのカテゴリは以下のとおりです。

Base (ベース): 既定のスタイル。通常は、ドキュメント全体にカスケードされる単一の要素セレクターです。
Layout (レイアウト): ページの各セクションのスタイル。
Module (モジュール): サイトのさまざまなモジュール (吹き出し、サイドバーセクション、プロダクト、メディア、スライドショー、リストなど) の再利用可能なスタイル。
State (状態): 特定の状態におけるモジュールまたはレイアウトの外観を記述するスタイル。
Theme (テーマ): モジュールまたはレイアウトの外観を説明するスタイル。

したがって、目次とドキュメントのセクションは次のようになります。

/* Table of Contents
 - Base
 - Layout
 - Module
 - State
 - Theme
 */
 …
 (later in the document…)
 /* =Layout */ (etc.)

このスタイルシートの再編成は、フェーズ 2 の残りの手法のための基礎を築くことに役立ち、フェーズ 3 の一部でもあります。

DOM で修飾子を多く利用しているスタイルの構造を変える

ページ固有のスタイル (body 要素にクラスを追加して異なるページを表すことに基づくスタイル) を完全に取り除くことは、今回の最も重要なテーマの 1 つです。ページ固有のスタイルを使用すると、ブラウザーは

タグまでの DOM チェーンを強制的にチェックします。以下に例を示します。

body.donations.events div#footer-columns div#col1 div.staff span.slug {
 display: block;
 margin: 3px 0 0 0;
 }

この手法が原因で、以下の例に示すように、セレクターのチェーンが長くなり、セレクターの具体性が高まり、!important を使用して上位カスケードのスタイルをオーバーライドする必要が生じます。

body.video div#lowercontent div.children.videoitem.hover a.title { background: #bc5b29;
 color: #fff !important;
 text-decoration: none;
 }

この手法は問題です。いいですか。

これを修正するには、セレクターを 3 段階までにし、修飾子を削除して具体性を下げるといった、これまでに説明したすべての推奨事項に従います。最終結果は、おそらく以下のようになります。

.donations-slug {
 display: block;
 margin: 3px 0 0 0;
 }

クラス名をキーセレクターとして使用する

ID は具体性がかなり高く、クラスを再利用するようには ID を再利用できないため、できる限り使用を控えます。ただし、クラスを作成する際に、クラス名のセマンティックを維持した状態で移植できるようにすることが望ましい場合もあります。セレクターをできるだけ直接的にすることが目標です。そのためには、具体性の問題を避け、スタイルを組み合わせて階層化します。

SMACSS では、セレクターを作成するときにこの手法を埋め込み、キーセレクターをタグ名や #id ではなく .class にします。最も右側のキーセレクターが最も重要なセレクターになります。セレクターが対象の要素を具体的に表現できれば成功です。その結果、ブラウザーは正確に一致する要素のみを検索するようになるため、スタイルの対象がより直接的になります。

子セレクターを使用しているすべての場所を確認し、可能であれば具体的なクラスに置き換えます。これは、子連結に要素としてのキーセレクターを含める (これも推奨されていません) ことを回避することにもなります。

たとえば、以下のようにはしません。

#toc &gt; LI &gt; A

以下に示すクラスを作成し、適切な要素に追加するようにします。

.toc-anchor

モジュールの作成を始める

スケーラブルな CSS アプローチやモジュールで「念には念を入れよ」ということわざを示す典型的な例はありませんが、このことわざが中核となる考え方です。モジュールは、設計パターンから抽象化されたコードのコンポーネントです。たとえば、左、右、または下に画像を配置した項目のリストを頻繁に表示するような場合です。このような場合は、すべてのモジュールが共有するスタイルの基本セットを備えるモジュールに抽象化します。次にこのモジュールを拡張 (またはスキン化) して、テキスト、背景、フォントの色、枠線、フロートなどを変更しますが、構造は変えません。

モジュールが最も優れているのは、移植可能である (場所に依存しない) 点です。設計パターンからコードモジュールを抽象化すると、スタイルを変えてコードを最初から設計する必要がなくなり、コードモジュールをページのあらゆる場所に配置して同じように表示できます。これこそが CSS の目的です。前述の提案に加えて、CSS をモジュール化することは、コード量を大幅に削減する最も優れた方法の 1 つです。

OOCSS は、構造化方法(英語)、モジュールのスキン化(英語)、およびモジュール化の対象(英語) について考える優れた方法を提供します。SMACSS は、モジュールに名前を付けて拡張する方法についての明確なガイドライン(英語) を提供します。

ダブルハイフン (--) を使用してモジュールのサブスタイルを拡張する

SMACSS は、モジュールの拡張に関する優れたガイダンスを提供しますが、私はダブルハイフン (--) を使用してサブスタイルを拡張する CSS for Grownups のテクニックの方が好きです。以前のスタイルを基礎とし、これを拡張して新しいスタイルを設定するという、見た目の指示なので、非常に理解しやすいテクニックです。

以下に例を示します。

#go, #pmgo{
   width: 29px;
   height: 29px;
   margin: 4px 0 0 4px;
   padding: 0;
   border: 0;
   font-size: 0;
   display: block;
   line-height: 0;
   text-indent: -9999px !important;
   background: transparent url("/images/go.jpg") 0 0 no-repeat;
   cursor: pointer; /* hand-shaped cursor */
   x-cursor: hand; /* for IE 5.x */
 }
 #pmgo{
   margin: 2px 0 0 3px;
   background: transparent url("/images/go.jpg") no-repeat center top;
 }

このコードを修正して、以下のようなコードに変更します。

.button-search{
   width: 29px;
   height: 29px;
   margin: 4px 0 0 4px;
   padding: 0;
   border: 0;
   font-size: 0;
   display: block;
   line-height: 0;
   text-indent: -9999px !important;
   background: transparent url("/images/go.jpg") 0 0 no-repeat;
   cursor: pointer; /* hand-shaped cursor */
   x-cursor: hand; /* for IE 5.x */
 }
 .button-search--pm{
   margin: 2px 0 0 3px;
   background: transparent url("/images/go.jpg") no-repeat center top;
 }

移植可能なヘルパースタイルを作成する

モジュール化のプロセスと同様に、移植可能なスタイルを別の便利なツールとして利用することをお勧めします。以下で、CSS for Grownups の例をいくつか紹介します。

正確なレイアウトヘルパー

CSS for Grownups の標準では、少し余分なレイアウトヘルプを持つことを推奨しています。グリッドは多くの問題に対処しますが、このようなスタイルでも、コードの行数を減らしながら、必要に応じて (特に上下の間隔という点で) 要素を少し移動することができます。

.margin-top {margin-top: 5px;}
 .margin-bottom {margin-bottom: .5em;}

クラスを作成するときには、多くの場合、名前のセマンティックを維持することに努めますが、この例では説明的な名前でかまいません。

タイポグラフィカルなスタイル

タイポグラフィカルなスタイルは、フォントの種類、サイズ、および行の高さを指定するために CSS に多くのコードを記述している場合に最適です。OOCSS と CSS for Grownups はどちらも、以下のように、要素に結び付けられていない専用のタイポグラフィカルなスタイルを提案しています。

.h-slug {font-size: .8em;}
 .h-title {font-size: 1.5em;}
 .h-author {font-size: 1em;}

大きな課題は、font、font-size、font-face、および h1 から h6 までのプロパティを検索することですが、これらのプロパティが大量に存在することに驚くでしょう。その多さに大笑いしたら、どのスタイルが何に適用され、どのサイズが重要かを確認してから、移植可能なタイポグラフィカルなスタイルの作成を開始します。

HTML を調整する

これまで説明してきたフェーズ 1 とフェーズ 2 の手法は、CSS のクリーンアップという点では優れていますが、まだページのマークアップの問題があります。CSS for Grownups で Andy Hume が提案しているように、多くの場合、新しいクラスの名前を追加する以外にも HTML への変更が必要です。

セマンティクスを適切に表現するためにの使用を減らす

セマンティクスを適切に表すにはタグの方がはるかに適している場所でタグを使用していませんか。W3C で規定 (http://www.w3.org/TR/html401/struct/global.html\#h-7.5.4、英語) されているように、タグはインライン要素での使用のみを目的とし、ブロックレベルの要素での使用を目的とはしないため、タグをヘッダーで使用したり、ブロックレベルの他の要素で使用することは技術的に不適切です。

たとえば、以下の span タグは、このコンテンツがドキュメントのどの階層に対応するかを示す段落タグまたはヘッダータグに置き換えるべきです。このような要素はどちらも、クラスをフックするための基礎を提供できます。
- Brenda Hillman EssaysAir in the EpicBrenda Hillman
セマンティクスの観点から改良を加えると、このコードは以下のようになります。
- Brenda Hillman Essays
  
  Air in the Epic
  
  Brenda Hillman
インラインスタイルを取り除く

最後に、インラインスタイルを取り除く必要があります。今日では、インラインスタイルを使用する必要はほとんどありません。インラインスタイルは HTML に密接に結び付き過ぎており、タグが広く使用されていた時代(英語) に似ています。インラインスタイルを使用して具体性を断念する場合は、今回推奨している変更を施して具体性を失わないようにし、効果的にインラインスタイルの必要性を取り除きます。

たとえば、以下のインラインスタイルを考えてみます。

<span class="text-indent: 1em">Skittles are tasty</span>

このインラインスタイルは、以下のように、ドキュメント全体に適用される独自のクラスに簡単に変更できます。

.indent {text-indent: 1em:}

遂行すべきミッション(英語) では、インラインスタイルのすべてのインスタンスを見つけて、どのインスタンスを移植可能なヘルパーにするか確認します。使用しているプロパティは、他のテキストのインスタンスで再利用できる移植可能なスタイルへと簡単に変更できます。

試してみましょう、ためになります

スウェーデンの Malmö で開催された ØredevWeb 開発カンファレンスでは、Katrina Owen による優れたプレゼンテーション「Therapeutic Refactoring」(セラピーリファクタリング、英語) に興味を持ちました。このプレゼンテーションでは、納期が近づいたら CSS のリファクタリングを開始して、煩雑なコードを整理して、管理を容易にし正確性取り戻すことを提案しています。

同様の手法を使用して、CSS の構造を変えて改良できます。1 回につきコード 1 行ずつサイトのスタイルシートを改良しながら、CSS で問題となっている部分を修正することにより、安心して機能を使用できるようになります。

しかし、すべての作業が完了したわけではないので、もう少しお付き合いください。CSS から完全に問題を取り除き、また、後で作業するすべてのフロントエンド開発者が既存のリソースを利用できるようにするために、MetaCoax プロセスで取り上げるべきフェーズがまだ 2 つ残っています。

この記事は、Internet Explorer チームによる HTML5 技術シリーズの一部です。3 か月間無料の BrowserStack クロスブラウザーテスト (https://modern.IE) を使って、この記事の概念をお試しください。

参考資料
- CSS Lint のページ (英語)
- 良い習慣を破る(英語) – Front Trends Conference 2012 での Harry Roberts の講演
- ビッグ CSS (英語) – もう 1 つの Harry Roberts による優れたプレゼンテーション
執筆者紹介

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(英語) で詳細を確認できます。

コメント (0)

コメントを残すにはサインインしてください。

次の方法で共有

scriptjunkie{}

CSS アーキテクチャ、パート 3: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 1 と 2)

CSS のリファクタリングに適切な名前を付ける

MetaCoax プロセス

フェーズ 1: セレクターの短縮、ルールセットの利用、およびルールセットの階層化

セレクターのチェーンを短くする

子孫セレクターを削除する

セレクターの修飾子を削除する

3 段階までにする

宣言の利用と階層化

継承を利用する

!important プロパティを確認、変更、削減する

ルールセットで DRY を実行する

フェーズ 2: 再構成、調整、モジュール化

リファクタリングのために構造を変える

スタイルシートの CSS ルールをカテゴリに分ける

DOM で修飾子を多く利用しているスタイルの構造を変える

クラス名をキーセレクターとして使用する

モジュールの作成を始める

ダブルハイフン (--) を使用してモジュールのサブスタイルを拡張する

移植可能なヘルパースタイルを作成する

正確なレイアウトヘルパー

タイポグラフィカルなスタイル

HTML を調整する

セマンティクスを適切に表現するためにの使用を減らす

Air in the Epic

インラインスタイルを取り除く

試してみましょう、ためになります

参考資料

執筆者紹介

コメント (0)

その他のリソース

次の方法で共有

scriptjunkie{}

CSS アーキテクチャ、パート 3: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 1 と 2)

CSS のリファクタリングに適切な名前を付ける

MetaCoax プロセス

フェーズ 1: セレクターの短縮、ルール セットの利用、およびルール セットの階層化

セレクターのチェーンを短くする

子孫セレクターを削除する

セレクターの修飾子を削除する

3 段階までにする

宣言の利用と階層化

継承を利用する

!important プロパティを確認、変更、削減する

ルールセットで DRY を実行する

フェーズ 2: 再構成、調整、モジュール化

リファクタリングのために構造を変える

スタイルシートの CSS ルールをカテゴリに分ける

DOM で修飾子を多く利用しているスタイルの構造を変える

クラス名をキー セレクターとして使用する

モジュールの作成を始める

ダブル ハイフン (--) を使用してモジュールのサブスタイルを拡張する

移植可能なヘルパー スタイルを作成する

正確なレイアウト ヘルパー

タイポグラフィカルなスタイル

HTML を調整する

セマンティクスを適切に表現するために の使用を減らす

Air in the Epic

インライン スタイルを取り除く

試してみましょう、ためになります

参考資料

執筆者紹介

コメント (0)

その他のリソース

フェーズ 1: セレクターの短縮、ルールセットの利用、およびルールセットの階層化

クラス名をキーセレクターとして使用する

ダブルハイフン (--) を使用してモジュールのサブスタイルを拡張する

移植可能なヘルパースタイルを作成する

正確なレイアウトヘルパー

セマンティクスを適切に表現するためにの使用を減らす

インラインスタイルを取り除く