CSS層分離如何用技巧編程_CSS層分離編程有哪些技巧

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

　　CSS層分離編程的技巧

　　一、命名規則

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

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

　　二、BEM

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

　　CSS Code復制內容到剪貼板

　　.block {}

　　.block__element {}

　　.block--modifier {}

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

　　CSS Code復制內容到剪貼板

　　.product-details {}

　　.product-details__price {}

　　.product-details__price--sale {}

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

　　三、CSS Code復制內容到剪貼板

　　.product-details {}

　　.product-details__title {}

　　.product-details__title--small {}

　　像大多數的多用途類一樣，在項目一開始的時候意圖很明顯，但是當一個設計改變的時候常常會導致矛盾的CSS。

　　四、SUIT

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

　　CSS Code復制內容到剪貼板

　　.u-utility {}

　　.ComponentName {}

　　.ComponentName--modifierName {}

　　.ComponentName-descendantName {}

　　.ComponentName.is-someState {}

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

　　CSS Code復制內容到剪貼板

　　.ProductDetails {}

　　.ProductDetails-price {}

　　.ProductDetails-title--sale {}

　　五、加前綴

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

　　CSS Code復制內容到剪貼板

　　.s-product-details {}

　　.t-product-details {}

　　.js-product-details {}

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

　　CSS注釋部分編程

　　一、CSS注釋

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

　　CSS注釋的開始使用/*,結束使用*/

　　二、CSS注釋語法

　　CSS Code復制內容到剪貼板

　　/* 注釋內容 */

　　示例

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

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

　　.dreamduwhite12px

　　{

　　color:white;

　　font-size:12px;

　　}

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

　　.dreamdublack16px

　　{

　　color:black;

　　font-size:16px;

　　}

　　/* ----------文字樣式結束---------- */

　　三、風格建議

　　我使用行寬不超過 80 字節的文檔塊風格注釋：

　　CSS Code復制內容到剪貼板

　　/**

　　* 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.

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

　　四、注釋的拓展用法

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

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

　　2.代碼標簽

　　3.繼承標記

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

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

　　CSS如何編寫

　　1.重置

　　首先，很認真的告訴你，總是要重置某些分類。無論你是使用 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推薦更有效的使用(重置樣式表)，而你不要只是使用他的重置樣式表，將它拖放到你的項目中。調整它(的重置樣式表)，建立屬于自己的重置樣式 表。

　　噢，請停止使用：

　　* { margin: 0; padding: 0; }

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

　　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不能更快的找到右邊距屬性。根據字母排序你的元素屬性。一致的創建你的CSS，將幫助你節省花費在尋找一個特殊屬性的時間。

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

　　3.組織

　　你應該組織你的樣式表以致相關的內容靠在一起，更簡單的找到想要的。使用更有效的注解。舉個例子，這是我如何構造我的層疊樣式表：

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

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

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

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

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

　　定義簡單的風格，好像浮動的某一側, 移除元素的下邊距, 等

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

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

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

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

　　定義所有Hearder元素

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

　　定義所有內容框內的元素

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

　　定義所有Footer的元素

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

　　定義其他的選擇器。

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

　　4.一致性

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

　　就我個人而言，我將使用兩者結合的方式。如果一個選擇器超過了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.從正確的地方開始

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

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