關於 css 編寫的問題

關於 css 編寫的問題
　　最近一直在做Css Lab，也一直在思考關於頁面設計的技術問題，以前對Html+css+js的認識很片面，很多不知道，都是因爲沒有好好的去研究，去分析，去編寫測試，今天主要說下關於Css編寫的問題，希望大家多多留言，我是拋磚引玉。
　　Css和其他程序一樣，都是有作用域這個概念，有全局、類局部作用這些方式。
　　舉個例子：
　　　　p{background:#f00;}/* 作用域 ：全局 */
　　　　.div p{color:#000;}/* 作用域：div類中*/ 
　　介紹下Css幾種編寫方式和權重對比
　　1）標籤：權值爲0,0,0,1
　　2）類：權值爲0,0,1,0
　　3）屬性選擇：權值爲0,0,1,1
　　4）ID：權值爲0,1,0,0
　　5）important的權值爲最高1,0,0,0
　　提示： 大家可以手動編寫幾個例子，去發現規律，歡迎跟帖。

　　通常編寫Css的時候，我們會遇到什麼樣的問題？下面是我總結的一些內容：
　　1、命名規則 
　　相信大家在編寫Css的時候，當項目比較大，內容比較多的時候，命名就是一件很頭痛的事情，而且一個塊裏面要表現不同狀態的樣式 ，這是有掌握命名規則是一把利器，能讓你工作起來事半功倍。大致如下：（轉載自：http://www.cssforest.org/blog/index.php?id=143，大家可以去這裏看，比較多的技術文章）

　　要避免當狀態改變時名稱失去意義，最常見的就是用於佈局的類名，如“left”、“right”，當左邊欄不再是左邊欄的時候，“left”這個名就沒有實際意義了。這與我們所推薦的“命名要有意義”就相違背了，使用序號就更加有問題了。好像沒錯，不過有好長一段 時間都有個問題讓我很煩惱，如果一個頁面中同個模塊出現一次以上，而且細節還不一樣，那後面出現的名稱應該叫什麼呢？難道“one”、“two”就不是序 號？其實我們要避免遇到的情況就是當狀態（表現）改變時，對應定義的類名不會失去意義。
　　所謂的狀態（表現）改變，有幾種情況：
HTML不變，樣式定義改變。如果命名使用了表示某一狀態的名稱，如“red“、“font14“等，必定會引起定義與命名不符的情況，對後繼的影響會造成比較大的影響。
樣式定義不變，HTML改變。HTML改變意味着類名可更換，也就是如果類名使用了表示某一狀態的名稱，反而更有利於修改。
樣式定義與HTML都改變。只需要考慮不要出現第一種情況的結果就可以了。
　　而實際情況並不是單純的某一種情況，更多的時候是混雜着出現的。
　　規則
　　[ 模塊前綴 ] _ 類型 _ ( 作用 | 狀態 ) n _ [ 位置 n ]
　　圖例說明：
( 必選 )：必需存在。
[ 可選 ]：可根據需要選擇。
|：多選一。
n：可有多個。
　　名詞說明：
　　模塊前綴
模塊定義時使用的前綴。
　　類型
定義類的內容類型。如輸入框、文本、段落等等。
　　作用
定義類的作用，用於對類型的補充。
　　狀態
定義類的狀態，用於對類型的補充。
　　位置
定義類所使用的位置，如首頁、導航等等，不排除使用左、右這樣的詞，但應儘量避免。
每項都可有自己的一個縮寫表，同一名稱的縮寫儘量統一。
所選用的單詞應選擇不過於具體表示某一狀態（如顏色、大小等）的單詞，以避免當狀態改變時名稱失去意義。
由不以數字開頭的小寫字母（a-z）、數字（0-9）組成。
確保類(.class)的重用性與對象(#id)的唯一性，id避免使用保留字。
　　例：
　　模塊前綴：
彈出 pop
公共 global,gb
標題 title,tit
提示 hint
菜單 menu
信息 info
預覽 pvw
Tips tips
導航 nav
　　類型：
按鈕 bt
文本 tx
段落 p
圖標 icon
input input
顏色 color,c
背景 bg
邊框 bor
　　作用：
設置 set
添加 add
刪除 del
操作 op
密碼 pw
導入 inc
　　狀態：
成功 suc
失敗 lost
透明 tran
　　位置：
公共 gb
邊框 bor
段落 p
彈出 pop
標題 title,tit
菜單 menu
內容 cont
導航 nav
中文解釋	命名	中文解釋	命名
文本輸入框	.input_tx	段落文本顏色	.c_tx_p
密碼輸入框	.input_pw	相冊彈出的設置層	.pop_set_photo
登錄密碼輸入框	.input_pw_login	日誌設置成功提示	.hint_suc_blogset
文本顏色	.c_tx	公共提示	.hint_gb
問幾個簡單的問題，可以幫助我們完成命名：
“什麼類型的定義？”——是個輸入框，input。
“類型補充說明”——如果一個詞說明不清楚，那麼補充說明類型，文本輸入框，input_tx。
“在哪使用？”——定義要使用的位置在哪？首頁的搜索文本輸入框，input_search_index。
　　結合“模塊化”相關的方法去定義，其實所需要定義的名稱並不需要很多。 如：“hint_tx”表示提示模塊的文字定義，“hit_tx_hint”表示提示裏文字強調的定義，至於是改變顏色還是加粗，這個就看不同提示模塊的需要了。


　　2、兼容性
　　兼容性算是一個非常大的問題，而且很讓人煩心，拿到視覺做的效果圖的時候，你會對整個頁面進行佈局的分析，怎麼去完整的按照視覺效果精度完成頁面設計是一項非常大的問題，所以我們要掌握Css hack的寫法，這樣對你的工作也是有很大的幫助，也能讓你覺得寫起來很輕鬆，達到這個目的我們就身心愉快了。
　　　　Css hack 終極寫法：
　　　
代碼
.e{
color:#FFF;/* FF,OP */
[;color:#0F0;]/* Sa,CH */
color:#FFF\9;/*IE6、7、8*/
*color:#FF0;/* IE7、6 */
_color:#F00;/* IE6 */
}
@media all and(min-width:0){
    .e{
        background-color:#FF5500;/* OP */
    }
}
複製代碼
　　3、模塊化
 　　Css模塊化是對Css代碼進行優化，減少重複，增強代碼複用性，便於移植。其實這些知識是需要一個過程慢慢體會的，任何事情都是這樣過來的，每一一步的飛躍，只能是一步一步的去完善。
　　模塊化的核心思想： 將HTML和CSS通過一定的規則進行分類、組合，以達到特定HTML、CSS在特定範圍內最大程度的複用。 有三個關鍵詞： 規則 、 特定範圍 、 最大程度的複用 。怎麼理解呢？（轉載：http://www.cssforest.org/blog/index.php?id=165）
　　規則
　　編寫模塊時需要遵循的規範
　　特定範圍
　　模塊可使用的範圍。與樣式的作用域有關，大部分模塊的使用範圍僅僅是某一個欄目或站點。
　　最大程度的複用
　　做最少的修改即可重複使用。很多同學都把“複用”理解成不用修改的直接使用，但在頁面製作中，由於實際的項目環境，基本是不可能做到“一個模塊走天下”的。不同的欄目會有不同的需求。

　　從實際出發，才能最終服務於實際。我們知道一個HTML標籤可以綁定多個樣式，所以我們可以這樣去定義一個模塊：
　　
<div class="class-a class-b class-c">
    ...
</div>
複製代碼
　　不少人已經知道這個方法了，而且還很形像的稱之爲“拼樣式”。這樣的定義很容易引出其它的問題，比如樣式類的個數多少個適合？樣式類如何命名？等等。下面講下我的方法，從前面我們學到的樣式作用域及模塊化的核心思想，我們可以把樣式進行一個分類，像這樣：
　　
.mode-a{/* 定義一個模塊 */}
.type-a{/* 模塊中的差異化定義 */}
.mode-name{/* 針對單個模塊的個性化定義 */}

<div class="mode-a type-a mode-name">
    ...
</div>


複製代碼

　　上面的“mode-a”，我稱它叫爲“基類”；“type-a”爲“擴展類”；“mode-name”爲“模塊名”，作用分別是：
　　基類
　　（基礎樣式）模塊的基礎表現。包含了模塊中大部分的狀態。
　　擴展類
　　（擴展樣式）用於對使用基類的模塊進行小範圍的修改
　　模塊名
　　模塊在某一作用域中的唯一名稱。
　　這裏有一個 簡單的例子可以幫助理解：
　　

代碼
<style type="text/css">
body{line-height:1;}
.copyright{position:absolute;right:20px;top:10px;height:200px;line-height:10px;}
.copyright a:link{color:#666666;text-decoration:none;}
.copyright a:hover{color:#CC9900;text-decoration:underline;}

.none{display:none;}

.demo{width:400px;padding:10px;font-size:12px;}
.demo p{margin:0;padding:0;}
/* S 提示條 基類 */
.mode_hint{position:relative;margin:3px 0;padding:5px;border:1px solid #F0EFB2;background-color:#FFFEAB;color:#000000;_zoom:1;}
.mode_hint .op{position:absolute;right:8px;top:5px;}
.mode_hint .op a{color:#000000;}
/* E 提示條 基類 */
/* S 提示條 擴展類 */
.op_hint{border-color:#7B0006;background-color:#A00008;color:#FFFFFF;}
.op_hint .op a{color:#FFFFFF;}
/* E 提示條 擴展類 */
/* S 提示條 單獨定義 */
.hint_01{position:absolute;bottom:0;left:0;width:99%;}
.hint_02{position:absolute;top:45%;left:50%;width:400px;margin-left:-200px;}
/* E 提示條 單獨定義 */

</style>
</head>
<body>
<h1>模塊化的核心思想──頁面重構中的模塊化設計（四）</h1>
<p>一個消息類的Demo，“基類”包括了一個模塊中最基本的內容，包括各種狀態。</p>
<div class="demo">
    <h2>基類</h2>
    <!-- S 操作提示 -->
    <div class="mode_hint">
        <p>提示條基類</p>

        <div class="op"><a href="##">Close</a></div>
    </div>
    <!-- E 操作提示 -->
    <h2>擴展類</h2>
    <!-- S 操作提示 -->
    <div class="mode_hint op_hint">
        <p>擴展了的提示條。</p>

        <div class="op"><a href="##">Close</a></div>
    </div>
    <!-- E 操作提示 -->
    <!-- S 操作提示 -->
    <div class="mode_hint hint_02">
        <p>擴展了的提示條。</p>
        <div class="op"><a href="##">Close</a></div>

    </div>
    <!-- E 操作提示 -->
    <!-- S 操作提示 -->
    <div class="mode_hint op_hint hint_01">
        <p>擴展了的提示條。</p>
        <div class="op"><a href="##">Close</a></div>
    </div>
    <!-- E 操作提示 -->

</div>
複製代碼
　　繼續瞭解可以參閱（http://www.cssforest.org/blog/index.php?id=167）

　　掌握了以上這些知識，相信大家開發的時候會很輕鬆的，歡迎大家給意見，共同總結，共同進步