18F 丟出 CSS 的代碼風格指南

好幾個禮拜前的東西,這幾天才上 Hacker News:「Introducing the CSS coding style guide」。

18F 是美國政府的官方單位,取名自辦公室所在的地址:(取自 Wikipedia 的「18F」說明)

Its name refers to its office location in northwest Washington, D.C., on 18th and F Streets.

不只是定義了 CSS Coding Style Guide,還給了 SCSS Lint 工具使用:

The styleguide provides a method of linting Sass (SCSS) code to ensure it conforms to the rules in the styleguide.

Firefox 將可以在 CSS 內使用變數...

Firefox 將在 29 版支援 CSS 變數 (現在是 26 版):「CSS Variables in Firefox Nightly」。標準是出自 W3C 的「CSS Custom Properties for Cascading Variables Module Level 1」(在寫這篇文章時還是 draft)。

程式碼會長這樣:(直接引用比較複雜的程式碼)

:root {
  var-companyblue: #369;
  var-lighterblue: powderblue;
  var-largemargin: 20px;  
  var-smallmargin: calc(var(largemargin) / 2);
  var-borderstyle: 5px solid #000;
  var-headersize: 24px;
}
.partnerbadge {
  var-companyblue: #036;
  var-lighterblue: #369;
  var-headersize: calc(var(headersize)/2);
  transition: 0.5s;
}
 
@media (max-width: 400px) {
  .partnerbadge {
     var-borderstyle: none;  
     background: #eee;
  }
}
 
/* Applying the variables */body {font-family: 'open sans', sans-serif;}
 
h1 {
  color: var(companyblue);
  margin: var(largemargin) 0;
  font-size: var(headersize);
}
h2 {
  color: var(lighterblue);
  margin: var(smallmargin) 0;
  font-size: calc(var(headersize) - 5px);
}
 
.partnerbadge {
  padding: var(smallmargin) 10px;
  border: var(borderstyle);
}

本來用 Sass/SCSS 做的事情就可以把計算這部份推到 browser 上處理...

對於現在的瀏覽器,CSS 是否還需要加上 vendor prefix...

在「Do we need box-shadow or border-radius prefixes anymore?」這篇文章開頭就先給懶人包:

  • 如果沒有圓角 (border-radius) 或是陰影 (box-shadow) 會造成使用者不順。
  • 如果這四個平台 (以及瀏覽器) 的量夠大的話:Firefox 3.6-、Safari 4-、iOS 3.2-、Android 2.3-。

在這兩種情況下,你仍然需要加上 vendor prefix...

而比較長的說明,可以參考原文後半段,把這兩個效果分開說明。

如果是 Sass (SCSS) 使用者,就直接加吧,反正程式都幫你做好了... 雖然 validator 會叫 CSS 不合法,但也沒印象看過哪家瀏覽器會因為 css vendor prefix 就罷工... (真的有嗎?XD)