CSS樣式表的作用及特點

CSS可以很方便的用來控制網(wǎng)頁的外觀。主要有以下特點：

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)大興免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

1.可以同時更新多個網(wǎng)頁的樣式。

2.使網(wǎng)頁的表示層與結(jié)構(gòu)層徹底分離

3.大大減小了網(wǎng)頁文件的大下

4.加快了網(wǎng)頁的加載速度

現(xiàn)在用CSS來布局網(wǎng)頁已經(jīng)是一種潮流，如果要向網(wǎng)頁設計方面發(fā)展，必須精通CSS。

我是如何對網(wǎng)站CSS進行架構(gòu)的 轉(zhuǎn)自張鑫旭

關(guān)于如何處理網(wǎng)站的CSS，各個網(wǎng)站做法都不一樣，這隨著網(wǎng)站的性質(zhì)及大小不同，公司前人留下的規(guī)范不同，以及CSS工程師的眼界不同而有所不同。由于我從業(yè)經(jīng)歷有限，所知甚淺，只能說些膚淺業(yè)余的內(nèi)容，不準確之處歡迎指出。

就CSS文件而言，有的網(wǎng)站分為header.css, body.css, footer.css，不做評價；

有的分為reset.css, main.css, content.css，不做評價；

有的分為common.css,然后每個種類的頁面一個CSS，例如home.css(主頁), album.css(相冊頁面),message.css(站內(nèi)信頁面),blog.css(日志頁面)等，不做評價；

有的分為base.css，然后每個活動頁面一個單獨的CSS，等，不做評價；

還有的直接將CSS嵌在頁面中，而非外部鏈接調(diào)用，不做評價。

這些不同的處理方法，沒有什么正確與錯誤之分，只有適合不適合。每種方法都有其存在的道理，所以我是沒有資格做任何評價的。

就每個CSS文件的內(nèi)容而言，一般都會有一段長長的CSS reset（樣式重置），然后就是有著統(tǒng)一前綴，命名較長的樣式內(nèi)容，就像人人網(wǎng)的部分樣式截圖：

使用長命名，統(tǒng)一的父級命名避免樣式?jīng)_突時無可厚非的。確實！曾經(jīng)我也如此。

三、我是如何對網(wǎng)站CSS進行架構(gòu)的

首先關(guān)于CSS文件，我一般只使用一個文件，這無關(guān)于網(wǎng)站的大小，網(wǎng)站越大，某種意義上我這種做法的優(yōu)勢與潛力就會體現(xiàn)的越明顯。我這種單CSS文件的做法適合于web2.0的網(wǎng)站，例如像是SNS網(wǎng)站（開心、人人、白社會），嘀咕網(wǎng)，蝦米網(wǎng)，凡客這類網(wǎng)站，如果是門戶網(wǎng)站，sorry，鐵定不適合。

讓網(wǎng)站單CSS誰都會，關(guān)鍵是為何可以使用單CSS文件，這個CSS文件不會很大嗎，如果一個網(wǎng)站有400個頁面，那么這個CSS文件豈不要數(shù)百K。非也，在網(wǎng)站頁面風格一致，在web系統(tǒng)結(jié)構(gòu)良好的情況下，CSS文件可以控制的非常小，而且高性能，同時頁面擴展性也非常好。下面就開始一點一點的展示，內(nèi)容較多，需要慢慢來~~

1、整體概述

頁面布局與文章內(nèi)容顯示需要，我將整體架構(gòu)做成了一張圖片，見下圖：

2、關(guān)于CSS reset

CSS reset(css重置)基本上是不需要的，至少可以說80%的的CSS reset都是沒有必要的，反而增加了頁面CSS 的overwrite，尤其像開心網(wǎng)*{margin:0;}這樣子業(yè)余的做法更是要不得（反而破壞了很多UI的兼容性，比如說單復選框等）。我不是一概鄙棄CSS reset，有些常用標簽我也是會簡單重置一下的，而且會避免overwrite（樣式重寫），以保證樣式最精簡，渲染最高效。如下代碼示例：

body{

line-height:1.4;

color:#333;

font-family:arial;

font-size: 12px;background:white;}

input,textarea,select{font-size:12px;font-size:100%;font-family:arial;font-family:inherit;

}

body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{

margin:0;

}

h4,h5,h6{

font-size:1em;

}

ul,ol{

padding-left:0;

list-style-type:none;

}

/*image with no-border*/a img{border:0;}img{border:0;}

這就是我全部的CSS reset。就這些就足夠了，我是沒有遇到什么兼容性的問題，不要盲從于一些主流的做法，就這些，足夠了。

3、關(guān)于CSS通用樣式庫

完整的通用樣式庫如下（您可以根據(jù)自己的喜好重命名或是添加刪除部分樣式）：

.l{float:left;}.r{float:right;}.cl{clear:both;}

.n{font-weight:normal; font-style:normal;}.b{font-weight:bold;}.i{font-style:italic;}

.fa{font-family:Arial;}.fg{font-family:Georgia;}.ft{font-family:Tahoma;}.fl{font-family:Lucida Console;}.fs{font-family:'宋體';}.fw{font-family:'微軟雅黑';}

.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}

.tdl{text-decoration:underline;}.tdn,.tdn:hover,a.tdl:hover{text-decoration:none;}

.g0{color:#000000;}.g3{color:#333333;}.g6{color:#666666;}.g9{color:#999999;}.red{color:red;}.wh{color:white;}

.f0{font-size:0;}.f10{font-size:10px;}.f12{font-size:12px;}.f13{font-size:13px;}.f14{font-size:14px;}.f16{font-size:16px;}.f20{font-size:20px;}.f24{font-size:24px;}

.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vt{vertical-align:top;}.vn{vertical-align:-2px;}.vimg{margin-bottom:-3px;}

.m0{margin:0;}.ml1{margin-left:1px;}.ml2{margin-left:2px;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml20{margin-left:20px;}.mr1{margin-right:1;}.mr2{margin-right:2px;}.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr20{margin-right:20px;}.mt1{margin-top:1;}.mt2{margin-top:2px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt20{margin-top:20px;}.mb1{margin-bottom:1px;}.mb2{margin-bottom:2px;}.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb20{margin-bottom:20px;}.ml-1{margin-left:-1px;}.mt-1{margin-top:-1px;}

.p1{padding:1px;}.pl1{padding-left:1px;}.pt1{padding-top:1px;}.pr1{padding-right:1px;}.pb1{padding-bottom:1px;}.p2{padding:2px;}.pl2{padding-left:2px;}.pt2{padding-top:2px;}.pr2{padding-right:2px;}.pb2{padding-bottom:2px;}.pl5{padding-left:5px;}.p5{padding:5px;}.pt5{padding-top:5px;}.pr5{padding-right:5px;}.pb5{padding-bottom:5px;}.p10{padding:10px;}.pl10{padding-left:10px;}.pt10{padding-top:10px;}.pr10{padding-right:10px;}.pb10{padding-bottom:10px;}.p20{padding:20px;}.pl20{padding-left:20px;}.pt20{padding-top:20px;}.pr20{padding-right:20px;}.pb20{padding-bottom:20px;}

.rel{position:relative;}.abs{position:absolute;}

.dn{display:none;}.db{display:block;}.dib{-moz-inline-stack:inline-block; display:inline-block;}.di{display:inline;}

.ovh{overflow:hidden;}.ovs{overflow:scroll;}.vh{visibility:hidden;}.vv{visibility:visible;}

.lh14{line-height:14px;}.lh16{line-height:16px;}.lh18{line-height:18px;}.lh20{line-height:20px;}.lh22{line-height:22px;}.lh24{line-height:24px;}

.fix{*zoom:1;}.fix:after,.fix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}.z{_zoom:1;}

上面的樣式是有簡單的分類的，某種意義上講，CSS庫與js庫屬于類似的東西。

關(guān)于此樣式庫，您可以直接在您的頁面頭部head標簽內(nèi)嵌入如下代碼：

link rel="stylesheet" href="" type="text/css" /

如果您想下載此CSS文件，您可以狠狠地點擊這里：(右鍵-[目標|鏈接另存為])。您可以隨意修改，如果能保留我的一個個人信息，那真是感激不盡~~

4、網(wǎng)站CSS樣式庫

這里的樣式是根據(jù)當前實際的項目內(nèi)容指定的。例如，文字鏈接顏色是什么，文字鏈接經(jīng)過的樣式是什么；一些常用的背景色樣式，常用的邊框樣式等，以及一些高寬等。按照我的經(jīng)驗，網(wǎng)站CSS樣式庫又可以架構(gòu)為以下幾部分：

①網(wǎng)站常見顏色，尤其是鏈接色

②網(wǎng)站常見背景色（我習慣用bg+顏色前2字母表示，例如.bgf7表示background:#f7f7f7;）

③網(wǎng)站常見邊框色，這里類似于CSS 通用庫中的margin屬性，需拆分，例如.bbdd表示border-bottom:1px solid #ddd;每人的命名習慣不一樣，但是盡量簡單為好，甚至您可以像Google一樣，直接兩個字母（大小寫混搭）表示。另外，一定要告知設計師，邊框取色不宜多，不能憑感覺，要有所犧牲，也就是如果之前使用了#cecece的邊框色，后面的即使使用#d0d0d0更好看，請使用#cecece代替，這就是團隊協(xié)作。

④網(wǎng)站遺留的單margin屬性，例如，某一div留白較大，有個單獨的margin-top:35px的屬性，ok，這個屬性請放在網(wǎng)站CSS樣式庫中，以.mt35{margin-top:35px;}保留，以供之后類似布局或需要的地方使用。

⑤網(wǎng)站遺留的單padding屬性，例如，雙欄自適應布局時，無論是浮動自適應，還是絕對定位自適應，都需要使用padding-left值，此時的padding-left多單樣式，可抽取出來，以網(wǎng)站樣式庫的形式存在。記住，是單屬性，且不可從通用元素中抽取單獨的padding值，否則是給自己挖火坑。

⑥網(wǎng)站遺留的width屬性，在流體布局思想下，寬度是有限的，是珍貴的，需好好利用。

⑦網(wǎng)站常用的一些height屬性，指一些高度值，例如height:18px; height:20px; height:24px; height:50px; height:100px; height:200px;等。

記住一個原則：網(wǎng)站通用的元素（按鈕，導航，選項卡的）的樣式千萬不能分離作為網(wǎng)站的CSS樣式庫。

5、網(wǎng)站通用小圖標樣式集

小圖標的樣式合并是普遍處理的較好的，由于其規(guī)律可循，所以經(jīng)常在CSS文件較上的位置看到有關(guān)小圖標的CSS合并樣式，這在SNS網(wǎng)站中很是常見。一般合并樣式部分樣式為{background:url(xx.png) no-repeat;}，分離部分的樣式是{background-position:x, y;}，就實現(xiàn)而言，我覺得沒有多少說頭，只是命名有些自己的見解。在小圖標樣式命名的時候，我的建議是不要關(guān)聯(lián)圖片的內(nèi)容，比如說一個相冊的下圖標，不應該使用iAlbum這樣的命名。原因有三：

1. 思考圖片的命名殺死n多腦細胞

2. 命名較長，占用字節(jié)數(shù)，也就是CSS文件大小

3. 也是最重要的，后期的維護。設想下，如果日后相冊的圖標不再被使用了，原來相冊圖標的位置可以被其他小圖標（如RSS小圖標）替換嗎？理論上可以，實際上，我們除了必要的html替換，還需要重新修改圖標樣式的命名，即iAlbum→iRss的命名，而往往取而代之的做法是直接在后面添加新的圖標。

我目前的做法是使用一個不常用的標簽作為網(wǎng)站的小圖標專用標簽，例如s標簽，或是u標簽，我習慣將小圖標單獨為一個小圖標Sprite，每個圖標放在20*20像素的格子中。在這種情況下，我都是使用矩陣命名法。命名只關(guān)聯(lián)位置，例如，我使用u標簽作為整個網(wǎng)站的小圖標專用標簽，則按照圖標的位置（假設一行20個圖標），我會依次命名為：u00,u01,u02…u019,u10,u11,…u119…。這種命名的好處是不用關(guān)心到底哪個位置是那個圖標，不用擔心命名沖突，在小圖標位置以及內(nèi)容更換的情況下也無需重命名。

例如，上圖中標注的u113的意思其實是u(1,13)，這種小圖標命名的方法我稱之為“小圖標矩陣命名法”。此命名略有不足在于在使用小圖標時需要打開源文件或通過注釋準確查詢到對應的class。

6-10、網(wǎng)站通用樣式

這里的“網(wǎng)站通用樣式”可以說與“網(wǎng)站通用樣式庫”最為對立的兩部分。網(wǎng)站通用樣式專指“獨立元素”的通用樣式，所謂“獨立元素”指的是網(wǎng)站通用的導航，菜單，按鈕，選項卡，文本框裝飾，圖片裝飾，圓角處理等等。這些“獨立元素”的樣式千萬不能對其進行分離并歸入“網(wǎng)站通用樣式庫”中，否則，日后會給你留下無盡的痛苦的！

我?guī)缀鯊牟粚Π粹o或是導航進行定寬，都是寬度自適應，這樣，可以大大節(jié)約Sprite背景圖片以及CSS代碼的成本。以前多有探討，這里不多說了。

網(wǎng)站通用樣式的代碼量在整個CSS文件中所占據(jù)的比重是相當大的，如果您的CSS文件中發(fā)現(xiàn)CSS通用樣式只占整個CSS文件的一小部分，尤其網(wǎng)站項目較大時，那就需要引起警惕，可能最后的結(jié)果就是CSS文件超負荷，最后反而一團糟。

11、網(wǎng)站公共結(jié)構(gòu)樣式

所謂“網(wǎng)站的結(jié)構(gòu)樣式”主要指的是最外框div的樣式，一般限制網(wǎng)站的寬度(960~990不等)，還有就是網(wǎng)站的分欄布局樣式，這里的樣式僅僅針對主體結(jié)構(gòu)，例如left_part，或是right_part；還包括網(wǎng)站的頭部的一些公用結(jié)構(gòu)，底部的樣式結(jié)構(gòu)等。

我是強烈建議公共結(jié)構(gòu)僅僅定寬定高，設置浮動屬性，切不可在結(jié)構(gòu)樣式上添加margin或是padding屬性，這會使網(wǎng)站的公共結(jié)構(gòu)的重用性大大降低！

12、單頁面的精細結(jié)構(gòu)

如果上述11項您都架構(gòu)的非常好，那么您在編寫每個具體頁面的時候，就會非常輕松，非常迅速。因為80%~90%的樣式都可以從上面11項中直接拿來用（上述11項全部都是網(wǎng)站公用樣式）。

對于中型大型網(wǎng)站，我們可能要花3~4天甚至更多的時間分析頁面設計圖，處理CSS Sprite，架構(gòu)網(wǎng)站的CSS，這段時間不寫任何頁面，就是處理網(wǎng)站（可以說是）唯一的CSS文件。所謂“磨刀不誤砍柴功”，站在整站的角度上去思考CSS是非常重要的，這可以讓你避免迷路，有助于寫出精簡高效的樣式代碼。

當我們把1-11項都完成了，就開始著手寫頁面了，這時候，整個網(wǎng)站的頁面基本上都在你腦中了，您在下手的時候就會清除：我現(xiàn)在做的是哪個頁面，在整個網(wǎng)站中扮演著什么樣的地位，這個頁面的CSS對整個網(wǎng)站的CSS有什么影響，這里的樣式該怎么處理（分離，合并還是獨立）等。

一般而言，就我個人經(jīng)驗，每個頁面，即使這個頁面看上去很復雜，其代碼開銷也是非常小的。其新增的代碼開銷去處有三處：一是分離一些樣式歸入“網(wǎng)站CSS樣式庫”中；二是凡事使用的CSS Sprite的樣式與其他樣式進行合并；三就是一些精細的復雜的樣式，這些就是CSS文件的架構(gòu)的最后一部分“單頁面的精細結(jié)構(gòu)了”，何為單頁面的精細結(jié)構(gòu)，如下圖的樣式，就可以說是精細結(jié)構(gòu)，需要獨立出來新寫樣式（可適當分離，注意“適當”一詞）：

例如上圖鼠標經(jīng)過后顯示，紅色虛框樣式，剪刀，粗邊框投影，最優(yōu)惠標示，一些按鈕等就屬于精細結(jié)構(gòu)，我們需要在頁面上單獨寫一個樣式。雖然理論上，我們使用分離也是可以實現(xiàn)這個效果的，但是此時html代碼的開銷實在太大，根本就不適合使用分離，這里就該老老實實的寫樣式。這里的寫法，命名都應該跟隨內(nèi)容而不是屬性本身。我們可以在單一類別的頁面使用同樣的前端的前綴避免樣式?jīng)_突等~~

四、關(guān)于適用性

有些東西雖然看上去好，但是卻不適用。通過上述的CSS架構(gòu)，我可以把網(wǎng)站的樣式控制地非常的精簡與高效（當然，需要設計師與后臺工程師的通力配合），但是，對于別人，套用此架構(gòu)可能就沒有這樣的效果，可能反而會更糟。前面也提到了，這種架構(gòu)是我自己摸索出來的，是根據(jù)自己的寫法，布局思想，甚至性格等形成的，帶有明顯的個人印記。

比方說，我是個推崇自適應布局（流體布局）的人，是個十足的自適應控，但是，有很大一部分同行是固定布局（像素級兼容，有計算）。固定布局固然有其優(yōu)點，但是其CSS代碼的消耗量以及頁面的擴展性我是很詬病的，顯然，這是無法應用到我這里的架構(gòu)中的。

其次，不少CSS剛?cè)腴T的頁面開發(fā)工程師對CSS屬性理解不夠透徹，常會寫一些沒有必要的冗余代碼。對于他們而言，但CSS文件的架構(gòu)確實很吃力。

說實話，我對自己的這個CSS架構(gòu)的適應性都不看好，一是自己在表達方面的火候欠缺，沒有很好的展示架構(gòu)的精髓，二是因為此架構(gòu)本身需要有很多的控制，這種控制受制于設計師，網(wǎng)站頁面架構(gòu)，CSS工程師自身的功力，一旦樣式泛濫，這種架構(gòu)也就毫無意義，反而弄巧成拙；但是，一旦控制下來，那么網(wǎng)站就CSS性能這塊保證領(lǐng)先，而這些需要優(yōu)秀的有眼界的CSS工程師來掌控，需要優(yōu)秀的設計師，程序員通力協(xié)作。雖然全然套用我展示的這套架構(gòu)會由于不熟悉或是掌控不夠而產(chǎn)生問題，但是，里面一些概念，一些思想應該能有一定的啟示作用的，這也是本文的意義所在了。

我只是個初出茅廬的小生，我知道，很多真正功力深厚的前端開發(fā)人員有著更好的更廣泛適應的前端架構(gòu)，如果您有幸來到這里，歡迎分享您的一些見解與認識。還有，文中若有您覺得不合理的觀點，也非常歡迎通過評論或是郵件18612269127@163.com)的方式進行指正。我們需要在不斷的交流中提高的。

移動端常用的四個框架

1：weUI

官方網(wǎng)址：

官方介紹：WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設計,令用戶的使用感知更加統(tǒng)一。

優(yōu)點：

做為開發(fā)者的我們可以不用寫太多css，直接拿過來就可以用。組件都有點擊態(tài)，大大增加了用戶的體驗好感，高清屏幕下 border : 0.5

2：Frozen UI

專注于移動web的UI框架,基于騰訊手機QQ規(guī)范... FrozenUI提供的CSS組件是目前QQ會員前端開發(fā)組所用的通用樣式庫

官方網(wǎng)址：

優(yōu)缺點：

基礎樣式效果簡單色調(diào)清爽

3：MUI

最接近原生APP體驗的高性能前端框架，可多端發(fā)布到Appstore、Android市場、瀏覽器、微信公眾號、百度直達號及流應用

官方網(wǎng)址：

優(yōu)缺點：這個框架給我的吸引之處就是它的 UI 是以 IOS 為 主體設計的，當然它也補充了android特有UI樣式。并且MUI官方聲稱用來開發(fā)深入以后發(fā)現(xiàn)拿它做 APP 還能夠提高用戶使用流暢度但網(wǎng)址上對它的評價是一種深入骨髓的廉價感。

4：SUI Mobile

介紹 SUI Mobile 是一套基于 Framework7 開發(fā)的UI庫。它非常輕量、精美，阿里前端團隊出品的SUIMobile的前端UI庫，方便迅速搭建手機H5應用,也非常適合開發(fā)跨平臺Web App

官方網(wǎng)站

優(yōu)缺點：

兼容性好，能兼到 iOS 6.0+ 和 Android 4.0+

風格：炫酷的iOS風格功能強大的組件輕量的UI庫，開始使用，只需要幾個簡單的步驟

缺點：sui mobile會和jquery沖突:后期維護/編寫都很麻煩，開發(fā)人員以及離職，大半年都沒有維護了

Github：

Demo：

專注于開發(fā)的：

當前題目：關(guān)于css通用樣式庫的信息
標題鏈接：http://chinadenli.net/article9/dsijcih.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、企業(yè)網(wǎng)站制作、定制網(wǎng)站、標簽優(yōu)化、網(wǎng)站維護、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)