CSS 学習ノート (16) CSS の保守性ベスト プラクティス_html/css_WEB-ITnose

はじめに

CSS コードは保守が難しいことで知られています。

• 要素のスタイルを設定する方法は、定義されたクラス、定義された ID、要素のタグ名、要素の属性、その他のセレクター、およびこれらのセレクターの組み合わせによって実現できます。 ;

• 要素に適用されるスタイルは、単一のスタイル ルール、複数のスタイルの組み合わせ、または親要素から取得される場合があります。 CSS スタイルは、要素の style 属性、ページの先頭部分、または別の CSS ファイルで定義できます。

• CSS スタイル定義の柔軟性により、CSS コードの多様性がもたらされます。これらのスタイル定義方法を章なしで使用すると、必然的に CSS コードの保守が混乱し、困難になります。この記事では、保守可能な CSS コードを記述する方法について説明するための議論を開始し、いくつかの側面を要約します。

Web フロントエンド開発を始めるのはそれほど難しいことではありませんが、初心者が十分な学習とコーディングの習慣を持っていない場合、開発レベルの向上は非常に遅くなります。 by 「Web フロントエンド開発のベスト プラクティス」 パーティ構築

1. コード標準

同じプロジェクトに何人が参加しても、必ず次のことを確認してくださいコードの各行は次のようになります。同じ人によって書かれたものです。 by コーディング標準 @mdo

命名標準と形式標準はコード標準の最も基本的な標準であり、コードの混乱はコマンドと形式の混乱から始まり、明確な名前付けと規則性によりコード形式が読みやすくなります。コードの保守性が向上し、読者と保守者に良い第一印象を与えます。すべての開発チームは独自の規範を持っている必要があります。

クラス名を構成するキーワードの接続子はダッシュ - です。

クラス名の重複を避けるため、親要素のクラス名が名前の接頭辞として使用されます。

.page-content-title {    ...}

CSS スタイル定義では、左中括弧がセレクターの同じ行に配置され、セレクターとの間にスペースが追加されます。読みやすさを確保しながらコードの行数を短縮します。スタイル宣言では、コードの読みやすさを向上させるために属性名と値をスペースで区切ります。

/* 父元素的样式声明 */.page-content {    ...}/* 子元素的样式声明 */.page-content-body {    ...}

これは 1 行でコメントするのは難しいです〜 by フロントエンドコーディング仕様 CSS - Barret Lee

/* 不推荐 */.page-content-title{    border-left:1px solid #fff;} /* 不推荐 */.page-content-title{border-left:1px solid #fff;}/* 推荐 */.page-content-title {    border-left: 1px solid #fff;}

複数のセレクターが同じスタイル宣言を持つ場合、読み取りと保守を容易にするために、各セレクターは別の行を占める必要があります。

CSS スタイル ファイルに追加されるコメントには、主に 2 種類があります。ファイル ヘッダーのファイル情報コメントと本文の説明コメントです。

/* 不推荐 */h1, h2, h3 {    font-weight: bold;    line-height: 1.5;}/* 推荐 */h1,h2,h3 {    font-weight: bold;    line-height: 1.5;}

ファイル情報

には通常、ファイルのバージョン、著作権情報、作成者などが含まれます。
• 説明コメント

  モジュールのコメントと、セレクターの個別のコメントが必要であることを示します。 CSS セレクターのコメントは、セレクターと同じ行ではなく、セレクターの前の行に追加する必要があります。コメントは圧縮中にオプションで削除できます。

これが「重要なコメント」であることを示すには、/* の後に感嘆符を追加します。圧縮モードでコンパイルする場合でも、このコメント行は保持され、通常は著作権情報を宣言するために使用できます。 by SASS 使用ガイド - Ruan Yifeng のブログ

/* 注释规范说明：文件头部的文件信息注释 *//*! * page content v1.0 * * Copyright 2015 * Dual licensed under the MIT or GPL Version 2 licenses. * * Designed and built by dopppler * //* 注释规范说明：模块样式定义的开始和结束 *//* page container start */.page-content {    ...}.page-content-title {    ...}.../* page container end */

2. 構造的構成

標準 CSS コードは、まず明確な構造と個別のモジュールを持つ必要があります。通常の開発で、ページ全体からスタイルを計画せずに、レンダリングを取得したらすぐに切り取り、切り取った後に記述すると、一部のコード ブロックが開発プロセス中に再利用するのが難しくなります。この方法では、元のコードの一部のみをコピーして、それを新しいスタイル定義に結合できます。サイトの機能が増えると、CSS コードに重複コードが増え、最終的には手に負えなくなります。では、CSS コードを整理するにはどうすればよいでしょうか?

まず、CSS コード ファイルを整理します。すべての CSS は、一般カテゴリとビジネス カテゴリという 2 つの主要なカテゴリに分類できます。コードを編成するには、一般クラスのコードとビジネス クラスのコードを別のディレクトリに配置する必要があります。

css |-[业务类文件夹] |-[通用类-样式重置].css |-[通用类-公用组件].css |-[通用类-ie兼容].css

[共通クラス - スタイル リセット].css

は、要素を表示する目的で、要素のデフォルトのスタイルをリセットするために使用されます。各ブラウザの見た目が統一されています。 CSS Reset は一言ですべてをリセットするだけなので、あまりにも失礼です。もちろん、多くの国内チームが独自の Reset.css のセットをまとめているので、それを検索することをお勧めします。あなた自身。

• Normalize.css - HTML 要素と属性のスタイル正規化のコレクション。

• [General Class-Public Component].css は、パブリック モジュールのスタイルといくつかの基本スタイルを配置するために使用されます。共通モジュールには、ページ ダイアログ ボックスやプロンプト ボックスなどの共通コンポーネントのスタイルと、ページ ヘッダー、下部、サイドバーなどの共通 UI モジュールのスタイルが含まれます。基本スタイルには、グローバル ページ レイアウト設定、フォント設定、背景色と前景色などが含まれます。また、これらのパブリック クラスは頻繁に使用されるため、コードの再利用を向上させるために個別に定義して使用する必要があります。

再利用性と拡張性の高い CSS コードの作成を容易にするために、動的スタイル言語と Less や Sass などの前処理ツールを使用することを強くお勧めします。

• [汎用 class-ie 互換].css は、古いバージョンの IE ブラウザと互換性のあるスタイルを配置するために使用されます。古いバージョンの IE と互換性のある CSS コードを通常のコードと一緒に配置する場合、このアプローチには 2 つの欠点があります。1 つ目は、非 IE ブラウザーのスタイル ファイルを読み込む負担が増えることです。2 つ目は、スタイル ファイルを使用しないことが決定した場合です。将来的に古いバージョンの IE をサポートする場合、ブラウザでは複数のファイルを変更する必要があり、メンテナンスが複雑になります。

• 残りの CSS スタイル ファイル は、特定のビジネス モジュールに使用されます。異なるモジュールのスタイル ファイルは異なるフォルダーに配置されます。分割するモジュールの粒度には基準がありません。原則として、各モジュールに対応するスタイル ファイルの行数が 200 行を超えないようにしてください。特定のモジュールのスタイル ファイルが大きすぎると、継続的に分割されます。より小さなモジュールに分割することができます。

CSS スタイル ファイルが多すぎることを心配する必要はありません。ファイル管理に集中してください。最終的には、自動ビルド ツールを使用して複数のスタイル ファイルをマージできます。圧縮処理。

3. 要素単位

em、px、または %?それともレム？ページ要素のサイズ (長さ、幅、内側と外側の余白など) とページ フォントのサイズは、ページ全体のレイアウトと密接に関係しており、ページをレイアウトするにはさまざまな方法があります。したがって、ページ要素のサイズとフォント サイズが適切に設定されていない場合、ページ レイアウトの複雑さが増し、ページ レイアウトのメンテナンスが困難になり、ページのスケーラビリティと使用プラットフォームが制限されます。では、最適な保守性を実現するには、要素のサイズとフォント サイズをどのように設定すればよいでしょうか?次の 3 つの提案を参照してください:

• 相対的なサイズを設定してみてください。 ページはアダプティブサイズにするべきですか、それとも固定サイズにするべきですか?これはページのデザインによって異なります。ここでの問題は、ローカル要素のサイズには相対的なサイズの使用、つまりローカル適応が必要であることです。このようにして、モジュール全体のサイズが変更された場合、モジュール内のサブモジュールのサイズを変更する必要はありません。

• 要素のサイズが予測可能な場合にのみ絶対サイズを使用します。 記述されたコードは、まず設計要件に準拠する必要があります。場合によっては、Web ページ全体の固定幅、サイドバーの固定幅、ヘッダーとフッターの固定高さなど、絶対サイズを使用する必要があります。等

• rem を使用してフォント サイズを設定します。 remは地味なユニットですが、ここ1、2年で人気が出てきました。国内の主要企業はすべてこの機能を導入しており、タオバオ、テンセント、シャオミ、その他のモバイル サイトなどの一般的な Web サイトのいたるところで見ることができます。詳しい使い方は以下の3つの記事を参照していただくか、ご自身で検索してください。

Web アプリ革命の残り - Tencent ISXUX
モバイル淘宝網の柔軟な設計と実装 - フロントエンド シチュー
モバイル Web 適応の概要 - Lok'tar Ogar

4. スタイルのリセット

上記のように、@alsiso クラスメートが書いた CSS リセットの特別記事を読むことをお勧めします。

CSS リセットについてのこと (1) - SegmentFault
CSS リセットについてのこと (2) - SegmentFault
CSS リセットについてのこと (3) - SegmentFault
CSS リセットについてのこと ( 4) - SegmentFault

5. スタイルの並べ替え

なぜスタイルを並べ替える必要があるのですか? CSS プロパティが特定のルールに従って並べ替えられていれば、開発プロセス中にプロパティの繰り返し定義が防止され、コードレビュー担当者も CSS スタイル定義を明確に確認できるため、さらに重要なのは、後続のスタイルのメンテナンスプロセス中に特定の仕様を迅速に定義できるためです。属性。 CSS スタイル プロパティの並べ替えには多少の労力がかかりますが、コードの可読性と保守性の観点からは、それだけの価値があります。さらに、いくつかのツールの助けを借りてそれを行うことができます。 : )

より合理的な並べ替え方法は、タイプ グループによる並べ替えです。有名な Web フロントエンドの専門家である Andy Ford は、CSS プロパティをタイプごとにグループ化して並べ替える方法を推奨しました:

• Display & Flow (表示とフロー)

• 配置

• 寸法

• ボーダー関連の属性 (マージン、パディング、ボーダー、アウトライン)

• タイポグラフィ スタイル (タイポグラフィ スタイル)

• 背景 (背景)

• その他のスタイル (不透明度、カーソル、生成されたコンテンツ)

这种按照样式类型分组排列的方式不仅把功能相似的属性归类到一起，并且按照样式功能的重要性从上到下进行了排序。可以把影响元素页面布局的样式（如 float、margin、padding、height、width等）排到前面，而把不影响布局的样式（如background、color、font等）放到后面。这种主次分明的排列方式，极大地提高了代码的可维护性。

整理推荐的CSS属性书写顺序 - CSDN
推荐大家使用的CSS书写顺序、规范 - 设计达人

当然，如果在编写代码的时候直接按照这种方式写肯定有难度，而且不方便频繁地修改。最佳方式是编写代码的时候按照自己最有效率的方式来写，编写完成并提交的时候使用工具对其进行排序。推荐工具：CSScomb，一款免费高效并提供在线和主流代码编辑器插件的CSS排序工具。

CSScomb - Makes your code beautiful.

6.权重制衡

什么是权重？如果前端工程师没有深刻理解这个概念，将会很难写出高质量的CSS代码。在讨论权重之前，我们先来讨论一下一些基础知识。

CSS样式有 6 种基础选择器：

• ID 选择器（如 #page_content{}）

• 类选择器(如 .page-content-title{})

• 属性选择器（如 a[href="http://www.google.com"]{}）

• 伪类和伪对象选择器（如 :hover{}、::after{}）

• 标签类型（如 div{}）

• 通配符选择器（如 body *{}）

所有在CSS样式中定义的选择符都是由这 6 种基础选择器组合而成的，组合的方式分为三种：

• 后代选择符（如 .page .title{}）

• 子选择符（如 .page>.title{}）

• 相邻选择符（如 .page+.title{}）

CSS权重指的是这些选择器的优先级，优先级高的CSS样式会覆盖优先级的样式。优先级越高说明权重越高。根据 W3C 制定的CSS规范，CSS权重是通过如下规则计算的：

• 计算选择符中的ID选择器的数量（=a）

• 计算选择符中的类选择器、属性选择器以及伪类选择器的数量（=b）

• 计算标签类型选择器的伪对象选择器的数量（=c）

• 忽略全局选择器

按照规则，基础选择器具有这样的优先级：
ID > 类 | 伪类 | 属性选择器 > 标签类型 | 伪对象 > 通配符

分别计算 a、b、c 的值后，按顺序连接 a、b、c 三个数字组成一个新数值，此数值即为所计算的选择符的权重。另外，如果两个选择符的权重相同，则依照“就近原则”，最后定义的被采用。

你应该知道的一些事情——CSS权重 - W3CPlus

明白权重的计算规则后，我们可以制定一些相关原则来提高样式代码的重用性和可维护性。

• CSS样式中尽量不要使用ID选择器。一个页面中不允许有两个相同的ID，如果使用了ID选择器就意味着此此样式只能作用于一个元素，不能复用于其他元素。

• 减少子选择器的层级。降低选择符整体的权重，减少对HTML结构的依赖。

• 使用组合的CSS类选择器。面向对象编程一条原则：“多组合，少继承”。

7.兼容分离

上文已提及。

那些为了兼容旧版浏览器而添加的额外代码，被成为 hack 代码。大部分前端程序员都不愿意写 hack 代码，因为 hack 代码不易理解且维护困难。

以下是兼容 IE 浏览器的一些实践：

• 熟悉 IE 浏览器中常见的样式兼容问题。IE 浏览器下的兼容问题一般分为两类，一类时浏览器本身的Bug，另一类是标准不兼容，或者不支持标准（这类问题居多）。

Browserhacks - ie

• 分离样式兼容代码。为了当未来某个时期不在支持某个旧版本的浏览器时，方便移除这些兼容代码。

在 IE 浏览器中可以使用条件注释，让不同浏览器加载不同的样式文件以达到兼容代码和正常代码分离的目的。

<link rel="stylesheet" media="screen" href="css/style.css" /><!--[if IE 8]><link rel="stylesheet" media="screen" href="css/ie8.css"><![endif]--><!--[if IE 7]><link rel="stylesheet" media="screen" href="css/ie7.css"><![endif]-->

另外，为了提高兼容样式的优先级，可以在根元素（或者元素）上针对不同的浏览器添加不同的样式类。

<!--[if IE 7]>       <html class="ie7"><![endif]--><!--[if IE 8]>       <html class="ie8"><![endif]--><!--[if gt IE 8]><!--><html>        <--<![endif]-->

参考

• 《Web前端开发最佳实践》党建

以上，欢迎拍砖斧正。