CSS程式碼重構詳解

本文主要介紹CSS程式碼重構，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

1. 重構與架構

重構是指在不改變程式碼行為的前提下，重寫程式碼，使其更加簡潔、易於重複使用。

架構是指軟體專案的各個不同部件之間的組合方式。

優秀的架構：

1. 可預測：可以對軟體的工作方式和結構做出準確的假設

2. #可重複使用：在多處使用相同程式碼，無需重寫

3. #可擴展：比較容易的增加新內容

4. #可維護：修改一處程式碼不用大規模的改動其他程式碼

#2. CSS選擇器的優先權

用（a, b, c, d）表示，優先權a>>b>>c>>d，其中：

1. 有行內style 屬性時，a=1 ,否則a=0

2. b 為ID 選擇器的數量

3. c 為類別選擇器、屬性選擇器、偽類別的數量

4. d 為型別選擇器、偽元素的數量

#（ps：偽類別與偽元素的差異）

!important 優先權最高，可覆蓋行內樣式。不可以加入到行內樣式屬性中。

3. 如何寫優質的CSS

使用註解

註解記錄的內容包括：

1. 檔案內容

2. 選擇器的依賴、用法

3. #使用特定宣告的原因（hack等）

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 ，建議在一個專案中堅持使用方法，例如：

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

(ps: ::after 表示法是在CSS3 中引入的， :: 符號是用來區分偽類和偽元素的。為樣式分類

依用途定義樣式，有助於創建更優秀的架構，因為將樣式組織為不同的類別，促使程式碼可預測性更強，更易於重複使用。

通用樣式

因為不同瀏覽器的預設樣式有些許差別，所以需要通用樣式為各種元素的屬性設定預設值樣式，使其在不同瀏覽器

表現一致。

推薦 Nicolas Gallagher 和 Jonathan Neal 開發的normalize.css，可依照自己的專案適當刪除。

基礎樣式

用類型選擇器和結合符（例如，ul ul表示ul下面的ul）或偽類為 HTML 元素添加更細緻的樣式。例如： color 、 font-family 、 font-size 、 letter-spacing 、 line-height 、 margin 、 padding 等。

HTML 元素可分為：區塊元素、標題和文字元素、錨點元素、文字語意元素、清單、表格、表單等等，不同的元素在基礎樣式的設定上稍有不同，可參考元素基礎樣式表。

元件樣式

元件重要的是可重複使用性，如：按鈕、下拉式選單、模態方塊、選項卡等。

定義需要實現的行為，也就是該元件達到的效果，組織HTML 結構

1. 為元件裡的元素增加樣式，確保複用性

2. 根據需要，改寫元素容器的樣式。如確認按鈕，警告按鈕，成功按鈕等，定義元件的容器元素不同的類別名稱

3. #在元件的父元素中設定
功能樣式

合理使用!important 定義類別屬性，在JavaScript 操作樣式時使用。如添加下面這個類別來實現元素隱藏：

.hidden {
  display: none !important;
}

#瀏覽器特定樣式

##儘管未來瀏覽器行為趨於統一，但目前一些老的瀏覽器仍然有怪癖行為。我們必須使用一些 hack 的樣式來解決這些怪癖行為，推薦將這些樣式單獨放在一個樣式表中，並用 條件註釋 新增引用。

<!--[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中文網其他相關文章！