css重構 樣式表效能調優 (學習筆記)

2021-10-24 06:28:52 字數 1123 閱讀 2001

優秀的架構是可擴充套件,易維護的,

重構:在不影響**功能的情況下,使**更加簡潔並且可復用

**是否需要重構:

1.有很多重複性**

2.**沒有最佳實現方式

3.需求變更,現有架構不能滿足需求

樣式是可以重疊的,級聯就是瀏覽器根據規則來選擇為元素最終使用那種樣式。

選擇器特制度:

特指度度量的是 css 選擇器識別元素的精確性。為選取元素,不同型別的選擇器常組合在一起,計算特指度時需要分析這些選擇器(除了通用選擇器 *)。為 (a, b, c, d) 中的各個變數賦予相應的數值,就能得到特指度。

(1) 如果用 style屬性應用樣式,則 a=1,否則 a=0。

(2) b為 id 選擇器的數量。

(3) c為類選擇器、屬性選擇器和偽類的數量。

(4) d為型別選擇器和偽元素的數量。

優秀的css就是看起來通俗易懂,後期易維護,擴充套件性強。

多使用注釋

**規範要一致

樣式分類

利用級聯的規則,去更好的組織css**,提高**的復用性。

(1) 通用樣式

(2) 基礎樣式

(3) 元件及其容器的樣式

(4) 結構化樣式

(5) 功能性樣式

(6) 瀏覽器特定樣式(如果一定需要)

測試時需要考慮很多因素,其中包括以下幾點。

正在用什麼瀏覽器測試網頁?

如何在不同的作業系統上測試各種各樣的瀏覽器?

正在多大的視窗瀏覽網頁?

如何快速測試大量網頁?

如何驗證你所看到的效果是正確的?

如果你無法獲得某些裝置,如何測試**在這些裝置上的效果?

* 根據自己的產品需要,以及市場需求,去進行瀏覽器測試。

判定**是否重構,運用本書中2.3.4章的知識去重構**。

**是否重構成功:

1.有沒有影響現有功能

2.**變得更少(復用性強)

3.**更規範(可讀性強)

4.是否能提高以後得開發效率

有沒有影響**功能,**變得更少更規範了,是否能減少以後的開發時間。

本文主要紀錄了自己對看完 (

css重構:樣式表效能調優

)這本書之後得一些個人理解。

css 樣式表學習和應用

一般來說,樣式表的宣告分為選擇符 selector 和塊 block 塊裡包含屬性 properties 和屬性的取值 value 基本格式如下 基本格式 選擇符 其它格式1 選擇符1,選擇符2,選擇符3 有時候多個選擇符將使用相同的設定,為了簡化 我們可以一次性為它們設定樣式,並在多個選擇符之間加...

層疊樣式表 CSS 學習筆記

1.css的基本用法 1.1 如何在html內插入樣式表 從樣式表的插入形式來看基本分為三種 a.內聯式樣式表 直接寫在現有的html標籤中,如 這裡是紅色文字 b.嵌入式樣式表 使用 標籤嵌入到html檔案的頭部種,如 c.外部式樣式表 樣式表外部檔案以 css 為副檔名,在內 不是在 1.2 使...

CSS 學習筆記 插入樣式表

這些是以前學習做的筆記,現在整理一下放到部落格上,清理磁碟空間啦 1 內聯樣式 2 內部樣式表 3 外部樣式表內聯樣式將內容和樣式表現混合在一起,比較混亂,相比較於樣式表,優勢不足。所以盡量不要使用內聯樣式。1 時候可以使用內聯樣式?當樣式僅需要在乙個元素上應用一次時。2 使用內聯樣式的方法?標籤內...