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

　　CSS層分離編程的技巧

　　一、命名規(guī)則

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

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

　　二、BEM

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

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

　　.block {}

　　.block__element {}

　　.block--modifier {}

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

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

　　.product-details {}

　　.product-details__price {}

　　.product-details__price--sale {}

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

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

　　.product-details {}

　　.product-details__title {}

　　.product-details__title--small {}

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

　　四、SUIT

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

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

　　.u-utility {}

　　.ComponentName {}

　　.ComponentName--modifierName {}

　　.ComponentName-descendantName {}

　　.ComponentName.is-someState {}

　　通過(guò)消除潛在的混亂連字符號(hào)連接元素名來(lái)使得選擇器的可讀性更強(qiáng)。

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

　　.ProductDetails {}

　　.ProductDetails-price {}

　　.ProductDetails-title--sale {}

　　五、加前綴

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

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

　　.s-product-details {}

　　.t-product-details {}

　　.js-product-details {}

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

　　CSS注釋部分編程

　　一、CSS注釋

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

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

　　二、CSS注釋語(yǔ)法

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

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

　　示例

　　/* ----------文字樣式開(kāi)始---------- */

　　/* 夢(mèng)之都白色12象素文字 */

　　.dreamduwhite12px

　　{

　　color:white;

　　font-size:12px;

　　}

　　/* 夢(mèng)之都黑色16象素文字 */

　　.dreamdublack16px

　　{

　　color:black;

　　font-size:16px;

　　}

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

　　三、風(fēng)格建議

　　我使用行寬不超過(guò) 80 字節(jié)的文檔塊風(fēng)格注釋?zhuān)?/p>

　　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ì)描述代碼，因?yàn)閷?duì)你來(lái)說(shuō)清晰易懂的內(nèi)容對(duì)其他人可能并非如此。每寫(xiě)一部分代碼就要專(zhuān)門(mén)寫(xiě)注釋以詳解。

　　四、注釋的拓展用法

　　注釋有許多很高級(jí)的用法，例如：

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

　　2.代碼標(biāo)簽

　　3.繼承標(biāo)記

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

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

　　CSS如何編寫(xiě)

　　1.重置

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

　　它能很簡(jiǎn)單的移除所有元素的填充(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都是非常強(qiáng)大的，但是對(duì)于我而言，它們走的太遠(yuǎn)了。我覺(jué)得你最終需要重置一切，然后重新定義所有元素的屬性。這就是為什么Eric Meyer推薦更有效的使用(重置樣式表)，而你不要只是使用他的重置樣式表，將它拖放到你的項(xiàng)目中。調(diào)整它(的重置樣式表)，建立屬于自己的重置樣式 表。

　　噢，請(qǐng)停止使用：

　　* { margin: 0; padding: 0; }

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

　　2.排序

　　一個(gè)小的測(cè)試

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

　　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é)省花費(fèi)在尋找一個(gè)特殊屬性的時(shí)間。

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

　　3.組織

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

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

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

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

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

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

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

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

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

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

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

　　定義所有Hearder元素

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

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

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

　　定義所有Footer的元素

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

　　定義其他的選擇器。

　　通過(guò)注解和歸類(lèi)相似元素的分組，將更快的找到你想要的。

　　4.一致性

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

　　就我個(gè)人而言，我將使用兩者結(jié)合的方式。如果一個(gè)選擇器超過(guò)了3個(gè)屬性，我將截?cái)嗨捎枚嘈械姆绞骄帉?xiě)。

　　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.從正確的地方開(kāi)始

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

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