前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 規(guī)范

2015-01-30 11:12:08來(lái)源：WEB前端開(kāi)發(fā)作者：

這是一份旨在增強(qiáng)團(tuán)隊(duì)的開(kāi)發(fā)協(xié)作，提高代碼質(zhì)量和打造開(kāi)發(fā)基石的編碼風(fēng)格規(guī)范，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。

CSS and Sass (SCSS) style rules

ID and class naming

ID和class(類)名總是使用可以反應(yīng)元素目的和用途的名稱，或其他通用名稱。代替表象和晦澀難懂的名稱。

應(yīng)該首選具體和反映元素目的的名稱，因?yàn)檫@些是最可以理解的，而且發(fā)生變化的可能性最小。

通用名稱只是多個(gè)元素的備用名，他們兄弟元素之間是一樣的，沒(méi)有特別意義。
區(qū)分他們，使他們具有特殊意義，通常需要為“幫手”。

盡管class(類)名和ID 的語(yǔ)義化對(duì)于計(jì)算機(jī)解析來(lái)說(shuō)沒(méi)有什么實(shí)際的意義，
語(yǔ)義化的名稱 通常是正確的選擇，因?yàn)樗鼈兯淼男畔⒑x，不包含表現(xiàn)的限制。

不推薦

  1. .fw-800 {
  2. font-weight: 800;
  3. }
  4.  
  5. .red {
  6. color: red;
  7. }

推薦

  1. .heavy {
  2. font-weight: 800;
  3. }
  4.  
  5. .important {
  6. color: red;
  7. }

合理的避免使用ID

一般情況下ID不應(yīng)該被應(yīng)用于樣式。
ID的樣式不能被復(fù)用并且每個(gè)頁(yè)面中你只能使用一次ID。
使用ID唯一有效的是確定網(wǎng)頁(yè)或整個(gè)站點(diǎn)中的位置。
盡管如此，你應(yīng)該始終考慮使用class，而不是id，除非只使用一次。
 

不推薦

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

推薦

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

另一個(gè)反對(duì)使用ID的觀點(diǎn)是含有ID選擇器權(quán)重很高。
一個(gè)只包含一個(gè)ID選擇器權(quán)重高于包含1000個(gè)class(類)名的選擇器，這使得它很奇怪。

  1. // 這個(gè)選擇器權(quán)重高于下面的選擇器
  2. #content .title {
  3. color: red;
  4. }
  5.  
  6. // than this selector!
  7. html body div.content.news-content .title.content-title.important {
  8. color: blue;
  9. }

CSS選擇器中避免標(biāo)簽名

當(dāng)構(gòu)建選擇器時(shí)應(yīng)該使用清晰， 準(zhǔn)確和有語(yǔ)義的class(類)名。不要使用標(biāo)簽選擇器。 如果你只關(guān)心你的class(類)名
，而不是你的代碼元素，這樣會(huì)更容易維護(hù)。

從分離的角度考慮,在表現(xiàn)層中不應(yīng)該分配html標(biāo)記/語(yǔ)義。
它可能是一個(gè)有序列表需要被改成一個(gè)無(wú)序列表，或者一個(gè)div將被轉(zhuǎn)換成article。
如果你只使用具有實(shí)際意義的class(類)名，
并且不使用元素選擇器，那么你只需要改變你的html標(biāo)記，而不用改動(dòng)你的CSS。

不推薦

  1. div.content > header.content-header > h2.title {
  2. font-size: 2em;
  3. }

推薦

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

盡可能的精確

很多前端開(kāi)發(fā)人員寫(xiě)選擇器鏈的時(shí)候不使用 直接子選擇器（注：直接子選擇器和后代選擇器的區(qū)別）。
有時(shí)，這可能會(huì)導(dǎo)致疼痛的設(shè)計(jì)問(wèn)題并且有時(shí)候可能會(huì)很耗性能。
然而，在任何情況下，這是一個(gè)非常不好的做法。
如果你不寫(xiě)很通用的，需要匹配到DOM末端的選擇器， 你應(yīng)該總是考慮直接子選擇器。

考慮下面的DOM:

  1. <article class="content news-content">
  2. <span class="title">News event</span>
  3. <div class="content-body">
  4. <div class="title content-title">
  5. Check this out
  6. </div>
  7.  
  8. <p>This is a news article content</p>
  9.  
  10. <div class="teaser">
  11. <div class="title">Buy this</div>
  12. <div class="teaser-content">Yey!</div>
  13. </div>
  14. </div>
  15. </article>

下面的CSS將應(yīng)用于有title類的全部三個(gè)元素。
然后，要解決content類下的title類 和 teaser類下的title類下不同的樣式，這將需要更精確的選擇器再次重寫(xiě)他們的樣式。

不推薦

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

推薦

  1. .content > .title {
  2. font-size: 2rem;
  3. }
  4.  
  5. .content > .content-body > .title {
  6. font-size: 1.5rem;
  7. }
  8.  
  9. .content > .content-body > .teaser > .title {
  10. font-size: 1.2rem;
  11. }

縮寫(xiě)屬性

CSS提供了各種縮寫(xiě)屬性（如 font 字體）應(yīng)該盡可能使用，即使在只設(shè)置一個(gè)值的情況下。

使用縮寫(xiě)屬性對(duì)于代碼效率和可讀性是有很有用的。

不推薦

  1. border-top-style: none;
  2. font-family: palatino, georgia, serif;
  3. font-size: 100%;
  4. line-height: 1.6;
  5. padding-bottom: 2em;
  6. padding-left: 1em;
  7. padding-right: 1em;
  8. padding-top: 0;

推薦

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

0 和 單位

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

不推薦

  1. padding-bottom: 0px;
  2. margin: 0em;

推薦

  1. padding-bottom: 0;
  2. margin: 0;

十六進(jìn)制表示法

在可能的情況下，使用3個(gè)字符的十六進(jìn)制表示法。
顏色值允許這樣表示，
3個(gè)字符的十六進(jìn)制表示法更簡(jiǎn)短。

始終使用小寫(xiě)的十六進(jìn)制數(shù)字。

不推薦

  1. color: #FF33AA;

推薦

  1. color: #f3a;

ID 和 Class（類） 名的分隔符

使用連字符（中劃線）分隔ID和Class（類）名中的單詞。為了增強(qiáng)課理解性，在選擇器中不要使用除了連字符（中劃線）以為的任何字符（包括沒(méi)有）來(lái)連接單詞和縮寫(xiě)。

另外，作為該標(biāo)準(zhǔn)，預(yù)設(shè)屬性選擇器能識(shí)別連字符（中劃線）作為單詞[attribute|=value]的分隔符，
所以最好的堅(jiān)持使用連字符作為分隔符。

不推薦

  1. .demoimage {}
  2. .error_status {}

推薦

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

Hacks

避免用戶代理檢測(cè)以及CSS“hacks” – 首先嘗試不同的方法。通過(guò)用戶代理檢測(cè)或特殊的CSS濾鏡，變通的方法和 hacks 很容易解決樣式差異。為了達(dá)到并保持一個(gè)有效的和可管理的代碼庫(kù)，這兩種方法都應(yīng)該被認(rèn)為是最后的手段。換句話說(shuō)，從長(zhǎng)遠(yuǎn)來(lái)看，用戶代理檢測(cè)和hacks
會(huì)傷害項(xiàng)目，作為項(xiàng)目往往應(yīng)該采取阻力最小的途徑。也就是說(shuō)，輕易允許使用用戶代理檢測(cè)和hacks 以后將過(guò)于頻繁。

聲明順序

這是一個(gè)選擇器內(nèi)書(shū)寫(xiě)CSS屬性順序的大致輪廓。這是為了保證更好的可讀性和可掃描重要。

作為最佳實(shí)踐，我們應(yīng)該遵循以下順序（應(yīng)該按照下表的順序）：

  1. 結(jié)構(gòu)性屬性：
    1. display
    2. position, left, top, right etc.
    3. overflow, float, clear etc.
    4. margin, padding
  2. 表現(xiàn)性屬性：
    1. background, border etc.
    2. font, text

不推薦

  1. .box {
  2. font-family: ＇Arial＇, sans-serif;
  3. border: 3px solid #ddd;
  4. left: 30%;
  5. position: absolute;
  6. text-transform: uppercase;
  7. background-color: #eee;
  8. right: 30%;
  9. isplay: block;
  10. font-size: 1.5rem;
  11. overflow: hidden;
  12. padding: 1em;
  13. margin: 1em;
  14. }

推薦

  1. .box {
  2. display: block;
  3. position: absolute;
  4. left: 30%;
  5. right: 30%;
  6. overflow: hidden;
  7. margin: 1em;
  8. padding: 1em;
  9. background-color: #eee;
  10. border: 3px solid #ddd;
  11. font-family: ＇Arial＇, sans-serif;
  12. font-size: 1.5rem;
  13. text-transform: uppercase;
  14. }

聲明結(jié)束

為了保證一致性和可擴(kuò)展性，每個(gè)聲明應(yīng)該用分號(hào)結(jié)束，每個(gè)聲明換行。

不推薦

  1. .test {
  2. display: block; height: 100px
  3. }

推薦

  1. .test {
  2. display: block;
  3. height: 100px;
  4. }

屬性名結(jié)束

屬性名的冒號(hào)后使用一個(gè)空格。出于一致性的原因，
屬性和值（但屬性和冒號(hào)之間沒(méi)有空格）的之間始終使用一個(gè)空格。

不推薦

  1. h3 {
  2. font-weight:bold;
  3. }

推薦

  1. h3 {
  2. font-weight: bold;
  3. }

選擇器和聲明分離

每個(gè)選擇器和屬性聲明總是使用新的一行。

不推薦

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

推薦

  1. h1,
  2. h2,
  3. h3 {
  4. font-weight: normal;
  5. line-height: 1.2;
  6. }

規(guī)則分隔

規(guī)則之間始終有一個(gè)空行（雙換行符）分隔。

推薦

  1. html {
  2. background: #fff;
  3. }
  4.  
  5. body {
  6. margin: auto;
  7. width: 50%;
  8. }

CSS引號(hào)

屬性選擇器或?qū)傩灾涤秒p引號(hào)（””），而不是單引號(hào)（”）括起來(lái)。
URI值（url()）不要使用引號(hào)。

不推薦

  1. @import url(＇//cdn.com/foundation.css＇);
  2.  
  3. html {
  4. font-family: ＇open sans＇, arial, sans-serif;
  5. }
  6.  
  7. body:after {
  8. content: ＇pause＇;
  9. }

推薦

  1. @import url(//cdn.com/foundation.css);
  2.  
  3. html {
  4. font-family: "open sans", arial, sans-serif;
  5. }
  6.  
  7. body:after {
  8. content: "pause";
  9. }

選擇器嵌套 (SCSS)

在Sass中你可以嵌套選擇器，這可以使代碼變得更清潔和可讀。嵌套所有的選擇器，但盡量避免嵌套沒(méi)有任何內(nèi)容的選擇器。
如果你需要指定一些子元素的樣式屬性，而父元素將不什么樣式屬性，
可以使用常規(guī)的CSS選擇器鏈。
這將防止您的腳本看起來(lái)過(guò)于復(fù)雜。

不推薦

  1. // Not a good example by not making use of nesting at all
  2. .content {
  3. display: block;
  4. }
  5.  
  6. .content > .news-article > .title {
  7. font-size: 1.2em;
  8. }

不推薦

  1. // Using nesting is better but not in all cases
  2. // Avoid nesting when there is no attributes and use selector chains instead
  3. .content {
  4. display: block;
  5.  
  6. > .news-article {
  7. > .title {
  8. font-size: 1.2em;
  9. }
  10. }
  11. }

推薦

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

嵌套中引入 空行 (SCSS)

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

不推薦

  1. .content {
  2. display: block;
  3. > .news-article {
  4. background-color: #eee;
  5. > .title {
  6. font-size: 1.2em;
  7. }
  8. > .article-footnote {
  9. font-size: 0.8em;
  10. }
  11. }
  12. }

推薦

  1. .content {
  2. display: block;
  3.  
  4. > .news-article {
  5. background-color: #eee;
  6.  
  7. > .title {
  8. font-size: 1.2em;
  9. }
  10.  
  11. > .article-footnote {
  12. font-size: 0.8em;
  13. }
  14. }
  15. }

上下文媒體查詢(SCSS)

在Sass中，當(dāng)你嵌套你的選擇器時(shí)也可以使用上下文媒體查詢。
在Sass中，你可以在任何給定的嵌套層次中使用媒體查詢。
由此生成的CSS將被轉(zhuǎn)換，這樣的媒體查詢將包裹選擇器的形式呈現(xiàn)。

這技術(shù)非常方便，
有助于保持媒體查詢屬于的上下文。

第一種方法這可以讓你先寫(xiě)你的手機(jī)樣式，然后在任何你需要的地方
用上下文媒體查詢以提供桌面樣式。

不推薦

  1. // This mobile first example looks like plain CSS where the whole structure of SCSS is repeated
  2. // on the bottom in a media query. This is error prone and makes maintenance harder as it＇s not so easy to relate
  3. // the content in the media query to the content in the upper part (mobile style)
  4.  
  5. .content-page {
  6. font-size: 1.2rem;
  7.  
  8. > .main {
  9. background-color: whitesmoke;
  10.  
  11. > .latest-news {
  12. padding: 1rem;
  13.  
  14. > .news-article {
  15. padding: 1rem;
  16.  
  17. > .title {
  18. font-size: 2rem;
  19. }
  20. }
  21. }
  22.  
  23. > .content {
  24. margin-top: 2rem;
  25. padding: 1rem;
  26. }
  27. }
  28.  
  29. > .page-footer {
  30. margin-top: 2rem;
  31. font-size: 1rem;
  32. }
  33. }
  34.  
  35. @media screen and (min-width: 641px) {
  36. .content-page {
  37. font-size: 1rem;
  38.  
  39. > .main > .latest-news > .news-article > .title {
  40. font-size: 3rem;
  41. }
  42.  
  43. > .page-footer {
  44. font-size: 0.8rem;
  45. }
  46. }
  47. }

推薦

  1. // This is the same example as above but here we use contextual media queries in order to put the different styles
  2. // for different media into the right context.
  3.  
  4. .content-page {
  5. font-size: 1.2rem;
  6.  
  7. @media screen and (min-width: 641px) {
  8. font-size: 1rem;
  9. }
  10.  
  11. > .main {
  12. background-color: whitesmoke;
  13.  
  14. > .latest-news {
  15. padding: 1rem;
  16.  
  17. > .news-article {
  18. padding: 1rem;
  19.  
  20. > .title {
  21. font-size: 2rem;
  22.  
  23. @media screen and (min-width: 641px) {
  24. font-size: 3rem;
  25. }
  26. }
  27. }
  28. }
  29.  
  30. > .content {
  31. margin-top: 2rem;
  32. padding: 1rem;
  33. }
  34. }
  35.  
  36. > .page-footer {
  37. margin-top: 2rem;
  38. font-size: 1rem;
  39.  
  40. @media screen and (min-width: 641px) {
  41. font-size: 0.8rem;
  42. }
  43. }
  44. }

嵌套順序和父級(jí)選擇器(SCSS)

當(dāng)使用Sass的嵌套功能的時(shí)候，
重要的是有一個(gè)明確的嵌套順序，
以下內(nèi)容是一個(gè)SCSS塊應(yīng)具有的順序。

  1. 當(dāng)前選擇器的樣式屬性
  2. 父級(jí)選擇器的偽類選擇器 (:first-letter, :hover, :active etc)
  3. 偽類元素 (:before and :after)
  4. 父級(jí)選擇器的聲明樣式 (.selected, .active, .enlarged etc.)
  5. 用Sass的上下文媒體查詢
  6. 子選擇器作為最后的部分

The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended

  1. .product-teaser {
  2. // 1. Style attributes
  3. display: inline-block;
  4. padding: 1rem;
  5. background-color: whitesmoke;
  6. color: grey;
  7.  
  8. // 2. Pseudo selectors with parent selector
  9. &:hover {
  10. color: black;
  11. }
  12.  
  13. // 3. Pseudo elements with parent selector
  14. &:before {
  15. content: "";
  16. display: block;
  17. border-top: 1px solid grey;
  18. }
  19.  
  20. &:after {
  21. content: "";
  22. display: block;
  23. border-top: 1px solid grey;
  24. }
  25.  
  26. // 4. State classes with parent selector
  27. &.active {
  28. background-color: pink;
  29. color: red;
  30.  
  31. // 4.2. Pseuso selector in state class selector
  32. &:hover {
  33. color: darkred;
  34. }
  35. }
  36.  
  37. // 5. Contextual media queries
  38. @media screen and (max-width: 640px) {
  39. display: block;
  40. font-size: 2em;
  41. }
  42.  
  43. // 6. Sub selectors
  44. > .content > .title {
  45. font-size: 1.2em;
  46.  
  47. // 6.5. Contextual media queries in sub selector
  48. @media screen and (max-width: 640px) {
  49. letter-spacing: 0.2em;
  50. text-transform: uppercase;
  51. }
  52. }
  53. }