Explication détaillée de la refactorisation du code CSS

Cet article présente principalement la refactorisation du code CSS. L'éditeur pense que c'est plutôt bien, je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Refactoring et architecture

Le refactoring fait référence à la réécriture du code pour le rendre plus concis et plus facile à réutiliser sans changer le comportement du code.

L'architecture fait référence à la manière dont les différents composants d'un projet logiciel sont combinés.

Excellente architecture :

1. Prévisible : peut faire des hypothèses précises sur la façon dont le logiciel fonctionnera et sera structuré

2. Réutilisable : utilisez le même code à plusieurs endroits sans réécrire

3. Extensible : il est plus facile d'ajouter du nouveau contenu

4. Maintenable : Modifier un code sans apporter de modifications à grande échelle aux autres codes

2. Priorité des sélecteurs CSS

Utiliser (a, b, c, d) représente la priorité a>>b>>c>>d, où :

1. Lorsqu'il y a un attribut de style en ligne, a=1 , sinon a=0

2. b est le nombre de sélecteurs d'ID

3. c est le nombre de sélecteurs de classe, de sélecteurs d'attributs et de pseudo-classes

4. d est le sélecteur de type et le nombre de pseudo-éléments

(ps : la différence entre pseudo-classes et pseudo-éléments)

!important a la priorité la plus élevée et peut remplacer les styles en ligne. Ne peut pas être ajouté aux attributs de style en ligne.

3. Comment écrire du CSS de haute qualité

Utiliser les commentaires

Le contenu enregistré par les commentaires comprend :

1. Contenu du fichier

2. Dépendances et utilisation du sélecteur

3. Raisons de l'utilisation de déclarations spécifiques (hacks, etc.)

4. Styles obsolètes qui ne devraient plus être utilisés

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

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

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

Gardez les sélecteurs simples

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

Cependant, tous les scénarios ne doivent pas suivre cette recommandation. Ajoutez des styles au texte et aux bordures de la zone de saisie comme suit.

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

Séparer CSS et JavaScript

La classe et l'ID utilisés pour sélectionner des éléments en JavaScript ne doivent pas être Puis utilisé pour ajouter des styles aux éléments. Lorsque vous modifiez les styles d'éléments avec JavaScript, vous devez le faire en ajoutant et en supprimant des classes.

Il est recommandé d'ajouter js- avant la classe et l'ID qui ne sont utilisés que pour JavaScript, ou l'ID n'est utilisé que pour les éléments de sélection JavaScript et la classe est utilisée pour les styles.

Les noms d'ID et de classe doivent être significatifs

Créer de meilleures boîtes

La méthode de calcul de la taille de la boîte est la boîte de contenu et border-box, il est recommandé de s'en tenir à une seule méthode dans un projet, par exemple :

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

(ps: ::after la notation est dans Introduit en CSS3, le symbole :: est utilisé pour distinguer les pseudo-classes et les pseudo-éléments. Les navigateurs prenant en charge CSS3 prennent également en charge la notation introduite dans CSS2 : after, et IE8 ne prend en charge que : after )

Catégoriser les styles.

Définir les styles par objectif permet de créer une meilleure architecture, car l'organisation des styles en différentes catégories rend le code plus prévisible et plus facile à réutiliser.

Style universel

Étant donné que les styles par défaut des différents navigateurs sont légèrement différents, un style universel est nécessaire pour définir les styles de valeur par défaut pour les attributs de divers éléments afin qu'ils peut être utilisé dans différents navigateurs. Les navigateurs

se comportent de manière cohérente.

Recommandez normalize.css développé par Nicolas Gallagher et Jonathan Neal, qui peut être supprimé de manière appropriée en fonction de votre propre projet.

Styles de base

Utilisez des sélecteurs et des combinateurs de types (par exemple, ul ul signifie ul en dessous de ul) ou des pseudo-classes pour ajouter des styles plus détaillés aux éléments HTML. Par exemple : couleur, famille de polices, taille de police, espacement des lettres, hauteur de ligne, marge, remplissage, etc.

Les éléments HTML peuvent être divisés en : éléments de bloc, éléments de titre et de texte, éléments d'ancrage, éléments sémantiques de texte, listes, tableaux, formulaires, etc. Différents éléments ont des paramètres de style de base légèrement différents. Veuillez vous référer à l'élément. feuille de style de base.

Style des composants

L'important à propos des composants est leur réutilisabilité, comme les boutons, les menus déroulants, les boîtes modales, les onglets, etc.

1. Définir le comportement qui doit être implémenté, c'est-à-dire l'effet obtenu par le composant, organiser la structure HTML

2. Ajouter des styles à les éléments du composant pour garantir la complexité. Convivialité

3. Réécrivez le style du conteneur d'éléments si nécessaire. Tels que le bouton de confirmation, le bouton d'avertissement, le bouton de réussite, etc., définissez les différents noms de classe des éléments conteneurs du composant

4. et définissez la taille dans l'élément parent du composant

Style fonctionnel

Utilisez !important de manière appropriée pour définir les attributs de classe et les utiliser lors de l'utilisation de styles en JavaScript. Par exemple, ajoutez la classe suivante pour implémenter le masquage d'éléments :

.hidden {
  display: none !important;
}

Styles spécifiques au navigateur

Bien que Le comportement futur du navigateur de navigation devient plus uniforme, mais certains navigateurs plus anciens ont encore un comportement original. Nous avons dû utiliser des astuces de style pour contourner ces bizarreries, et il est recommandé de placer ces styles dans une feuille de style distincte et d'ajouter des références à l'aide de commentaires conditionnels.

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

Maintenir le code

Spécification du code

代码规范是将良好的代码编写方法记录下来形成指南，以鼓励团队所有成员以相同的方法编写代码。规范应定期审阅和更新。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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!