成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

《CSS重構(gòu)：樣式表性能調(diào)優(yōu)》讀書筆記

imingyu / 3312人閱讀

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

1、什么是優(yōu)秀的架構(gòu)

（1）優(yōu)秀的架構(gòu)是可預(yù)測的
（2）優(yōu)秀的架構(gòu)是可擴(kuò)展的
（3）優(yōu)秀的架構(gòu)可提升代碼復(fù)用性
（4）優(yōu)秀的架構(gòu)可擴(kuò)展
（5）優(yōu)秀的架構(gòu)可維護(hù)
什么時(shí)候可以重構(gòu)：僅當(dāng)重構(gòu)能夠改善架構(gòu)或使代碼符合編碼規(guī)范時(shí)，才應(yīng)進(jìn)行重構(gòu)。

2、級(jí)聯(lián)

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

3、編寫優(yōu)質(zhì)的css

（1）添加注釋

A. 應(yīng)該在每個(gè)文件的開頭添加注釋，說明文件的內(nèi)容。

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

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

（2）換行結(jié)構(gòu)一致
多個(gè)屬性時(shí)，每個(gè)屬性占一行。每條聲明縮進(jìn)4個(gè)空格。
（3）保持選擇器的簡單：如有多層的嵌套選擇，還不如直接加一個(gè)類
（4）高性能的選擇器：

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

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

測試多個(gè)瀏覽器。
Gemini（https://github.com/gemini-tes...）項(xiàng)目是 Yandex 團(tuán)隊(duì)（https://www.yandex.com）開發(fā)的視覺回歸測試工具。使用該工具，你可以編寫腳本，自動(dòng)截取網(wǎng)站在主流瀏覽器中的截圖，然后將其與基準(zhǔn)圖像比較，不同之處將以高亮形式標(biāo)記出來。

5、代碼的組織和重構(gòu)策略

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

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

/**
 * 基礎(chǔ)樣式
 * ---------------------------------------------
 */

 /* 基礎(chǔ)樣式：表單 */
 /* 基礎(chǔ)樣式：標(biāo)題 */
 /* 基礎(chǔ)樣式：圖像 */
 /* 基礎(chǔ)樣式：列表 */
 /* 基礎(chǔ)樣式：表格 */
 /* 等等 */

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

/* 組件樣式：消息框 */
/* 組件樣式：按鈕 */
/* 組件樣式：輪播框 */
/* 組件樣式：下拉框 */
/* 組件樣式：模態(tài)框 */
/* 等等 */

/**
 * 結(jié)構(gòu)化樣式
 * ---------------------------------------------
 */

/* 結(jié)構(gòu)化樣式：結(jié)算區(qū)域的布局 */1
/* 結(jié)構(gòu)化樣式：側(cè)邊欄的布局 */
/* 結(jié)構(gòu)化樣式：主區(qū)域的布局 */
/* 結(jié)構(gòu)化樣式：個(gè)人設(shè)置區(qū)域的布局 */
/* 等等 */

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

如多個(gè)css文件進(jìn)行開發(fā)

|-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 瀏覽器的一款免費(fèi)插件?？梢苑治鯿ss的源文件和無法分析的文件。

補(bǔ)充說明：

偽類和偽元素的區(qū)別：
（1）偽類的效果可以通過添加實(shí)際的類來實(shí)現(xiàn)

em:first-child {
    color: red;
}

偽元素的效果可以通過添加實(shí)際的元素來實(shí)現(xiàn)

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113087.html

相關(guān)文章

  • Java學(xué)習(xí)路線總結(jié)，搬磚工逆襲Java架構(gòu)師（全網(wǎng)最強(qiáng)）

    摘要：哪吒社區(qū)技能樹打卡打卡貼函數(shù)式接口簡介領(lǐng)域優(yōu)質(zhì)創(chuàng)作者哪吒公眾號(hào)作者架構(gòu)師奮斗者掃描主頁左側(cè)二維碼，加入群聊，一起學(xué)習(xí)一起進(jìn)步歡迎點(diǎn)贊收藏留言前情提要無意間聽到領(lǐng)導(dǎo)們的談話，現(xiàn)在公司的現(xiàn)狀是碼農(nóng)太多，但能獨(dú)立帶隊(duì)的人太少，簡而言之，不缺干 ? 哪吒社區(qū)Java技能樹打卡?【打卡貼 day2...

    Scorpion 評論0 收藏0

  • 《JavaScript Web富應(yīng)用開發(fā)》讀書筆記

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

    ?。?。 評論0 收藏0

  • 《CSS設(shè)計(jì)指南》讀書筆記

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

    sydMobile 評論0 收藏0

  • 讀書筆記《重構(gòu) 改善既有代碼的設(shè)計(jì)》

    摘要：重構(gòu)在不改變代碼的外在的行為的前提下對代碼進(jìn)行修改最大限度的減少錯(cuò)誤的幾率本質(zhì)上，就是代碼寫好之后修改它的設(shè)計(jì)。重構(gòu)可以深入理解代碼并且?guī)椭业?。同時(shí)重構(gòu)可以減少引入的機(jī)率，方便日后擴(kuò)展。平行繼承目的在于消除類之間的重復(fù)代碼。 重構(gòu) (refactoring) 在不改變代碼的外在的行為的前提下 對代碼進(jìn)行修改最大限度的減少錯(cuò)誤的幾率 本質(zhì)上， 就是代碼寫好之后 修改它的設(shè)計(jì)。 1，書中...

    mdluo 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<