本文主要介紹CSS程式碼重構，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
1. 重構與架構
重構是指在不改變程式碼行為的前提下，重寫程式碼，使其更加簡潔、易於重複使用。
架構是指軟體專案的各個不同部件之間的組合方式。
優秀的架構：
可預測：可以對軟體的工作方式和結構做出準確的假設
#可重複使用：在多處使用相同程式碼，無需重寫
#可擴展：比較容易的增加新內容
#可維護：修改一處程式碼不用大規模的改動其他程式碼
#2. CSS選擇器的優先權
用（a, b, c, d）表示，優先權a>>b>>c>>d，其中：
有行內style 屬性時，a=1 ,否則a=0
b 為ID 選擇器的數量
c 為類別選擇器、屬性選擇器、偽類別的數量
d 為型別選擇器、偽元素的數量
#（ps：偽類別與偽元素的差異）
!important 優先權最高，可覆蓋行內樣式。不可以加入到行內樣式屬性中。
3. 如何寫優質的CSS
使用註解
註解記錄的內容包括：
檔案內容
選擇器的依賴、用法
#使用特定宣告的原因（hack等）
#不應繼續使用的廢棄樣式
/*
* 导航链接样式
*
* @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 結構合理使用!important 定義類別屬性，在JavaScript 操作樣式時使用。如添加下面這個類別來實現元素隱藏：
.hidden {
display: none !important;
}#瀏覽器特定樣式
##儘管未來瀏覽器行為趨於統一，但目前一些老的瀏覽器仍然有怪癖行為。我們必須使用一些 hack 的樣式來解決這些怪癖行為，推薦將這些樣式單獨放在一個樣式表中，並用 條件註釋 新增引用。
<!--[if IE 8]> <link rel="stylesheet" href="ie8.css" /> <![endif]-->
#程式碼規格
代码规范是将良好的代码编写方法记录下来形成指南，以鼓励团队所有成员以相同的方法编写代码。规范应定期审阅和更新。CSS 代码规范通常指定了注释、格式、命名、选择器用法等方便的规范。
模式库
模式库是网站使用的一组用户界面模式，将所有组件汇集在一起。好处就是参与项目的成员都能了解到搭建网站的各个模块，熟悉背后的原理，并且有助于保证用户界面的一致性。
推荐几个优秀的模式库：
Mailchimp's Pattern Library
[Carbon Design System](http://carbondesignsystem.com/style/color/swatches)
Code For America
代码的组织和重构策略
按照样式从最不精确到最精确组织 CSS
之前我们为样式分类，现在我们按照产生作用的顺序再来组织一下 CSS 代码：
通用样式：设定基准，消除不同浏览器之间的不一致性
基础样式：为网站所有元素提供基本的样式，如颜色、间距、行高、字体等，不需要重写
组件及容器样式：以上一步的基础样式为基础，用类定义样式
结构化样式：该样式常用来创建布局，定义尺寸等
功能样式：最精确的样式，满足单一目的而实现的样式，如警告框样式
浏览器特定样式
PS：媒体查询要靠近相关声明块，这样做可以为样式是如何起作用的提供更多的背景信息。
重构前审查 CSS
如下审查非常有助于重构：
所用到的属性列表
颜色数量
使用的最高和最低选择器优先级
选择器长度
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
相关推荐：
以上是CSS程式碼重構詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
