Detaillierte Erläuterung des CSS-Code-Refactorings

Dieser Artikel stellt hauptsächlich das Refactoring von CSS-Code vor. Der Herausgeber ist der Meinung, dass er jetzt mit Ihnen geteilt wird und als Referenz dient. Folgen wir dem Herausgeber und werfen wir einen Blick darauf. Ich hoffe, es kann allen helfen.

1. Refactoring und Architektur

Refactoring bezieht sich auf das Umschreiben des Codes, um ihn prägnanter und einfacher wiederzuverwenden, ohne das Verhalten des Codes zu ändern.

Architektur bezieht sich auf die Art und Weise, wie die verschiedenen Komponenten eines Softwareprojekts kombiniert werden.

Ausgezeichnete Architektur:

1. Vorhersehbar: Kann genaue Annahmen darüber treffen, wie die Software funktionieren und strukturiert sein wird

2. Wiederverwendbar: Verwenden Sie denselben Code an mehreren Stellen, ohne ihn neu zu schreiben

3. Erweiterbar: Es ist einfacher, neue Inhalte hinzuzufügen

4. Wartbar: Ändern Sie einen Code, ohne große Änderungen an anderen Codes vorzunehmen

2. Priorität der CSS-Selektoren

Verwenden Sie (a, b, c, d) stellt die Priorität a>>b>>c>>d dar, wobei:

1. Wenn ein Inline-Stilattribut vorhanden ist, a=1, andernfalls a=0

2. b ist die Anzahl der ID-Selektoren

3. c ist die Anzahl der Klassenselektoren, Attributselektoren und Pseudoklassen

4. d ist der Typselektor und die Anzahl der Pseudoelemente

(ps: der Unterschied zwischen Pseudoklassen und Pseudoelementen)

!important hat die höchste Priorität und kann Inline-Stile überschreiben. Kann nicht zu Inline-Stilattributen hinzugefügt werden.

3. So schreiben Sie hochwertiges CSS

Verwenden Sie Kommentare

Zu den durch Kommentare erfassten Inhalten gehören:

1. Dateiinhalt

2. Selektorabhängigkeiten und -verwendung

3. Gründe für die Verwendung spezifischer Deklarationen (Hacks usw.)

4. Veraltete Stile, die nicht mehr verwendet werden sollten

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

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

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

Halten Sie die Selektoren einfach

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

Allerdings sollte nicht jedes Szenario dieser Empfehlung folgen. Fügen Sie dem Text und den Rändern des Eingabefelds wie folgt Stile hinzu.

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

CSS und JavaScript trennen

Die Klasse und ID, die zum Auswählen von Elementen in JavaScript verwendet werden, sollten nicht vorhanden sein Wird dann zum Hinzufügen von Stilen zu Elementen verwendet. Wenn Sie Elementstile mit JavaScript ändern, sollten Sie dies durch Hinzufügen und Löschen von Klassen tun.

Es wird empfohlen, js- vor der Klasse und ID hinzuzufügen, die nur für JavaScript verwendet werden, oder die ID wird nur für JavaScript-Auswahlelemente verwendet und die Klasse wird für Stile verwendet.

ID- und Klassennamen sollten aussagekräftig sein

Erstellen Sie bessere Boxen

Die Methode zur Berechnung der Boxgröße ist Inhaltsbox und Border-Box, es wird empfohlen, sich in einem Projekt an eine Methode zu halten, zum Beispiel:

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

(ps: ::after notation is introducing In CSS3 wird das Symbol :: verwendet, um Pseudoklassen und Pseudoelemente zu unterscheiden. Browser, die CSS3 unterstützen, unterstützen auch die in CSS2 eingeführte Notation: after, und IE8 unterstützt nur: after )

Kategorisierungsstile

Das Definieren von Stilen nach Zweck trägt zur Schaffung einer besseren Architektur bei, da die Organisation von Stilen in verschiedene Kategorien den Code vorhersehbarer und einfacher wiederverwendbar macht.

Universeller Stil

Da sich die Standardstile verschiedener Browser geringfügig unterscheiden, ist ein universeller Stil erforderlich, um Standardwertstile für die Attribute verschiedener Elemente so festzulegen, dass sie kann in verschiedenen Browsern verwendet werden

verhalten sich konsistent.

Empfehlen Sie normalize.css, entwickelt von Nicolas Gallagher und Jonathan Neal, das entsprechend Ihrem eigenen Projekt entsprechend gelöscht werden kann.

Grundlegende Stile

Verwenden Sie Typselektoren und -kombinatoren (ul ul bedeutet beispielsweise ul unter ul) oder Pseudoklassen, um detailliertere Stile zu HTML-Elementen hinzuzufügen. Zum Beispiel: Farbe, Schriftfamilie, Schriftgröße, Buchstabenabstand, Zeilenhöhe, Rand, Abstand usw.

HTML-Elemente können unterteilt werden in: Blockelemente, Titel- und Textelemente, Ankerelemente, textsemantische Elemente, Listen, Tabellen, Formulare usw. Verschiedene Elemente haben leicht unterschiedliche grundlegende Stileinstellungen. Bitte beziehen Sie sich auf das Element grundlegendes Stylesheet.

Komponentenstil

Das Wichtigste an Komponenten ist ihre Wiederverwendbarkeit, wie z. B. Schaltflächen, Dropdown-Menüs, Modalboxen, Registerkarten usw.

1. Definieren Sie das Verhalten, das implementiert werden muss, dh den von der Komponente erzielten Effekt, organisieren Sie die HTML-Struktur

2. Fügen Sie Stile hinzu die Elemente in der Komponente, um die Komplexität sicherzustellen. Benutzerfreundlichkeit

3. Schreiben Sie den Stil des Elementcontainers nach Bedarf neu. Definieren Sie beispielsweise Bestätigungsschaltflächen, Warnschaltflächen, Erfolgsschaltflächen usw. unterschiedliche Klassennamen der Containerelemente der Komponente

4. und legen Sie die Größe im übergeordneten Element der Komponente fest

Funktionsstil

Verwenden Sie !important ordnungsgemäß, um Klassenattribute zu definieren und sie beim Betrieb von Stilen in JavaScript zu verwenden. Fügen Sie beispielsweise die folgende Klasse hinzu, um das Ausblenden von Elementen zu implementieren:

.hidden {
  display: none !important;
}

Browserspezifische Stile

Obwohl Künftiges Surfen Das Browserverhalten wird einheitlicher, einige ältere Browser weisen jedoch immer noch ein eigenartiges Verhalten auf. Wir mussten einige Stil-Hacks verwenden, um diese Macken zu umgehen, und es wird empfohlen, diese Stile in ein separates Stylesheet einzufügen und Referenzen mithilfe von bedingten Kommentaren hinzuzufügen.

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

Code pflegen

Codespezifikation

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des CSS-Code-Refactorings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!