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

2018-05-09 13:06 更新

CSS and Sass (SCSS) style rules

ID and class naming

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

應該首選具體和反映元素目的的名稱，因為這些是最可以理解的，而且發(fā)生變化的可能性最小。

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

盡管class(類)名和ID 的語義化對于計算機解析來說沒有什么實際的意義，
語義化的名稱 通常是正確的選擇，因為它們所代表的信息含義，不包含表現(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不應該被應用于樣式。
ID的樣式不能被復用并且每個頁面中你只能使用一次ID。
使用ID唯一有效的是確定網頁或整個站點中的位置。
盡管如此，你應該始終考慮使用class，而不是id，除非只使用一次。

不推薦

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

推薦

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

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

  1. // 這個選擇器權重高于下面的選擇器
  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選擇器中避免標簽名

當構建選擇器時應該使用清晰， 準確和有語義的class(類)名。不要使用標簽選擇器。 如果你只關心你的class(類)名
，而不是你的代碼元素，這樣會更容易維護。

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

不推薦

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

推薦

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

盡可能的精確

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

考慮下面的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將應用于有title類的全部三個元素。
然后，要解決content類下的title類 和 teaser類下的title類下不同的樣式，這將需要更精確的選擇器再次重寫他們的樣式。

不推薦

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

縮寫屬性

CSS提供了各種縮寫屬性（如 font 字體）應該盡可能使用，即使在只設置一個值的情況下。

使用縮寫屬性對于代碼效率和可讀性是有很有用的。

不推薦

  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;

十六進制表示法

在可能的情況下，使用3個字符的十六進制表示法。
顏色值允許這樣表示，
3個字符的十六進制表示法更簡短。

始終使用小寫的十六進制數(shù)字。

不推薦

  1. color: #FF33AA;

推薦

  1. color: #f3a;

ID 和 Class（類） 名的分隔符

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

另外，作為該標準，預設屬性選擇器能識別連字符（中劃線）作為單詞[attribute|=value]的分隔符，
所以最好的堅持使用連字符作為分隔符。

不推薦

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

推薦

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

Hacks

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

聲明順序

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

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

  1. 結構性屬性：
    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. }

聲明結束

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

不推薦

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

推薦

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

屬性名結束

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

不推薦

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

推薦

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

選擇器和聲明分離

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

不推薦

  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ī)則之間始終有一個空行（雙換行符）分隔。

推薦

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

CSS引號

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

不推薦

  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中你可以嵌套選擇器，這可以使代碼變得更清潔和可讀。嵌套所有的選擇器，但盡量避免嵌套沒有任何內容的選擇器。
如果你需要指定一些子元素的樣式屬性，而父元素將不什么樣式屬性，
可以使用常規(guī)的CSS選擇器鏈。
這將防止您的腳本看起來過于復雜。

不推薦

  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中，當你嵌套你的選擇器時也可以使用上下文媒體查詢。
在Sass中，你可以在任何給定的嵌套層次中使用媒體查詢。
由此生成的CSS將被轉換，這樣的媒體查詢將包裹選擇器的形式呈現(xiàn)。

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

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

不推薦

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

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

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

  1. 當前選擇器的樣式屬性
  2. 父級選擇器的偽類選擇器 (:first-letter, :hover, :active etc)
  3. 偽類元素 (:before and :after)
  4. 父級選擇器的聲明樣式 (.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. }
以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號