如何組織CSS-分層

應(yīng)用 css 的能力分兩部分：一部分是css的API，重點(diǎn)是如何用css控制頁(yè)面內(nèi)元素的樣式；另一部分是css框架，重點(diǎn)是如何對(duì) css 進(jìn)行組織。如何組織 css 可以有多種角度，例如按功能劃分，或者按區(qū)塊劃分。這里講一下 base.css common.css page.css 的組織方法。將網(wǎng)站內(nèi)的所有樣式，按照職能分成三大類：base、common、page，這三者是層疊結(jié)構(gòu)。

1、base 層-精簡(jiǎn)通用

位于三者的最底層，提供 css reset 功能和粒度最小的通用類——原子類。這一層會(huì)被所有頁(yè)面引用，是頁(yè)面樣式所需依賴的最底層，不同風(fēng)格的網(wǎng)站可以使用同一個(gè) base 層，所以，應(yīng)具有高度可移植性，力求精簡(jiǎn)和通用。該層相對(duì)穩(wěn)定，基本不需要維護(hù)，可以簡(jiǎn)單地放在一個(gè)文件里，如 base.css。

css reset 即一開始就將瀏覽器的默認(rèn)樣式全部去掉，就是通過(guò)重新定義標(biāo)簽的樣式，“覆蓋”掉瀏覽器提供的默認(rèn)樣式。可以將常用的標(biāo)簽顯式地羅列出來(lái)，避免使用“*”，如來(lái)自于 YUI 的部分 css reset 的代碼：

/*CSS reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:”;} abbr,acronym{border:0;}

通用原子類是一系列常用的基本類，包括：文字、定位、長(zhǎng)度和邊距，由于其原子性，除少數(shù)特殊類，大部分都只包含一句 css，如：.f12{font-size:12px;}，由于其通用性，在保證命名有語(yǔ)義前提下，命名應(yīng)盡量簡(jiǎn)短，如 paddingtop20 可以寫成 pt20。通用原子類里有幾個(gè)類較特殊，特別說(shuō)明一下：

1).fl 類和.fr 類：除了設(shè)置 float：left 和 float：right 之外，還應(yīng)設(shè)置 display：inline，可以解決 IE6 的雙外邊距 Bug。 .fl{float:left;display:inline;} .fr{float:right;display:inline;} 2).bc 類：為使塊級(jí)元素居中，還要設(shè)定寬度，可以把它和 .w100 等類同時(shí)使用，如： .bc{margin-left:auto;margin-right:auto;} .w100{width:100;} 3).clearfix 類：用于在父容器直接清除子元素浮動(dòng)。 4).zoom 類：設(shè)置樣式是 zoom:1，它是 IE 的專有屬性，用以觸發(fā) hasLayout。

2、common 層-組件級(jí)，模塊化，重用

位于中間，提供組件級(jí)的 css 類。可以將頁(yè)面內(nèi)的元素拆分成一小塊功能和樣式相對(duì)獨(dú)立的小“模塊”，將大量重復(fù)地“模塊”視為一個(gè)組件，放在 common 層里（“模塊化”可以從樣式和行為兩個(gè)層面來(lái)考慮，與 common 層相關(guān)的是樣式的模塊化）。common 層相當(dāng)于 MVC 模式中的 M（Model，模型），需盡可能將內(nèi)部實(shí)現(xiàn)封裝。?
（web前端學(xué)習(xí)交流群：328058344 禁止閑聊，非喜勿進(jìn)！）

common 層是網(wǎng)站級(jí)的，不同的網(wǎng)站有不同的 common 層，同一個(gè)網(wǎng)站只有一個(gè) common 層，可以放在一個(gè)文件里，也可按功能劃分放在多個(gè)文件里。在團(tuán)隊(duì)合作中，common 層最好由一個(gè)人負(fù)責(zé)，統(tǒng)一管理。

3、page 層?
網(wǎng)站中非高度重用的模塊，可以放在 page 層里。page 層位于最高層，提供頁(yè)面級(jí)的樣式。如果網(wǎng)站規(guī)模不過(guò)于龐大，可以將所有 page 層放在一個(gè)文件里，根據(jù)頁(yè)面配上注釋，分塊書寫，便于維護(hù)。page 層 css 文件應(yīng)越簡(jiǎn)越好，能用 base 層和 common 層的 css 解決的，盡量不要用到 page 層。

避免濫用子標(biāo)簽

低權(quán)重原則。

能用組合，不用繼承。

駝峰命名用于區(qū)別不同單詞，劃線用于表明從屬關(guān)系。

CSS sprite

技術(shù)是針對(duì)作為背景的圖片，對(duì)與html文檔設(shè)置的圖片，不能合并到CSS Sprite大圖，否則圖片會(huì)影響頁(yè)面可讀性。

對(duì)于橫向和縱向都平鋪的圖片，也不能使用CSS sprite；如果是橫向平鋪的，只能將所有橫向平鋪的圖合并成一張大圖，只能豎直排列，不能水平排列；如果是縱向平鋪的，只能將所有縱向平鋪的圖合并成一張大圖，只能水平排列，不能豎直排列。

CSS sprite的圖片定位可以使用bg2css小工具快速定位background-positon坐標(biāo)，有利于提高開發(fā)速度。

好處是減少HTTP請(qǐng)求數(shù)減輕服務(wù)器壓力，缺點(diǎn)是降低開發(fā)效率、增加維護(hù)難度。CSS Sprite大圖中每個(gè)圖片的維護(hù)改動(dòng)都要謹(jǐn)慎，防止影響周圍的圖片。

網(wǎng)站是否使用CSS Sprite技術(shù)，主要取決于網(wǎng)站流量。

流量大的網(wǎng)站好處明顯：減少HTTP請(qǐng)求數(shù)量，減輕服務(wù)器壓力；（電商，微博，輕博，社區(qū)）

流量不大的網(wǎng)站代價(jià)很大：降低開發(fā)效率，增大維護(hù)難度（后臺(tái)管理系統(tǒng)一般不適合使用）

CSS hack

1.IE條件注釋法

該方法安全性、兼容行好，也是微軟推薦的hack方法，但是不利于開發(fā)維護(hù)，需要維護(hù)多份css文件。比如涉及到針對(duì)不同版本IE的css。

<!--[if IE]><![endif]--> 只在IE下有效 <!--[if IE 6]><![endif]--> 只在IE6有效 <!--[if gt IE 6]><![endif]--> 只在IE6以上版本有效 注意：結(jié)合lte(小于等于)、lt(小于)、gte(大于等于)、gt(大于)、!(非)關(guān)鍵字使用。

2.選擇符前綴法

“*html” 前綴只對(duì)IE6生效 "* html"前綴只對(duì)IE7生效 .test{width:80px;} /*IE 6 7 8*/ *html .test{width:70px;} /*IE6*/ * html .test{width:60px;} /*IE7*/ 缺點(diǎn)：不能保證IE9，10不識(shí)別*html,* html，有向后兼容風(fēng)險(xiǎn)。

3.樣式屬性前綴法：

如“_”只在IE6下生效，“*”在IE6和IE7下生效。同樣有向后兼容隱患。.test{width:80px;*width:70px;_width:60px;}可用于內(nèi)聯(lián)樣式：<div style="width:80px;*width:70px;_width:60px;"></div> 由于IE條件注釋法不利于開發(fā)維護(hù)，實(shí)際中常用的hack方法常常是后兩者。

display:inline-block 和 hasLayout

塊級(jí)元素、行內(nèi)元素

塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)寬度自動(dòng)填滿其父元素寬度，可以設(shè)置width、height、margin、padding屬性；

行內(nèi)元素一行排滿才會(huì)換行，寬度隨元素內(nèi)容多少變化，設(shè)置width、height屬性無(wú)效，只有水平方向的margin、padding邊距有效果。

常見的塊級(jí)元素有div、p、table、fieldset、form、ul、ol、dl、h1~h6、hr、pre、address、blockquote、center、dir、menu、noframes、noscript。

常見內(nèi)聯(lián)元素有input span strong em a abbr acronym br img select textarea等等。

可以通過(guò)修改display屬性值轉(zhuǎn)行塊元素和行內(nèi)元素。

display的值除了block和inline，還有其他值，例如list-item、teble-cell等，但因?yàn)镮E6和IE7瀏覽器支持的display類型很少，所以為兼容IE，真正能用的display類型只有block、inline和none三種。

IE6、IE7支持但不完全支持display:inline-block屬性,但I(xiàn)E8 和FF等標(biāo)準(zhǔn)瀏覽器支持。

display:inline-block，行內(nèi)的塊級(jí)元素，它擁有塊級(jí)元素的特點(diǎn)，可以設(shè)置長(zhǎng)寬，可以設(shè)置margin和padding值，但它卻不是獨(dú)占一行，它的寬度并不占滿父元素，而是和行內(nèi)元素一樣，可以和其他行內(nèi)元素排在同一里。它集塊級(jí)元素和行內(nèi)元素的特點(diǎn)于一身，是個(gè)非常有用的display類型（web前端學(xué)習(xí)交流群：328058344 禁止閑聊，非喜勿進(jìn)！）

讓IE6、IE7支持display:inline-block

利用hasLayout可以再不支持display：inline-blcok的IE6和IE7下模擬出display：inline-block的效果，實(shí)現(xiàn)IE6、IE7、IE8 和Firefox都兼容的display：inline-block的應(yīng)用。但是也有一些問(wèn)題需要特別注意：

• 在IE6、IE7中不識(shí)別display:inline-block屬性，但使用inline-block屬性在IE下會(huì)觸發(fā)layout，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表癥。
• 在IE5.5中開始支持 inline-block 。你可以使用 inline-block 使對(duì)象獲得布局而無(wú)需指定確切的高( height )和寬( width )。
• IE6/IE7的inline-block屬性只對(duì)原生默認(rèn)的內(nèi)聯(lián)元素(span, a, em……)有效，對(duì)于塊級(jí)元素(div,p,ul……)無(wú)效。 In IE 6 and 7 inline-block works only on elements that have a natural display: inline.IE doesn’t apply the value inline-block for the CSS display property on HTML elements that default to block level.
• 兩個(gè)結(jié)論： 1、IE6/7不識(shí)別inline-block，只是觸發(fā)了layout，表現(xiàn)跟inline-block塊元素表現(xiàn)一樣。2、IE6/7不完全支持inline-block，只對(duì)內(nèi)聯(lián)元素有效。
• 看官方的說(shuō)法，確證對(duì)inline-block的認(rèn)識(shí)。The following table shows Cascading Style Sheets (CSS) properties and corresponding values that, if set, cause an element to have layout.?
  下表列出一些CSS屬性及其值，以下屬性一旦設(shè)置，將觸發(fā)元素的layout：

CSS propertyValuedisplay inline-block height any value float left or right position absolute width any value -ms-writing-modetb-rl zoom any value

• 延伸問(wèn)題：IE下塊元素如何實(shí)現(xiàn) display:inline-block 的效果？?
  有兩種方法：

1、先使用 display:inline-block 屬性觸發(fā)塊元素，然后再定義 display:inline，讓塊元素呈遞為內(nèi)聯(lián)對(duì)象（兩個(gè)display 要先后放在兩個(gè) CSS 聲明中才有效果，這是 IE 的一個(gè)經(jīng)典 bug ，如果先定義了 display:inline-block，然后再將 display 設(shè)回 inline 或 block，layout 不會(huì)消失）。代碼如下：

div {display:inline-block;} div {display:inline;}

說(shuō)明：在IE下，display: inline-block只是觸發(fā)了元素的layout。比如將display: inline-block給到div上，只能保證這個(gè)div擁有塊元素的特征（可以設(shè)置寬度，高度等），但是還是行布局（產(chǎn)生換行）。接下來(lái)要設(shè)置display: inline，更改這個(gè)div的布局為內(nèi)聯(lián)布局（不產(chǎn)生換行）。

2、直接讓塊元素設(shè)置為內(nèi)聯(lián)對(duì)象呈遞（設(shè)置屬性 display:inline），然后觸發(fā)塊元素的 layout（可使用zoom:1 等）。代碼如下：

div {display:inline; zoom:1;}

hasLayout

hasLayout設(shè)計(jì)的初衷是用于輔助塊級(jí)元素的盒子模型的，它是用于塊級(jí)元素的。如果用于行內(nèi)元素，會(huì)引發(fā)一些特殊效果。（結(jié)合上面紅色字體理解）

設(shè)置寬高屬性width、height值都可以觸發(fā)hasLayout，但是有時(shí)候帶來(lái)副作用，現(xiàn)在常用zoom:1;來(lái)觸發(fā)，極少數(shù)非常復(fù)雜的css設(shè)置情況zoom無(wú)效的時(shí)候，需要借助更為強(qiáng)大的“position:relative”來(lái)觸發(fā)hasLayout。

haslayout?
是Windows Internet Explorer渲染引擎的一個(gè)內(nèi)部組成部分。在InternetExplorer中，一個(gè)元素要么自己對(duì)自身的內(nèi)容進(jìn)行計(jì)算大小和組織，要么依賴于父元素來(lái)計(jì)算尺寸和組織內(nèi)容。為了調(diào)節(jié)這兩個(gè)不同的概念，渲染引擎采用了 hasLayout 的屬性，屬性值可以為true或false。當(dāng)一個(gè)元素的 hasLayout屬性值為true時(shí)，我們說(shuō)這個(gè)元素有一個(gè)布局（layout）。

總結(jié)

以上是生活随笔為你收集整理的《Web前端开发修炼之道》-读书笔记CSS部分的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。