CSS與Sass開發規範

這次給大家帶來CSS與Sass開發規範，使用CSS與Sass開發規範的注意事項有哪些，下面就是實戰案例，一起來看一下。

ID and class naming
ID和class(類)名總是使用可以反應元素目的和用途的名稱，或其他通用名稱。代替表象和晦澀難懂的名稱。
應該首選具體和反映元素目的的名稱，因為這些是最可以理解的，而且發生變化的可能性最小。
通用名稱只是多個元素的備用名，他們兄弟元素之間是一樣的，沒有特別意義。
區分他們，使他們具有特殊意義，通常需要為“幫手”。
儘管class(類)名和ID 的語義化對於電腦解析來說沒有什麼實際的意義，
語義化的名稱 通常是正確的選擇，因為它們所代表的資訊含義，不包含表現的限制。
不推薦

.fw-800 {  font-weight: 800;} .red {  color: red;}

推薦

.heavy {  font-weight: 800;} .important {  color: red;}

合理的避免使用ID
一般情況下ID不應該被應用於樣式。
ID的樣式不能被複用並且每個頁面中你只能使用一次ID。
使用ID唯一有效是確定網頁或整個網站中的位置。
儘管如此，你應該始終考慮使用class，而不是id，除非只使用一次。

不推薦

#content .title {  font-size: 2em;}

推薦

.content .title {  font-size: 2em;}

另一個反對使用ID的觀點是含有ID選取器權重很高。
一個只包含一個ID選取器權重高於包含1000個class(類)名的選取器，這使得它很奇怪。

// 這個選取器權重高於下面的選取器#content .title {  color: red;} // than this selector!html body p.content.news-content .title.content-title.important {  color: blue;}

CSS選取器中避免標籤名
當構建選取器時應該使用清晰， 準確和有語義的class(類)名。不要使用標籤選取器。 如果你只關心你的class(類)名
，而不是你的代碼元素，這樣會更容易維護。
從分離的角度考慮,在表現層中不應該分配html標記/語義。
它可能是一個有序列表需要被改成一個無序列表，或者一個p將被轉換成article。
如果你只使用具有實際意義的class(類)名，
並且不使用元素選取器，那麼你只需要改變你的html標記，而不用改動你的CSS。
不推薦

p.content > header.content-header > h2.title {  font-size: 2em;}

推薦

.content > .content-header > .title {  font-size: 2em;}

儘可能的精確
很多前端開發人員寫選取器鏈的時候不使用 直接子選取器（註：直接子選取器和後代選取器的區別）。
有時，這可能會導致疼痛的設計問題並且有時候可能會很耗效能。
然而，在任何情況下，這是一個非常不好的做法。
如果你不寫很通用的，需要匹配到DOM末端的選取器， 你應該總是考慮直接子選取器。
考慮下面的DOM:

<article class="content news-content">  <span class="title">News event</span>  <p class="content-body">    <p class="title content-title">      Check this out    </p>     <p>This is a news article content</p>     <p class="teaser">      <p class="title">Buy this</p>      <p class="teaser-content">Yey!</p>    </p>  </p></article>

下面的CSS將應用於有title類的全部三個元素。
然後，要解決content類下的title類 和 teaser類下的title類下不同的樣式，這將需要更精確的選取器再次重寫他們的樣式。
不推薦

.content .title {  font-size: 2rem;}

推薦

.content > .title {  font-size: 2rem;} .content > .content-body > .title {  font-size: 1.5rem;} .content > .content-body > .teaser > .title {  font-size: 1.2rem;}

縮寫屬性
CSS提供了各種縮寫屬性（如 font 字型）應該儘可能使用，即使在只設定一個值的情況下。
使用縮寫屬性對於代碼效率和可讀性是有很有用的。
不推薦

css 代碼:

border-top-style: none;font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;padding-bottom: 2em;padding-left: 1em;padding-right: 1em;padding-top: 0;

推薦
css 代碼:

border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;

0 和 單位
省略“0”值後面的單位。不要在0值後面使用單位，除非有值。
不推薦

css 代碼:

padding-bottom: 0px;margin: 0em;

推薦
css 代碼:

padding-bottom: 0;margin: 0;

十六進位標記法

在可能的情況下，使用3個字元的十六進位標記法。
顏色值允許這樣表示，
3個字元的十六進位標記法更簡短。
始終使用小寫十六進位數字。
不推薦

color: #FF33AA;

推薦

color: #f3a;

ID 和 Class（類） 名的分隔字元
使用連字號（中劃線）分隔ID和Class（類）名中的單詞。為了增強課理解性，在選取器中不要使用除了連字號（中劃線）以為的任何字元（包括沒有）來串連單詞和縮寫。
另外，作為該標準，預設屬性選取器能識別連字號（中劃線）作為單詞[attribute|=value]的分隔字元，
所以最好的堅持使用連字號作為分隔字元。
不推薦

.demoimage {}.error_status {}

推薦

#video-id {}.ads-sample {}

Hacks

避免使用者代理程式檢測以及CSS“hacks” – 首先嘗試不同的方法。通過使用者代理程式檢測或特殊的CSS濾鏡，變通的方法和 hacks 很容易解決樣式差異。為了達到並保持一個有效和可管理的程式碼程式庫，這兩種方法都應該被認為是最後的手段。換句話說，從長遠來看，使用者代理程式檢測和hacks
會傷害項目，作為項目往往應該採取阻力最小的途徑。也就是說，輕易允許使用使用者代理程式檢測和hacks 以後將過於頻繁。

聲明順序

這是一個選取器內書寫CSS屬性順序的大致輪廓。這是為了保證更好的可讀性和可掃描重要。

作為最佳實務，我們應該遵循以下順序（應該按照下表的順序）：

結構性屬性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表現性屬性：
background, border etc.
font, text
不推薦

.box {  font-family: 'Arial', sans-serif;  border: 3px solid #ddd;  left: 30%;  position: absolute;  text-transform: uppercase;  background-color: #eee;  right: 30%;  isplay: block;  font-size: 1.5rem;  overflow: hidden;  padding: 1em;  margin: 1em;}

推薦

.box {  display: block;  position: absolute;  left: 30%;  right: 30%;  overflow: hidden;  margin: 1em;  padding: 1em;  background-color: #eee;  border: 3px solid #ddd;  font-family: 'Arial', sans-serif;  font-size: 1.5rem;  text-transform: uppercase;}

聲明結束

為了保證一致性和可擴充性，每個聲明應該用分號結束，每個聲明換行。

不推薦

css 代碼:.test {  display: block; height: 100px}

推薦

css 代碼:

.test {  display: block;  height: 100px;}

屬性名稱結束

屬性名稱的冒號後使用一個空格。出於一致性的原因，
屬性和值（但屬性和冒號之間沒有空格）的之間始終使用一個空格。

不推薦

css 代碼:

h3 {  font-weight:bold;}

推薦

css 代碼:h3 {  font-weight: bold;}

選取器和聲明分離

每個選取器和屬性聲明總是使用新的一行。

不推薦

css 代碼:

a:focus, a:active {  position: relative; top: 1px;}

推薦

css 代碼:

h1,h2,h3 {  font-weight: normal;  line-height: 1.2;}

規則分隔

規則之間始終有一個空行（雙分行符號）分隔。

推薦

css 代碼:

html {  background: #fff;} body {  margin: auto;  width: 50%;}

CSS引號

屬性選取器或屬性值用雙引號（””），而不是單引號（”）括起來。
URI值（url()）不要使用引號。

不推薦

css 代碼:

@import url('//cdn.com/foundation.css'); html {  font-family: 'open sans', arial, sans-serif;} body:after {  content: 'pause';}

推薦

css 代碼:

@import url(//cdn.com/foundation.css); html {  font-family: "open sans", arial, sans-serif;} body:after {  content: "pause";}

選取器嵌套 (SCSS)

在Sass中你可以嵌套選取器，這可以使代碼變得更清潔和可讀。嵌套所有的選取器，但盡量避免嵌套沒有任何內容的選取器。
如果你需要指定一些子項目的樣式屬性，而父元素將不什麼樣式屬性，
可以使用常規的CSS選取器鏈。
這將防止您的指令碼看起來過於複雜。

不推薦

css 代碼:

// Not a good example by not making use of nesting at all.content {  display: block;} .content > .news-article > .title {  font-size: 1.2em;}

不推薦

css 代碼:

// Using nesting is better but not in all cases// Avoid nesting when there is no attributes and use selector chains instead.content {  display: block;   > .news-article {    > .title {      font-size: 1.2em;    }  }}

推薦

css 代碼:

// This example takes the best approach while nesting but use selector chains where possible.content {  display: block;   > .news-article > .title {    font-size: 1.2em;  }}

嵌套中引入 空行 (SCSS)

嵌套選取器和CSS屬性之間空一行。

不推薦

css 代碼:

.content {  display: block;  > .news-article {    background-color: #eee;    > .title {      font-size: 1.2em;    }    > .article-footnote {      font-size: 0.8em;    }  }}

推薦

css 代碼:

.content {  display: block;   > .news-article {    background-color: #eee;     > .title {      font-size: 1.2em;    }     > .article-footnote {      font-size: 0.8em;    }  }}

上下文媒體查詢(SCSS)

在Sass中，當你嵌套你的選取器時也可以使用上下文媒體查詢。
在Sass中，你可以在任何給定的嵌套層次中使用媒體查詢。
由此產生的CSS將被轉換，這樣的媒體查詢將包裹選取器的形式呈現。

這技術非常方便，
有助於保持媒體查詢屬於的上下文。

第一種方法這可以讓你先寫你的手機樣式，然後在任何你需要的地方
用上下文媒體查詢以提供案頭樣式。

不推薦

css 代碼:

// This mobile first example looks like plain CSS where the whole structure of SCSS is repeated// on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate// the content in the media query to the content in the upper part (mobile style) .content-page {  font-size: 1.2rem;   > .main {    background-color: whitesmoke;     > .latest-news {      padding: 1rem;       > .news-article {        padding: 1rem;         > .title {          font-size: 2rem;        }      }    }     > .content {      margin-top: 2rem;      padding: 1rem;    }  }   > .page-footer {    margin-top: 2rem;    font-size: 1rem;  }} @media screen and (min-width: 641px) {  .content-page {    font-size: 1rem;     > .main > .latest-news > .news-article > .title {      font-size: 3rem;    }     > .page-footer {      font-size: 0.8rem;    }  }}

推薦

css 代碼:

// This is the same example as above but here we use contextual media queries in order to put the different styles// for different media into the right context. .content-page {  font-size: 1.2rem;   @media screen and (min-width: 641px) {    font-size: 1rem;  }   > .main {    background-color: whitesmoke;     > .latest-news {      padding: 1rem;       > .news-article {        padding: 1rem;         > .title {          font-size: 2rem;           @media screen and (min-width: 641px) {            font-size: 3rem;          }        }      }    }     > .content {      margin-top: 2rem;      padding: 1rem;    }  }   > .page-footer {    margin-top: 2rem;    font-size: 1rem;     @media screen and (min-width: 641px) {      font-size: 0.8rem;    }  }}

嵌套順序和父級選取器(SCSS)

當使用Sass的嵌套功能的時候，
重要的是有一個明確的嵌套順序，
以下內容是一個SCSS塊應具有的順序。

當前選取器的樣式屬性
父級選取器的偽類別選取器 (:first-letter, :hover, :active etc)
偽類元素 (:before and :after)
父級選取器的聲明樣式 (.selected, .active, .enlarged etc.)
用Sass的上下文媒體查詢
子選取器作為最後的部分
The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended

css 代碼:

.product-teaser {  // 1. Style attributes  display: inline-block;  padding: 1rem;  background-color: whitesmoke;  color: grey;   // 2. Pseudo selectors with parent selector  &:hover {    color: black;  }   // 3. Pseudo elements with parent selector  &:before {    content: "";    display: block;    border-top: 1px solid grey;  }   &:after {    content: "";    display: block;    border-top: 1px solid grey;  }   // 4. State classes with parent selector  &.active {    background-color: pink;    color: red;     // 4.2. Pseuso selector in state class selector    &:hover {      color: darkred;    }  }   // 5. Contextual media queries  @media screen and (max-width: 640px) {    display: block;    font-size: 2em;  }   // 6. Sub selectors  > .content > .title {    font-size: 1.2em;     // 6.5. Contextual media queries in sub selector    @media screen and (max-width: 640px) {      letter-spacing: 0.2em;      text-transform: uppercase;    }  }}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

用HTML+CSS實現下拉式功能表

CSS做出滑鼠上移表徵圖旋轉