資訊專欄INFORMATION COLUMN
摘要：以上，從分層組織，模塊化，使用時(shí)注意低權(quán)重原則，以及巧用雪碧圖闡述了提高代碼質(zhì)量的四個(gè)方面。編寫高質(zhì)量代碼前端開發(fā)修煉之道曹劉陽(yáng)
分層組織CSS
我們應(yīng)用CSS的能力應(yīng)該分成兩部分：一部分是CSS的API，重點(diǎn)是如何用CSS控制頁(yè)面內(nèi)元素的樣式；另一部分是CSS框架，重點(diǎn)是如何對(duì)CSS進(jìn)行組織。
推薦一種組織CSS的方法：
base.css + common.css + page.css
base層：reset功能+通用類
common層：組件級(jí)別的CSS類
page層：頁(yè)面級(jí)別CSS樣式
模塊化可以讓代碼高度重用，顯著提高開發(fā)效率。
我們拿到設(shè)計(jì)稿的時(shí)候，首先可以從視覺(jué)上進(jìn)行劃分，樣式和功能相對(duì)獨(dú)立且穩(wěn)定的一部分就可以視為模塊。
這里介紹兩個(gè)拆分模塊技巧：
模塊與模塊之間盡量不要包含相同的部分，如果有相同的部分，應(yīng)將他們提取出來(lái)，拆分成一個(gè)獨(dú)立的模塊。
模塊應(yīng)在保證盡可能少的原則下，做到盡量簡(jiǎn)單，以提高重用性。
CSS命名空間這里推薦一種在class前加入前綴的方式構(gòu)建類似于命名空間的概念. 舉個(gè)例子：
還需注意一點(diǎn)：css class的命名推薦使用英語(yǔ)，不要使用漢語(yǔ)拼音。
掛多個(gè)class還是新建class? -- 多用組合，少用繼承舉個(gè)例子，有兩個(gè)列表，列表?xiàng)l目1字體14px紅色,列表?xiàng)l目2字體16px綠色：
方案一:
然后分別為number-list1與number-list2設(shè)置樣式
方案二 :
然后，將樣式分解為顆粒度小的class內(nèi)，利用類組合達(dá)到效果。這就是多用組合少用繼承的思想。
如何處理上下margin模塊化寫類的樣式時(shí)，常常需要寫margin樣式。這個(gè)時(shí)候不建議給某個(gè)div同時(shí)設(shè)置margin-top, margin-bottom值。因?yàn)榭赡軙?huì)帶來(lái)上下margin重合的問(wèn)題。
如果不確定模塊的上下margin特別穩(wěn)定，最好不要將它寫進(jìn)模塊的類里，而是使用類的組合，多帶帶為上下margin掛上用于確定邊距的之類。
模塊做好不要混用margin-top和margin-bottom，統(tǒng)一使用margin-top或margin-bottom。
低權(quán)重原則復(fù)習(xí)一下CSS權(quán)重問(wèn)題：
CSS的選擇符是有權(quán)重的：id選擇器的權(quán)重是100、class選擇器的權(quán)重是10、標(biāo)簽選擇器的權(quán)重是1；
當(dāng)不同選擇符的樣式設(shè)置有沖突時(shí)，會(huì)采用權(quán)重高的選擇符設(shè)置的樣式。
如果CSS選擇符權(quán)重相同，那么樣式會(huì)遵循就近原則，哪個(gè)選擇符最后定義，就采用哪個(gè)。（就近原則指的是定義樣式的先后，不是掛class名的先后）
我們?cè)谠O(shè)置樣式時(shí)，適當(dāng)使用子選擇器，可以增加CSS的權(quán)重。例如：span .font{} 的樣式會(huì)覆蓋.font{}的樣式。但CSS選擇符的權(quán)重越高，樣式越不容易覆蓋。為了保證樣式容易被覆蓋，提高可維護(hù)性，CSS選擇符需保證權(quán)重盡可能低。
CSS sprite 什么是CSS sprite?將網(wǎng)站的多張背景圖合并到一張大圖上，這便是CSS sprite.
CSS sprite 優(yōu)點(diǎn)？CSS sprite出發(fā)點(diǎn)已經(jīng)不僅是“解決滑過(guò)狀態(tài)時(shí)背景圖片出現(xiàn)空白”的問(wèn)題了，通過(guò)將多張圖片合并成一張大圖，會(huì)大大減少網(wǎng)頁(yè)的HTTP請(qǐng)求數(shù)，減小服務(wù)器壓力。這對(duì)于流量比較大的網(wǎng)站很有價(jià)值。
哪些場(chǎng)合不適合使用CSS sprite?CSS sprite只能合并用于背景的圖片，對(duì)于 設(shè)置的圖片，是不能合并到css sprite大圖中的。如果合并這些圖片會(huì)影響頁(yè)面的可讀性。
對(duì)于橫向和縱向都平鋪的圖片也不能使用CSS sprite.
這里擴(kuò)展一個(gè)問(wèn)題: 我們?cè)趯戫?yè)面時(shí)，對(duì)于圖片，是使用img標(biāo)簽好呢？還是使用background-img屬性好呢？
以下對(duì)二者進(jìn)行一個(gè)對(duì)比總結(jié)：
本質(zhì)區(qū)別：img標(biāo)簽是html標(biāo)簽，background-img是CSS的一個(gè)樣式；
加載方面：img標(biāo)簽是html結(jié)構(gòu)的一部分，img 會(huì)在加載結(jié)構(gòu)時(shí)進(jìn)行加載，而background-img會(huì)在結(jié)構(gòu)和內(nèi)容加載完成后才開始加載；
SEO方面：搜索引擎會(huì)關(guān)注img標(biāo)簽的alt屬性；這時(shí)如果使用了background-img則頁(yè)面可讀性比較差；另外，有些網(wǎng)站需要在禁用css情況下運(yùn)行，此時(shí)比較重要的圖片例如logo，就需要使用img標(biāo)簽而不是background-img.
在多數(shù)場(chǎng)景下，二者都能完成工作。比如hover切換圖片，可以改變img的src屬性，也可以改變background-img的url; 比如改變圖片的位置，可以改變img元素的位置，也可以改變background-img的postion;
CSS sprite有哪些缺點(diǎn)？CSS sprite將多張圖片合并為一張圖片，通過(guò)控制background-position進(jìn)行定位，這對(duì)于圖片的位置精確程度要求非常高。定位完成后，大圖中的每個(gè)小圖的坐標(biāo)值不可輕易改動(dòng)，這在一定程度上降低了可維護(hù)性。
因此，如何排列圖片能夠盡量緊湊，同時(shí)保證不會(huì)影響擴(kuò)展性，是CSS sprite技術(shù)最困難也是最具挑戰(zhàn)性的地方。
以上，從分層組織CSS，模塊化CSS，使用時(shí)注意低權(quán)重原則，以及巧用CSS雪碧圖闡述了提高CSS代碼質(zhì)量的四個(gè)方面。更多方法還需在實(shí)踐中積累。
References[1].編寫高質(zhì)量代碼-Web前端開發(fā)修煉之道 -- 曹劉陽(yáng).
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111460.html
摘要：六字符編碼通過(guò)明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式。十一減少標(biāo)簽的數(shù)量編寫代碼時(shí)，盡量避免多余的父元素。未完待續(xù)編寫靈活穩(wěn)定高質(zhì)量的代碼的規(guī)范閱讀更多 一、唯一定律 無(wú)論有多少人共同參與同一項(xiàng)目，一定要確保每一行代碼都像是唯一個(gè)人編寫的。 二、HTML 2.1 語(yǔ)法 （1）用兩個(gè)空格來(lái)代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法...
摘要：用兩個(gè)空格代替制表符這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。編輯器配置將你的編輯器按照下面的配置進(jìn)行設(shè)置，以免常見的代碼不一致和差異用兩個(gè)空格代替制表符保存文件時(shí)刪除尾部的空白符設(shè)置文件編碼為在文件結(jié)尾添加一個(gè)空白行。 黃金定律 永遠(yuǎn)遵循同一套編碼規(guī)范 - 可以是這里列出的，也可以是你自己總結(jié)的。如果發(fā)現(xiàn)規(guī)范中有任何錯(cuò)誤，敬請(qǐng)指正。 HTML 語(yǔ)法 用兩個(gè)空格代替制表符 (ta...
摘要：過(guò)度使用簡(jiǎn)寫形式的屬性聲明會(huì)導(dǎo)致代碼混亂，并且會(huì)對(duì)屬性值帶來(lái)不必要的覆蓋從而引起意外的副作用。只有在必要的時(shí)候才將限制在最近的父元素內(nèi)也就是后代選擇器例如，不使用帶前綴的時(shí)前綴類似于命名空間。制定一致的注釋規(guī)范。 一、語(yǔ)法 1.1 注意 （1）用兩個(gè)空格來(lái)代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。 （2）為選擇器分組時(shí)，將單獨(dú)的選擇器單獨(dú)放在一行。 （3...
摘要：第一部分介紹了如何使用和開發(fā)接口。由于系統(tǒng)變得越來(lái)越復(fù)雜，人們提出了稱為預(yù)處理器和后處理器的工具來(lái)管理復(fù)雜性。當(dāng)您第一次得知有預(yù)處理器和后處理器時(shí)，你很有可能在任何地方已經(jīng)使用它們。我之前建議的文章，，也涵蓋了預(yù)處理器相關(guān)的知識(shí)。 我記得我剛開始學(xué)習(xí)前端開發(fā)的時(shí)候。我看到了很多文章及資料，被學(xué)習(xí)的資料壓得喘不過(guò)氣來(lái)，甚至不知道從哪里開始。 本指南列出前端學(xué)習(xí)路線，并提供了平時(shí)收藏的一些...
摘要：前言月份開始出沒(méi)社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒(méi)社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
閱讀 1093·2021-11-22 14:56
閱讀 1530·2019-08-30 15:55
閱讀 3371·2019-08-30 15:45
閱讀 1666·2019-08-30 13:03
閱讀 2879·2019-08-29 18:47
閱讀 3341·2019-08-29 11:09
閱讀 2649·2019-08-26 18:36
閱讀 2624·2019-08-26 13:55
