検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSSコードリファクタリングの詳しい説明

CSSコードリファクタリングの詳しい説明

小云云
小云云オリジナル
2018-01-31 11:14:521598ブラウズ

この記事は主に CSS コードのリファクタリングを紹介します。編集者はそれを参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. リファクタリングとアーキテクチャ

リファクタリングとは、コードの動作を変更せずに、より簡潔で再利用しやすいようにコードを書き直すことを意味します。

アーキテクチャとは、ソフトウェア プロジェクトのさまざまなコンポーネントを組み合わせる方法を指します。

優れたアーキテクチャ:

  1. 予測可能: ソフトウェアがどのように動作するか、どのように構成されているかについて正確な仮定を立てることができます

  2. 再利用可能: 書き直さずに同じコードを複数の場所で使用できます

  3. 拡張可能: それ新しいコンテンツを追加する方が簡単です

  4. 保守性: 他のコードに大規模な変更を加えずに 1 つのコードを変更します

2. CSS セレクターの優先順位

(a, b, c , d) は次のとおりです優先度 a>>b>>c>>d、ここで:

  1. にインライン スタイル属性がある場合、a=1、それ以外の場合は a=0

  2. b は ID セレクターです

    の数

  3. c はクラスセレクター、属性セレクター、疑似クラスの数です

  4. d は型セレクターと疑似要素の数です

(追記: 疑似クラスと疑似要素の違い)

! important は最も高い優先度を持ち、インライン スタイルをオーバーライドできます。インラインスタイル属性には追加できません。

3. 高品質なCSSの書き方

コメントを使用する

コメントに記録される内容は以下のとおりです:

  1. ファイルの内容

  2. 特定の宣言を使用する理由(ハックなど)

  3. もう使用すべきではない非推奨のスタイル

  4. /*
* 导航链接样式
*
* @see templates/nav.html
*/
.nav-link {
  ...
}

.nav-link:hover {
  border-bottom: 4px solid #333;
  /* 防止增加了4px下边框导致元素移动 */
  padding-bottom: 0;
}

/* @deprecated */
.nav-link {
  ...
}

セレクターはシンプルにしてください

/* 不推荐 */
p > nav > ul > li > a {}
/* 不推荐 */
a.nav-link {}
/* 推荐 */
.nav-link {}

しかし、示されているように、すべてのシナリオがこの推奨事項に従う必要があるわけではありません以下は入力用です。 ボックスのテキストと境界線にスタイルを追加します。 

.error {
  color: #f00;
}
input.error {
  border-color: #f00;
}

CSSとJavaScriptを分離

JavaScriptで要素を選択するために使用されるクラスとIDは、要素のスタイルを設定するために使用されるべきではなくなりました。 JavaScript で要素のスタイルを変更する場合は、クラスを追加および削除する必要があります。 JavaScriptのみに使用されるクラスとIDの前にjs-を追加するか、IDはJavaScriptで要素を選択するためにのみ使用され、クラスはスタイルに使用されることをお勧めします。

ID とクラス名は意味のあるものにする必要があります

より良いボックスを作成する

ボックス サイズの計算方法には、content-box と border-box が含まれます。たとえば、次のような 1 つのメソッドに固執することをお勧めします。 

*,
*::after,
*::before {
}

(追記: ::after 表記は CSS3 で導入され、 :: 記号は疑似クラスと疑似要素を区別するために使用されます。CSS3 をサポートするブラウザは、CSS2 で導入された表記 :after もサポートします。IE8 のみ) :after をサポートします

スタイルを分類する

目的別にスタイルを定義すると、コードをより予測可能で効率的に再利用できるため、より良いアーキテクチャの作成に役立ちます。

ユニバーサル スタイル

異なるブラウザのデフォルト スタイルは若干異なるため、異なるブラウザ間で一貫して動作するように、ユニバーサル スタイルを使用してさまざまな要素の属性のデフォルト値スタイルを設定する必要があります

。

Nicolas Gallagher と Jonathan Neal によって開発された Normalize.css を推奨します。これは、独自のプロジェクトに応じて適切に削除できます。

基本スタイル

タイプセレクターとコンバイナー (たとえば、ul ul は ul の下の ul を意味します) または疑似クラスを使用して、HTML 要素にさらに詳細なスタイルを追加します。例: 色、フォントファミリー、フォントサイズ、文字間隔、行の高さ、マージン、パディングなど。

HTML 要素は、ブロック要素、タイトルとテキスト要素、アンカー要素、テキスト セマンティック要素、リスト、テーブル、フォームなどに分類できます。要素ごとに基本的なスタイル設定が若干異なります。「要素の基本スタイル シート」を参照してください。

コンポーネント スタイル

コンポーネントで重要なのは、ボタン、ドロップダウン メニュー、モーダル ボックス、タブなどの再利用性です。

実装する必要がある動作、つまりコンポーネントによって達成される効果を定義し、HTML構造を整理します

  1. 再利用性を確保するためにコンポーネント内の要素にスタイルを追加します

  2. スタイルを書き換えます必要に応じて要素コンテナー。確認ボタン、警告ボタン、成功ボタンなど、コンポーネントのコンテナ要素の異なるクラス名を定義します

  3. サイズはコンポーネントの親要素で設定されます

  4. 機能的なスタイル

クラス属性を定義するための ! important の合理的な使用。JavaScript でスタイルを操作するときに使用されます。たとえば、要素の非表示を実装するには、次のクラスを追加します。 

.hidden {
  display: none !important;
}

ブラウザ固有のスタイル

ブラウザの動作は将来的には統一される傾向にありますが、一部の古いブラウザでは依然として奇妙な動作が発生します。これらの癖を回避するには、いくつかのスタイル ハックを使用する必要がありました。これらのスタイルを別のスタイルシートに配置し、条件付きコメントを使用して参照を追加することをお勧めします。 

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

コードの保守

コード仕様

代码规范是将良好的代码编写方法记录下来形成指南，以鼓励团队所有成员以相同的方法编写代码。规范应定期审阅和更新。CSS 代码规范通常指定了注释、格式、命名、选择器用法等方便的规范。

模式库

模式库是网站使用的一组用户界面模式，将所有组件汇集在一起。好处就是参与项目的成员都能了解到搭建网站的各个模块，熟悉背后的原理，并且有助于保证用户界面的一致性。

推荐几个优秀的模式库：

  1. Mailchimp's Pattern Library

  2. [Carbon Design System](http://carbondesignsystem.com/style/color/swatches)

  3. Code For America

代码的组织和重构策略

按照样式从最不精确到最精确组织 CSS

之前我们为样式分类，现在我们按照产生作用的顺序再来组织一下 CSS 代码：

  1. 通用样式：设定基准，消除不同浏览器之间的不一致性

  2. 基础样式：为网站所有元素提供基本的样式，如颜色、间距、行高、字体等，不需要重写

  3. 组件及容器样式：以上一步的基础样式为基础，用类定义样式

  4. 结构化样式：该样式常用来创建布局，定义尺寸等

  5. 功能样式：最精确的样式，满足单一目的而实现的样式，如警告框样式

  6. 浏览器特定样式

PS：媒体查询要靠近相关声明块，这样做可以为样式是如何起作用的提供更多的背景信息。

重构前审查 CSS

如下审查非常有助于重构：

  1. 所用到的属性列表

  2. 颜色数量

  3. 使用的最高和最低选择器优先级

  4. 选择器长度

CSS Dig 是 Google Chrome 的一款插件，可以帮助获取以上信息。

重构策略

推荐多次小范围重构，避免大范围重构引入错误。

（1）删除僵尸代码：

没有使用的声明块、重复的声明块和声明语句。

（2）分离 CSS 和 JavaScript

（3）分离基础样式

如果一个类型选择器使用过多次，新建一条规则集，找到最常用的属性，添加到新的规则集。从其他规则集删除重复的属性，因为它们可以继承新定义的基础样式。

/* 重构前 */
body > p > h1 {
  color: #000;
  font-size: 32px;
  margin-bottom: 12px;
}

.section-condensed h1 {
  color: #000;
  font-size: 16px;
}

.order-form h1 {
  color: #333;
  text-decoration: underline;
}

/* 重构后 */
h1 {
  color: #000;
  font-family: Helvetica, san-serif;
  font-size: 32px;
  line-height: 1.2;
}

body > p > h1 {
  margin-bottom: 12px;
}

.section-condensed h1 {
  font-size: 16px;
}

.order-form h1 {
  color: #333;
  text-decoration: underline;
}

（4）删除冗余的 ID

/* 不推荐 */
#main-header ul#main-menu {}
/* 推荐 */
#main-menu {}

（5）定义可复用的组件，删除重复的 CSS

（6）删除行内 CSS

相关推荐：

谈一谈PHP的代码重构_PHP教程

推荐五款优秀的PHP代码重构工具

推荐五款优秀的PHP代码重构工具_PHP


以上がCSSコードリファクタリングの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript carbon 架构 css chrome css3 html for 继承 JS 选择器 样式表 margin padding border 伪类 伪元素 ul http 重构 代码规范
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで六角形の絵を作る方法次の記事：CSSで六角形の絵を作る方法

関連記事

続きを見る