CSSOO的思想及CSS框架的應(yīng)用

?????? 前語：通過這次研究分析總結(jié)，個(gè)人對(duì)CSSOO的概念及應(yīng)用的思路也更明確一些，是一個(gè)和大家共同學(xué)習(xí)的過程。

一、CSS框架

框架目的：

給出一個(gè)相對(duì)規(guī)范的開發(fā)方法，給出一些具體的可以操作流程內(nèi)容，按照框架的思路來方便靈活的完成一個(gè)css設(shè)計(jì)。規(guī)劃了樣式應(yīng)用的代碼組織模式，進(jìn)行頁面布局的一種靈活的組合方式。

目前CSS框架：

國(guó)內(nèi)比較出名好像是YUI。

• Blueprint
• YAML :: Yet Another Multicolumn Layout
• Yahoo UI Grids
• Elements CSS Framework

二、框架的應(yīng)用

CSS能形成框架應(yīng)用主要是歸功于樣式選擇器的層疊和繼承。

CSS的選擇器有：類型選擇器，后代選擇器，ID選擇器，類選擇器，高級(jí)選擇器（屬性選擇器，子選擇器，相鄰選擇器。瀏覽器支持不一）及這些選擇器的組合應(yīng)用。

1、層疊和特殊性

?

那么這些選擇器在使用過程中，如何確定顯示內(nèi)容的最終渲染效果？

這主要借助于CSS的層疊和特殊性。樣式表的應(yīng)用規(guī)則如下：

1). 首先根據(jù)樣式表的重要度次序來應(yīng)用樣式表，重要性從上到下降低
????????????? ！important的用戶樣式
????? ????????????? ！important的作者樣式
????? ????????????? 作者樣式
????? ????????????? 用戶樣式
????? ????????????? 瀏覽器定義的樣式

2）在確定樣式表的重要次序的基礎(chǔ)上根據(jù)特殊性覺得規(guī)則的應(yīng)用。

每種選擇器被分配一個(gè)數(shù)字值。然后，將規(guī)則的每個(gè)選擇器的值加在一起，計(jì)算出規(guī)則的特殊性。

選擇器的特殊性分成四個(gè)成分等級(jí)：a、b、c和d。

l???????? 如果樣式是行內(nèi)樣式，那么a = 1。

l???????? b = ID選擇器的總數(shù)。

l???????? c = 類、偽類和屬性選擇器的數(shù)量。

l???????? d = 類型選擇器和偽元素選擇器的數(shù)量。

使用這些規(guī)則可以計(jì)算任何CSS選擇器的特殊性。

表1-1給出一系列選擇器以及相應(yīng)的特殊性

注：用style屬性編寫的規(guī)則總是比其他任何規(guī)則特殊；具有ID選擇器的規(guī)則比沒有ID選擇器的規(guī)則特殊；具有類選擇器的規(guī)則比只有類型選擇器的規(guī)則特殊；

3）如果兩個(gè)規(guī)則的特殊性相同，那么后定義的規(guī)則優(yōu)先。

4) !important :如果應(yīng)用這個(gè)規(guī)則，那你可以不管上面2，3兩點(diǎn)的復(fù)雜的規(guī)則了，但若過多的應(yīng)用此!important將破壞樣式的層疊應(yīng)用。

?

2、繼承，重載，抽象，實(shí)例

<父>

<元素 ?? (繼承上文)?? Class="A B ..."??? Id="ID"Style="屬性:值;">

??????? ???? <子>... </子>

?? </元素>

</父>

1.???

繼承，重載的對(duì)象是樣式的某一個(gè)屬性。

2.??? 上文環(huán)境：不由元素自身的class，id，style行里樣式?jīng)Q定的，由雨它所處的祖先級(jí)元素的環(huán)境而自動(dòng)擁有的樣式屬性。

3.??? 元素的樣式屬性規(guī)則Class(A) ?<?Class(B) <?Class(…) < ID < Style，對(duì)于應(yīng)用規(guī)則越往右，優(yōu)先級(jí)越高。

元素首先會(huì)根據(jù)元素所在的上文擁有一些樣式屬性，

前面有的后面沒有的，后面默認(rèn)繼承前面的樣式，

前面沒有的后面有的，可看作增加了私有的樣式

前面有的后面也有的，可看作重載了相同屬性的樣式。

4.??? 同類型的元素（相同標(biāo)簽名），同類元素（塊，行元素）

5.??? 操作對(duì)象：應(yīng)用某規(guī)則的元素及元素的后代。

6.??? 一個(gè)元素的樣式由其上文和該元素所設(shè)置的class，id，style行里樣式確定，且該元素的設(shè)置也將影響其后代元素的樣式屬性，

7.??? <父>的樣式設(shè)置，影響其所有的后代的部分屬性（共同擁有的那部分屬性），<元素>繼承、重載并私有新的樣式屬性，且在重載的部分中賦予<子>中由<父>確定的那部分新的樣式。

8.??? CSSOO類，類群。

CSSOO類：選擇器規(guī)則 {類主體}

選擇器規(guī)則：是各種選擇器的組合。

類主體：屬性：值;的集合。

CSSOO類只有屬性，沒有方法（擴(kuò)展：如果擁有方法?js？c#？）

由CSSOO類組成的塊叫類群。

9.??? 模型應(yīng)用

語義片段，CSSOO類群

10.父子元素的繼承，重載… 元素自身的class id style行里元素設(shè)置的繼承，重載。

11.實(shí)例化：符合選擇器規(guī)則的語義片段的應(yīng)用。

?

?

?????? 抽象、繼承，重載，實(shí)例的我們是看不到一個(gè)明顯的過程的，沒有像程序一樣的顯示的聲明，一切都是思考后的一種結(jié)果。

?

CSS的繼承本身是指應(yīng)用樣式的元素的后代會(huì)繼承該元素的某些屬性，這些屬性通常是父元素和子元素都有的屬性，一般是修飾方面的屬性，比如顏色，在結(jié)構(gòu)排版方面的一般不會(huì)繼承。

要涉及框架的應(yīng)用，可以將繼承的理解擴(kuò)展開來，css本身的繼承只作為一個(gè)內(nèi)在的方面。

下面分析理解CSSOO的繼承，及重載，抽象，實(shí)例。(個(gè)人將CSS的類面向?qū)ο蟮膽?yīng)用，稱為CSSOO.)

CSSOO的類可以理解為一條條樣式規(guī)則及規(guī)則組合。

形如：選擇器{屬性：值}。

.testClass1 {}

.testClass1 h1{}

.testClass1 p{}

#testId {}

層疊和特殊性為CSSOO提供應(yīng)用規(guī)則，通過這種規(guī)則的組合，可以達(dá)到類面向?qū)ο蠡男Ч?/span>

有點(diǎn)需要指出，框架的應(yīng)用必須形成有語義結(jié)構(gòu)的html代碼結(jié)構(gòu)模塊，下面會(huì)結(jié)合土豆網(wǎng)的一個(gè)box的代碼片段進(jìn)行這個(gè)CSSOO的分析理解。

1)??????? 抽象
css的類class的自身定義就是提取元素中共用的東西放在一個(gè)class里面，以便需要相同表現(xiàn)的元素進(jìn)行應(yīng)用。這是css的自身的一種抽象應(yīng)用。
css的類的規(guī)則定義是以： .test{屬性:值;}的方式定義的。比如給所用的img設(shè)置成3px red邊框，比如給 某些div，某些table設(shè)置共同的背景色等等。

CSSOO的抽象：

將公用的重復(fù)的東西抽象出來作為基類class。基類可以分成多個(gè)方面.

可以利用類型選擇器，和class類選擇器及高級(jí)選擇器的規(guī)則組合對(duì)樣式進(jìn)行提取抽象，抽象出來的可以成為父類。

對(duì)于ID選擇器在抽象中盡量較少應(yīng)用，因?yàn)?/span>id選擇器不利于抽象和繼承。如果應(yīng)用id選擇器定義樣式，這個(gè)樣式類就相當(dāng)于程序中的類加了sealed修飾符，無法被繼續(xù)。Id選擇器定義樣式類一般用于比較具體的類中。

?

抽象分為全局抽象和局部抽象。
全局抽象：

常是通過類型選擇器將元素的默認(rèn)樣式重置統(tǒng)一成你想要表現(xiàn)出的樣式。以及為一些元素的包含關(guān)系進(jìn)行一些樣式定義。如CSS框架應(yīng)用中的reset.css，typography.css
比如：*{padding:0;margin:0}?,?div p {color:red;}

還有是通過class類定義一些比較傾向于某個(gè)方面的樣式，大多是表象樣式。這些樣式一般是與局部抽象無關(guān)的，但可以用于任何元素的樣式，這些類可以統(tǒng)一風(fēng)格，增加使用靈活性。
局部抽象：

我們自行定義的一些語義模型，并對(duì)這些模型設(shè)置一個(gè)統(tǒng)一的樣式應(yīng)用，如土豆網(wǎng)的box盒模型，為引用box盒模型的實(shí)例提供相同表現(xiàn)。

CSS框架除了提供分欄布局的模型外一般是不提供這些局部抽象的，局部抽象是根據(jù)我們的具體項(xiàng)目使用，定義一些模型。

上面的這些抽象都將作為一個(gè)父類來繼承。

2)??????? 繼承與重載

一個(gè)語義代碼結(jié)構(gòu)不附加任何的行內(nèi)樣式，不添加id選擇器，不添加class類，這個(gè)元素將按照CSS本身繼承特性擁有一些樣式。

當(dāng)添加id或者class時(shí)，就可以理解為發(fā)生了繼承這一個(gè)行為，當(dāng)添加的類中含有全局抽象中定義的屬性時(shí)，會(huì)按照層疊和特殊性的原則進(jìn)行重載。

如：<div class="traffic car" id="mycar"></div>

traffic是抽象出來的交通工具的樣子， car里描述了一些小轎車特有的樣子，mycar是描述了我的車擁有的特征。

通過上面的一條html片段，基本能夠了解CSSOO的一個(gè)思想。

繼承的行為是在class="traffic car"這樣的過程中能夠發(fā)生的。

當(dāng)car中擁有需要修改traffic里的一些外觀屬性時(shí)，就發(fā)生了重載，比如traffic將交通工具的顏色默認(rèn)設(shè)置成黑色，而car里定義默認(rèn)的顏色為紅色。就會(huì)放生重載。重載是針對(duì)已經(jīng)擁有的屬性來說的。

繼承是兩方面，一種是隱式的集成，就是繼承全局抽中里，利用類型選擇器進(jìn)行定義的樣式規(guī)則，另一種就是在如上面的html片段中產(chǎn)生的一種繼承行為，即car 繼承了traffic描述的交通工具的基本外觀特征。

3)??????? 實(shí)例：對(duì)于某一個(gè)元素應(yīng)用是就是將這個(gè)元素實(shí)例化。簡(jiǎn)單點(diǎn)理解，就是拷貝相同的語義結(jié)構(gòu)代碼，并應(yīng)有CSSOO的類規(guī)則。如果靈活實(shí)例化的問題，是一個(gè)CSS框架的好壞的關(guān)鍵, 也是判斷CSSOO的樣式框架是否合理一個(gè)標(biāo)準(zhǔn)。
以怎樣的一種方式進(jìn)行實(shí)例化，是一個(gè)非常重要的可研究的地方。

3、結(jié)合土豆網(wǎng)box模型實(shí)例（未整理完）

?????? 左圖是土豆網(wǎng)BOX模型的語義片段。

三、CSS框架的組織

?

框架組織

CSS框架首選組織css的文件維護(hù)結(jié)構(gòu)。通常將css按照邏輯及涉及的方面分化成幾個(gè)樣式表文件。一般會(huì)從以下幾個(gè)方面進(jìn)行組織。

1.?????? 重置瀏覽器的默認(rèn)風(fēng)格。
這個(gè)應(yīng)用主要是統(tǒng)一各種瀏覽器之間的默認(rèn)設(shè)置的差異

2.?????? 組織一種部件的應(yīng)用模型
比如豆瓣的導(dǎo)航模型，盒模型，包裝模型， blueprint框架的布局排版的組合應(yīng)用

3.?????? 統(tǒng)一某些具體標(biāo)簽元素及元素組合模型的表現(xiàn)。
比如，form表單里的各種控件標(biāo)簽的表現(xiàn)風(fēng)格；組合的盒模型，導(dǎo)航元素組合；自己設(shè)置的布局組合

4.?????? 創(chuàng)建通用css類。

5.?????? hack文件：主要是為平衡各個(gè)瀏覽器的版本bug的文件

比如blueprint中：

reset.css 充值樣式?
typography.css?排版
grid.css?布局（能作為框架的，這是個(gè)關(guān)鍵）
form.css??表單部件

還有：

widgets.css?? 在具體項(xiàng)目中定義的模型，如土豆網(wǎng)的box模型，pack包裝模型

一個(gè)css框架的好壞個(gè)人感覺主要在排版和項(xiàng)目中的模型是否有好的靈活的設(shè)計(jì)。

如果使用css框架？?（未整理完）

如果使用主要涉及到性能問題。
因?yàn)?/span>css分成多個(gè)文件，會(huì)增加http請(qǐng)求數(shù)，如果放到一個(gè)文件里面，又會(huì)降低框架使用的靈活性。

如何能做到靈活性？理想方案：一個(gè)帶參數(shù)的請(qǐng)求，服務(wù)器端動(dòng)態(tài)選擇組合輸出文件。

結(jié)合Blueprint CSS 框架進(jìn)行分析（未整理完）

Blurprint的靈活布局

和blueprint的grid.css進(jìn)行分析,基于網(wǎng)格的布局

相關(guān)概念：

?????? 層疊：css的全稱為層疊樣式表（Cascading Style Sheets）。從命名可以看出層疊是樣式表非常重要的一個(gè)屬性。按照一定的規(guī)則，規(guī)則高的樣式會(huì)覆蓋規(guī)則低的樣式。

繼承(inheritance): 繼承（的規(guī)則）允許樣式不僅應(yīng)用于某個(gè)特定的元素（父元素），而且應(yīng)用于其后代（子元素）。

特殊性(specificity)：即某條CSS規(guī)則特殊性越高，它的樣式越優(yōu)先被采用，網(wǎng)頁就會(huì)顯示它所指定的樣式。

瀏覽器樣式：不同的瀏覽器廠家，都會(huì)在瀏覽器中給所有的html文章設(shè)置一種共同的特征，比如：你是比爾蓋茨，你喜歡把IE的字體的大小設(shè)置成一個(gè)蘋果那么大（呵呵，夸張了）。正式由于瀏覽器默認(rèn)樣式的存在，所以基本所有的CSS應(yīng)用時(shí)為了統(tǒng)一絕大多數(shù)的默認(rèn)樣式，都會(huì)對(duì)其進(jìn)行重載。所以，css的框架里都會(huì)有一個(gè)reset.css重置一些默認(rèn)的，及你想要統(tǒng)一的一些樣式。

用戶樣式：用戶是指訪問網(wǎng)站的人，由于瀏覽器會(huì)提供一些輔助功能，所以，用戶可以調(diào)整一些網(wǎng)站作者沒有定義的樣式屬性，比如調(diào)整字體為紅色，但這個(gè)前提是作者沒有定義過字體的顏色，如果定義了，那么用戶調(diào)整將不起作用。（如：IE: “工具”>”Internet選項(xiàng)”>“輔助功能“> “用戶樣式表”）。

作者樣式：就是指網(wǎng)站設(shè)計(jì)者設(shè)計(jì)的css樣式，根據(jù)樣式放置方式的不同，作者樣式分為內(nèi)聯(lián)樣式，外聯(lián)樣式，內(nèi)嵌樣式。三者的優(yōu)先級(jí)是：內(nèi)聯(lián)>內(nèi)嵌>外聯(lián).

內(nèi)聯(lián)樣式：即行內(nèi)樣式，在元素的style屬性中設(shè)置的樣式

外聯(lián)樣式：在header中用link標(biāo)簽導(dǎo)入的樣式

內(nèi)嵌樣式：在header中用<style>標(biāo)簽編寫的樣式

!important規(guī)則：在任何聲明里利用這個(gè)規(guī)則聲明的，將擁有更高的優(yōu)先級(jí)。

樣式應(yīng)用規(guī)則：指通過一種選擇的規(guī)則，在編寫的樣式中確定哪種將最終應(yīng)用在元素上，顯示出最后的效果。規(guī)則應(yīng)用的對(duì)象是樣式的某個(gè)屬性，而不是用{ }括起來的內(nèi)容，當(dāng)樣式的某一個(gè)方面的屬性在不同的樣式中定義時(shí)，將按該規(guī)則進(jìn)行選擇。

???????? CSSOO:個(gè)人對(duì)CSS的一種相似于面向?qū)ο髴?yīng)用的簡(jiǎn)寫，指css的抽象，繼承，重載，實(shí)例的面向?qū)ο蠡囊环N規(guī)則。

???????? CSSOO的對(duì)象及實(shí)例化：一個(gè)具有一定語義結(jié)構(gòu)的html代碼塊模型，及引用的CSSOO的類的樣式規(guī)則應(yīng)用。將這樣的一個(gè)代碼塊和規(guī)則拷貝到頁面中使用的過程，可以引申為對(duì)象的實(shí)例化的過程。

???????? 表象樣式：諸如字體大小，顏色方面的樣式屬性。

???????? 結(jié)構(gòu)樣式：諸如長(zhǎng)，寬，絕對(duì)定位，相對(duì)定位，等等確定元素將在屏幕的某個(gè)位置呈現(xiàn)的屬性。如width,height，padding， margin， border-width， float,display, clear，position等等

?

轉(zhuǎn)載于:https://www.cnblogs.com/tenero/archive/2008/05/29/1209772.html

總結(jié)

以上是生活随笔為你收集整理的【原创】CSSOO的思想及CSS框架的应用（未整理完）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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