rscss — css coding style

Reasonable System for CSS Stylesheet Structure

這是我讀到的第一篇 css coding style,雖然還沒有跟其他規範比較過,其內容篇幅不長,而且寫得很簡單易懂,大致上就分為 component & element,裡面的範例說明也都很清楚,應該是很容易上手的,雖然在實作時也是有遇到一些規範中並沒有提及的狀況,但使用幾次下來覺得算是還不錯的。

原文連結:http://rscss.io

最近蠻愛它的原因就是整個運作的邏輯超簡單。只要把你網頁切割成大大小小不同的元件(Component),然後每個元件內部又是由其他元素(Element)組成,這樣就行了,下面是兩者簡單的命名規則

  • 元件(Component):要用兩個字命名,中間用破折號(-)相連。
  • 元素(Element):只能以一個字命名。

到這邊就是大致上的邏輯了,很簡單吧。


若是要再往下細分的話,元件跟元素又還可以用變形(Variant)來做適當的變化。

例如網頁中會有很多相同的按鈕,但是上面的文字顏色或是背景色等一些小細節略有不同,這時就可以使用同一個元件,再搭配上不同的變形來組成所有的按鈕。

基本上這份 rscss 最為重要的觀念就是這三樣,元件、元素、變形,使用這三個觀念就可以架構出一份易讀的 css 文件。


原文連結:http://rscss.io

還有,我首次嘗試翻譯的中文文件lol
這份文件內容真的不多也很簡單,所以想說來嘗試翻譯看看,第一次翻譯文件,如果有任何語意不順,翻譯錯誤,麻煩再留言給我囉。不過其實真的可以直接看英文啦哈哈

中文翻譯:https://eddiewen.gitbooks.io/rscss/content/