css常用框架經驗分享
css框架是一系列 css 檔案的集合體，包含了基本的元素重置，頁面排版、網格布局表單樣式、通用規則等**塊,用於簡化web前端開發的工作，提高工作效率。比如：yui,blueprint,bootstrap,elastic css……
或許是因為這點現在好多人都用css 框架進行快速建站。
當然對於一些大型的專案，可能會很難照搬某些框架直接使用的，因為直接使用會帶來一些限制或者冗餘的問題。
1. 目錄組織
在目錄組織的分析上我們參考了 bootstrap , blueprint , yui , yaml 四個框架的組織方式
當使用乙個框架時，我們一般會把所需框架本身的樣式鏈到頁面中，然後在它的基礎上進行修改。所以框架本身所帶的樣式可以理解為
旋渦磁力幫浦
基礎樣式。即我們平時所說的全域性樣式+元件樣式。
可以看到，在目錄架構上4個框架基本都是遵循基本樣式+使用者定義擴充套件樣式的常規方式進行組織。
然而，如果按 bootstrap 做法的話，可能會出現把不常用元件樣式也包含在全域性樣式中一併引入，如果把
旋渦磁力幫浦
元件也寫在全域性 css 中，最好確保該元件出現頻率較高才引入，避免不必要的頻寬浪費。
關於 hack：
對於針對低版本瀏覽器所寫的 hack，對它的處理方式，blueprint 和 yaml 都是使用單獨引入 hack 檔案的形式進行處理，筆者也嘗試過這樣的做法。
個人覺得這種方式的好處是可以避免給高階瀏覽器帶來冗餘**，而且通過條件判斷引入 css 也不會給高階瀏覽器帶來額外的請求。
這種方式比較適用於，高低階瀏覽器本來就刻意設計成有較大差別的情況下，即 hack 比較多的時候才使用。不然就為了十來行 hack 而多引入乙個檔案的話似乎也不太可取。
2. css 規範
a. 字首
框架中公用模組都有字首，分別有以下3個思想：
1. yaml , yui ：無論如何都是統一的標識開頭，再加上改模組名稱。
2. bootstrap：直接模組名稱，這方式需要定義關鍵字。公用模組是 button 都以 btn – 開頭， image 則以 img- 開頭。
3. nec ：單字母開頭來標識元件。
一般來說應用乙個框架，我們先引入框架的樣式，再在之上覆蓋上自己的樣式，所以可以把框架看作是我們的基礎css。
我們可以借鑑框架的字首規範來規劃我們的基礎 css 字首，根據自己的專案實際情況採取不同的方案。
b. 類的劃分
類的劃分方式在框架中主要有2種標準，分別為：以【元件為粒度】，和以【屬性為粒度】。
1. 元件為粒度：把元件的所有樣式封裝在乙個類名中，呼叫類名即可使用該元件。
2. 屬性為粒度：需要屬性的時候，呼叫對應類名拼裝。
在我們日常專案中，以屬性對類名進行劃分比較少見，因為一直遵循的都是「結構、樣式、行為」分離的原則，力求降低三者的耦合度。
然而以這種方式劃分在一些特定情況下也不是完全不可取。
例如對於一些元素的隱藏，如果沒提供相關的類名的話，在js開發階段開發就會直接內聯 style 在對應的元素上（這將會觸發 repaint/reflow），所以更好的方式是和js開發約定乙個類名觸發顯示/隱藏的動作，在這種情況下，給 display: none 劃分乙個特定的類名，供給開發呼叫就會顯得很實用了。
所以，更重要的是我們對所在的實際情況進行分析，並給出最佳的解決方案。
c. 元件類名組合方式
元件的樣式，基本都是 基礎類名+擴充套件類名 的套路來進行組合的變化。
但在選擇符方面可以有3種方式， 目前最多框架使用的是：多類選擇，通過修改 html 的類名組合，實現還原。
以按鈕樣式的實現為例：
d. 高階 css 選擇器
在對 bootstrap 進行分析的過程中，發現 bootstrap 定義了一系列的icon，這些 icon 的類名全部都是以 icon- 為字首。
而在 css 中，bootstrap 用到了子串匹配屬性選擇器。
[class^="icon-"]
使用這個的好處是，對於 icon 類的標籤，我們再也不需要對其加乙個對於 icon 的公用類名，只需要類名是以 icon- 開頭就可以匹配所有 icon ，省了乙個類名。
使用這種方式可以降低一定的成本，但是只在 ie7+ 瀏覽器才適用，如果要使用該類選擇器的話請考慮是否需要相容 ie6。
雖然 ie6 不支援，但是高階 css 選擇器的確十分吸引，並且可用於移動端，所以特此提一下。
3. 圖形
在參考的 css 框架中，它們會提供一些簡單的圖形元素， 但是實現的方式也有彼此不同之處。
但是共同點是，現今較新的框架，對於一些簡單的效果，都會使用 css3 實現一些簡單的漸變，對低版本 ie 進行優雅降級。
4. 應用方式
在參考例項是怎樣使用這些框架的方式上，基本和我們平時專案使用方式一致。
在應用方式上，一般有兩種方式。
1. 對於以元件為粒度的樣式：
按照 元件的 html 結構 來拼合自己的頁面模組，再輔助新增 自定義的類名 來控制其個性化定義。
2. 對於以屬性為粒度的樣式：
按所需要的樣式對應類名進行拼接。
下面可以看幾個簡單的例子：
1. 以元件為粒度：
對於元件的覆蓋，採取常規的自定義類名覆蓋樣式，此處不再贅述。
2. 以屬性為粒度：
可以看到，若需要樣式是屬性以粒度，即把對應類名調入即可，但是在實際專案中，這種方式由於靈活度不夠，並且沒有做到結構與樣式分離，實際專案中比較少見這種用法。
而對於功能性的動作，例如顯示/隱藏元素，可以靈活使用這種方式，把所需樣式寫到乙個特定類名中供給js呼叫，避免直接寫入
style 導致 reflow/repaint。
5. 小建議
對於目錄組織：
目錄組織
1、把常用的基礎樣式壓縮合成乙個檔案。
2、把不必現元件樣式抽離成單獨 css，按需載入。
hack
根據實際情況，可考慮把針對 ie6 的 hack 檔案單獨分出來。
對於 css 規範：
css 字首
可考慮嘗試 nec 的方式，約定 「單字母_***」為公用樣式的標識，取消單一的公用字首，通過以不同字母作為頂級字首，對公用模組進行劃分。
類的劃分
可考慮約定統一幾個功能性的類名（以屬性為粒度的類名），例如元素隱藏的類名，供給js呼叫。
高階 css 選擇器
在對移動端頁面進行重構時可以考慮使用更高階的 css 選擇器。
對於圖形：
考慮與設計師約定，視覺效果在可接受範圍內，部分效果使用 css3 實現，對低階瀏覽器實現優雅降級。
學習前端css經驗分享
自己學習前端大概半個月了，零零散散，但相對與平時也是很不錯的一段學習時間。在寫正式部落格之前，做一下推廣，我廠的前端工程師，開發工具現在都是這樣的sublime webstorm clam yo glup，好，就這樣，具體作用，大家可以自行學習下，如有機會，下次會把自己的使用心得記錄下，下面進入正題...
CSS精靈技術及其優化經驗分享
由於網速的限制，頁面開發者都喜歡把網頁裡面的位元組數控制的非常小，往往在乙個資料夾裡散落著n多的小碎圖。隨著網路技術的發展，網速的提公升，大家越來越重視頁面的載入速度，頁面效率問題，過去的那些小圖便成為了前端開發者的眼中釘，因為每載入一張都會產生一次瀏覽器請求數，發起的請求數越多那麼頁面載入的速度也...
css 漫談 原理與經驗之分享
中山裝修網 要說css會的人很多，因為簡單方便。只要你熟悉一些基本的屬性基本上布局乙個頁面是沒有太大的困難的。不過很多人用了很久的css卻從來也不知道css是怎麼去工作的，寫出來的css瀏覽器是怎麼樣去解析的呢？所以往往在一定階段之後，就變成了進一步提高css水平的乙個瓶頸。我將從以下進行分析。第 ...