《CSS重構：樣式表性能調優》讀書筆記

imingyu 發布于2019-08-29 15:05 / 3279人閱讀

摘要：特指度度量的是選擇器識別元素的精確性。為中的各個變量賦予相應的數值，就能得到特指度。為類選擇器屬性選擇器和偽類的數量。該文件包含選項卡組的樣式。易于混淆的屬性，應用注釋予以說明。屬性按照字母順序排列。屬性值為時，省略單位。

1、什么是優秀的架構

（1）優秀的架構是可預測的
（2）優秀的架構是可擴展的
（3）優秀的架構可提升代碼復用性
（4）優秀的架構可擴展
（5）優秀的架構可維護
什么時候可以重構：僅當重構能夠改善架構或使代碼符合編碼規范時，才應進行重構。

2、級聯

級聯是瀏覽器決定為元素應用哪種樣式的一種方法。
特指度度量的是 CSS 選擇器識別元素的精確性。計算特指度時需要分析這些選擇器（除了通用選擇器 *）。為 (a, b, c, d) 中的各個變量賦予相應的數值，就能得到特指度。
(1) 如果用 style 屬性應用樣式，則 a=1，否則 a=0。
(2) b 為 ID 選擇器的數量。
(3) c 為類選擇器、屬性選擇器和偽類的數量。
(4) d 為類型選擇器和偽元素的數量。

3、編寫優質的css

（1）添加注釋

A. 應該在每個文件的開頭添加注釋，說明文件的內容。

/**
 * 該文件包含選項卡組的樣式。
 * 選項卡組應僅包含擁有tab類的元素。
 */
B. 易于混淆的屬性，應用注釋予以說明。

.tab-group-flush {
    display: block;
    margin-left: -12px; /* 清除父容器的padding值 */
    margin-right: -12px; /* 清除父容器的padding值 */
}

（2）換行結構一致
多個屬性時，每個屬性占一行。每條聲明縮進4個空格。
（3）保持選擇器的簡單：如有多層的嵌套選擇，還不如直接加一個類
（4）高性能的選擇器：

web瀏覽器是從右向左匹配元素。
關鍵選擇器(選擇器最右邊的部分叫關鍵選擇器)。
選擇器只適用小寫字母。
用連接符連接單詞。
屬性按照字母順序排列。
屬性值為0時，省略單位。

（5）分離css和javascript：在只適用于js的類或者ID前加js-；在js中用類修改元素屬性；
（6）類名要有意義
（7）對特殊的樣式，可采用條件注釋的方法

4、測試

測試多個瀏覽器。
Gemini（https://github.com/gemini-tes...）項目是 Yandex 團隊（https://www.yandex.com）開發的視覺回歸測試工具。使用該工具，你可以編寫腳本，自動截取網站在主流瀏覽器中的截圖，然后將其與基準圖像比較，不同之處將以高亮形式標記出來。

5、代碼的組織和重構策略

按照樣式從最不精確到最精確組織CSS
(1) 通用樣式
(2) 基礎樣式
(3) 組件及其容器的樣式
(4) 結構化樣式
(5) 功能性樣式
(6) 瀏覽器特定樣式（如果一定需要）
如單一css文件進行開發

/**
 * 通用樣式
 * ---------------------------------------------
 */

/**
 * 基礎樣式
 * ---------------------------------------------
 */

 /* 基礎樣式：表單 */
 /* 基礎樣式：標題 */
 /* 基礎樣式：圖像 */
 /* 基礎樣式：列表 */
 /* 基礎樣式：表格 */
 /* 等等 */

 /**
 * 組件樣式
 * ---------------------------------------------
 */

/* 組件樣式：消息框 */
/* 組件樣式：按鈕 */
/* 組件樣式：輪播框 */
/* 組件樣式：下拉框 */
/* 組件樣式：模態框 */
/* 等等 */

/**
 * 結構化樣式
 * ---------------------------------------------
 */

/* 結構化樣式：結算區域的布局 */1
/* 結構化樣式：側邊欄的布局 */
/* 結構化樣式：主區域的布局 */
/* 結構化樣式：個人設置區域的布局 */
/* 等等 */

/**
 * 功能樣式
 * ---------------------------------------------
 */

如多個css文件進行開發

|-css/
| |-normalizing-styles
| |    |- normalize.css
| |
| |-base-styles
| |    |- forms.css
| |    |- headings.css
| |    |- images.css
| |    |- lists.css
| |    |- tables.css
| |    |- etc.
| |
| |-component-styles
| |    |- alerts.css
| |    |- buttons.css
| |    |- carousel.css
| |    |- dropdowns.css
| |    |- modals.css
| |    |- etc.
| |
| |- structural-styles
| |    |- layout-checkout.css
| |    |- layout-sidebar.css
| |    |- layout-primary.css
| |    |- layout-settings.css
| |    |- etc.
| |
| |- utility-styles
| |    |- utility.css
| |
| |- browser-specific-styles
| |    |-ie8.css

適用CSS Dig，它是 Google Chrome 瀏覽器的一款免費插件。可以分析css的源文件和無法分析的文件。

補充說明：

偽類和偽元素的區別：
（1）偽類的效果可以通過添加實際的類來實現

em:first-child {
    color: red;
}

偽元素的效果可以通過添加實際的元素來實現

p::first-letter {
    color: red;
}

（2）css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。
（3）偽類就像真正的類一樣，可以疊加使用
偽元素在一個選擇器中只能出現一次，并且只能出現在末尾
（4）偽類有：:first-child ，:linkvistited，:hover，:active，:focus，:lang 等
偽元素有：:first-line，:first-letter，:before，:after

云服務器 GPU云服務器 css樣式表讀書筆記編程思想讀書筆記大數據時代讀書筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113087.html

Java學習路線總結，搬磚工逆襲Java架構師（全網最強）

摘要：哪吒社區技能樹打卡打卡貼函數式接口簡介領域優質創作者哪吒公眾號作者架構師奮斗者掃描主頁左側二維碼，加入群聊，一起學習一起進步歡迎點贊收藏留言前情提要無意間聽到領導們的談話，現在公司的現狀是碼農太多，但能獨立帶隊的人太少，簡而言之，不缺干 ? 哪吒社區Java技能樹打卡?【打卡貼 day2...

Scorpion 2021-11-18 10:02 評論0 收藏0
《JavaScript Web富應用開發》讀書筆記

摘要：創建類中并沒有真正的類，但中有構造函數和運算符。任何函數都可以用作構造函數，構造函數必須使用運算符作為前綴來創建新的實例。調用構造函數時不要丟掉關鍵字。這里使用基于原型的繼承，而沒有用到構造函數和關鍵字。 1.創建類 JavaScript中并沒有真正的類，但JavaScript中有構造函數和new運算符。構造函數用來給實例對象初始化屬性和值。任何JavaScript函數都可以用作構造函...

琛ｈ。 2019-08-19 18:46 評論0 收藏0
《CSS設計指南》讀書筆記

摘要：用戶代理瀏覽器給視障用戶朗讀網頁的屏幕閱讀器，以及搜索引擎放出的爬蟲都是用戶代理，它們需要顯示朗讀和分析網頁。小知識屬性中的文本會在圖片因故未能加載時顯示，或者由屏幕閱讀器朗讀出來。前言代碼網址：http://www.stylinwithcss.com/ 第一章 HTML標記與文檔結構 1.html的含義 HTML 標記內容的目的是為了賦予網頁語義（semantic）。就是要給你的...

sydMobile 2019-08-30 15:55 評論0 收藏0
讀書筆記《重構改善既有代碼的設計》

摘要：重構在不改變代碼的外在的行為的前提下對代碼進行修改最大限度的減少錯誤的幾率本質上，就是代碼寫好之后修改它的設計。重構可以深入理解代碼并且幫助找到。同時重構可以減少引入的機率，方便日后擴展。平行繼承目的在于消除類之間的重復代碼。重構 (refactoring) 在不改變代碼的外在的行為的前提下對代碼進行修改最大限度的減少錯誤的幾率本質上，就是代碼寫好之后修改它的設計。 1，書中...

mdluo 2019-08-15 12:24 評論0 收藏0