隨著CSS的發(fā)展，使用CSS有語義化的命名約定和CSS層的分離，將有助于它的可擴展性，性能的提高和代碼的組織管理。下面由學(xué)習(xí)啦小編為大家整理的CSS層分離編程的技巧，希望大家喜歡!

　　CSS層分離編程的技巧

　　一、命名規(guī)則

　　一個可靠命名規(guī)則的重要性是不可忽視的。就像組織結(jié)構(gòu)帶來的好處一樣，這里有很多性能上的優(yōu)勢讓你能夠堅持地，有責(zé)任感地去命名你的選擇器。

　　正確使用任何規(guī)則將會在大型項目減少與CSS相關(guān)的憂慮而發(fā)揮關(guān)鍵的作用

　　二、BEM

　　最流行的命名規(guī)則之一就是BEM(block：塊，Element：元素，Modifier：修飾符)。通過給每個元素添加它的父級block模塊作為前綴，使得目標(biāo)的安全性變得更加簡單了。BEM還有助于消除頁面和body類對嵌套或者附加樣式依賴。

　　CSS Code復(fù)制內(nèi)容到剪貼板

　　.block {}

　　.block__element {}

　　.block--modifier {}

　　上面的例子展示了一個BEM項目的類結(jié)構(gòu)，下劃線(__)被用來區(qū)分元素，而用連字符(--)是用來修飾元素的。下面是一個現(xiàn)實世界的例子...

　　CSS Code復(fù)制內(nèi)容到剪貼板

　　.product-details {}

　　.product-details__price {}

　　.product-details__price--sale {}

　　BEM中的一個圈套是引誘在修飾部分中添加多種用途的樣式類。大的，小的，綠色的或者醒目的等修飾選擇器被提出引入到標(biāo)記中，這在不久的將來將會發(fā)生改變。

　　三、CSS Code復(fù)制內(nèi)容到剪貼板

　　.product-details {}

　　.product-details__title {}

　　.product-details__title--small {}

　　像大多數(shù)的多用途類一樣，在項目一開始的時候意圖很明顯，但是當(dāng)一個設(shè)計改變的時候常常會導(dǎo)致矛盾的CSS。

　　四、SUIT

　　Suit起源于BEM，但是它對組件名使用駝峰式和連字號把組件從他們的修飾和子孫后代中區(qū)分出來。

　　CSS Code復(fù)制內(nèi)容到剪貼板

　　.u-utility {}

　　.ComponentName {}

　　.ComponentName--modifierName {}

　　.ComponentName-descendantName {}

　　.ComponentName.is-someState {}

　　通過消除潛在的混亂連字符號連接元素名來使得選擇器的可讀性更強。

　　CSS Code復(fù)制內(nèi)容到剪貼板

　　.ProductDetails {}

　　.ProductDetails-price {}

　　.ProductDetails-title--sale {}

　　五、加前綴

　　如果你不想使用如此嚴(yán)格或者復(fù)雜的命名規(guī)則，給每一個選擇器加前綴同樣可以達到這樣的效果。

　　CSS Code復(fù)制內(nèi)容到剪貼板

　　.s-product-details {}

　　.t-product-details {}

　　.js-product-details {}

　　這種方法使得它很容易的在表象類中辨別結(jié)構(gòu)類但是只是簡單的寫和理解。在上面的例子中的結(jié)構(gòu)屬性將會被應(yīng)用到s-product-details選擇器中。主題屬性將應(yīng)用于t-product-details選擇器。

　　CSS注釋部分編程

　　一、CSS注釋

　　就像HTML教程中描述的一樣,在CSS文檔中注釋也起到很重要的作用,可以幫助我們記起CSS的含義,加載在HTML文檔的位置等.

　　CSS注釋的開始使用/*,結(jié)束使用*/

　　二、CSS注釋語法

　　CSS Code復(fù)制內(nèi)容到剪貼板

　　/* 注釋內(nèi)容 */

　　示例

　　/* ----------文字樣式開始---------- */

　　/* 夢之都白色12象素文字 */

　　.dreamduwhite12px

　　{

　　color:white;

　　font-size:12px;

　　}

　　/* 夢之都黑色16象素文字 */

　　.dreamdublack16px

　　{

　　color:black;

　　font-size:16px;

　　}

　　/* ----------文字樣式結(jié)束---------- */

　　三、風(fēng)格建議

　　我使用行寬不超過 80 字節(jié)的文檔塊風(fēng)格注釋：

　　CSS Code復(fù)制內(nèi)容到剪貼板

　　/**

　　* This is a docBlock style comment

　　*

　　* This is a longer description of the comment, describing the code in more

　　* detail. We limit these lines to a maximum of 80 characters in length.

　　*

　　* We can have markup in the comments, and are encouraged to do so:

　　*

　　Lorem

　　*

　　* We do not prefix lines of code with an asterisk as to do so would inhibit

　　* copy and paste.

　　在注釋中應(yīng)當(dāng)盡量詳細(xì)描述代碼，因為對你來說清晰易懂的內(nèi)容對其他人可能并非如此。每寫一部分代碼就要專門寫注釋以詳解。

　　四、注釋的拓展用法

　　注釋有許多很高級的用法，例如：

　　1.準(zhǔn)修飾選擇器(Quasi-qualified selectors)

　　2.代碼標(biāo)簽

　　3.繼承標(biāo)記

　　4.準(zhǔn)修飾選擇器(Quasi-qualified selectors)

　　你應(yīng)當(dāng)避免過分修飾選擇器，例如如果你能寫 .nav{} 就盡量不要寫 ul.nav{}。過分修飾選擇器將影響性能，影響 class 復(fù)用性，增加選擇器私有度。這些都是你應(yīng)當(dāng)竭力避免的。

　　CSS如何編寫

　　1.重置

　　首先，很認(rèn)真的告訴你，總是要重置某些分類。無論你是使用 Eric Meyer Reset、YUI Reset或者你自己編寫的重置代碼，只要使用就對了。

　　它能很簡單的移除所有元素的填充(padding)和邊距(margin)：

　　html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,

　　pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

　　Eric Meyer Reset和YUI Reset都是非常強大的，但是對于我而言，它們走的太遠了。我覺得你最終需要重置一切，然后重新定義所有元素的屬性。這就是為什么Eric Meyer推薦更有效的使用(重置樣式表)，而你不要只是使用他的重置樣式表，將它拖放到你的項目中。調(diào)整它(的重置樣式表)，建立屬于自己的重置樣式 表。

　　噢，請停止使用：

　　* { margin: 0; padding: 0; }

　　花更多的時間去制作它，當(dāng)你移除了填充(padding)你認(rèn)為單選按鈕會發(fā)生什么變化?表單元素有時能夠做些時髦的事情，所以最有效的方式就是將他們獨立。

　　2.排序

　　一個小的測試

　　這個例子就是要讓你思考如何更快的找到右邊距屬性?

　　Example#1

　　div#header h1 {

　　z-index: 101;

　　color: #000;

　　position: relative;

　　line-height: 24px;

　　margin-right: 48px;

　　border-bottom: 1px solid #dedede;

　　font-size: 18px;

　　}

　　Example#2

　　div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101;}

　　你不能告訴我Example#2不能更快的找到右邊距屬性。根據(jù)字母排序你的元素屬性。一致的創(chuàng)建你的CSS，將幫助你節(jié)省花費在尋找一個特殊屬性的時間。

　　我知道一些人用這樣的方法去組織代碼，其他人又用另一種方法去組織，但是在我的公司，我們協(xié)商一致做出決定，所有的代碼都將按照字母排序來組織。通過這樣組織代碼與其他人協(xié)同工作一定是有幫助的。當(dāng)我碰到屬性沒有按照字母排序的層疊樣式表我每一次都會退縮。

　　3.組織

　　你應(yīng)該組織你的樣式表以致相關(guān)的內(nèi)容靠在一起，更簡單的找到想要的。使用更有效的注解。舉個例子，這是我如何構(gòu)造我的層疊樣式表：

　　/*****Reset*****/

　　移除元素的填充(padding)和邊距(margin)。

　　/*****Basic Elements*****/

　　定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等.

　　/*****Generic Classes*****/

　　定義簡單的風(fēng)格，好像浮動的某一側(cè), 移除元素的下邊距, 等

　　當(dāng)然，它們大部分都與我們希望的語義不相關(guān),但是它們是高效處理代碼所必須的。

　　/*****Basic Layout*****/

　　定義基本的模板: header, footer等. 幫助定義網(wǎng)頁布局的基本元素

　　/*****Header*****/

　　定義所有Hearder元素

　　/*****Content*****/

　　定義所有內(nèi)容框內(nèi)的元素

　　/*****Footer*****/

　　定義所有Footer的元素

　　/*****Etc*****/

　　定義其他的選擇器。

　　通過注解和歸類相似元素的分組，將更快的找到你想要的。

　　4.一致性

　　無論你決定使用什么方式去編寫代碼，保持一致。我已經(jīng)對全部放在1行VS多行的CSS編寫編寫方式的爭論感到乏味和疲倦。這是不需要爭辯的。每個人都有自己的觀點，所以選擇一種你喜歡的工作方式，并在所有的樣式表中保持一致。

　　就我個人而言，我將使用兩者結(jié)合的方式。如果一個選擇器超過了3個屬性，我將截斷它采用多行的方式編寫。

　　div#header { float: left; width: 100%; }

　　div#header div.column {

　　border-right: 1px solid #ccc;

　　float: rightright;

　　margin-right: 50px;

　　padding: 10px;

　　width: 300px;

　　}

　　div#header h1 { float: left; position: relative; width: 250px; }

　　所以找到你喜歡的工作方式然后保持一致。

　　5.從正確的地方開始

　　在完成標(biāo)記語言之前不要去嘗試靠近你的樣式表。

　　當(dāng)我準(zhǔn)備分割一張網(wǎng)頁的時候，創(chuàng)建CSS文件之前，我需要預(yù)覽并且標(biāo)記body開標(biāo)簽到body的閉合標(biāo)簽之間的所有文檔。我不會增加額外的 DIV ,ID,或者類選擇器。我將會添加一些一般的DIV，就好像hearder、content、footer.因為我知道這些東西是現(xiàn)實存在的。