Styleguide 這是什麼可以吃嗎? CSS樣式指南/撰寫風格

Styleguide 這是什麼可以吃嗎?
為什麼要有這東西?

網頁在 CSS 撰寫樣式,在大型團隊或是國外有些方法,可以讓撰寫CSS的成員更有一致性,方便維護的規範。

但很多人都不是由大團隊起家或是專門科系畢業,於是在CSS class 或是 方法上比較隨興,其實這種狀況也不少見,筆者自首前幾年也曾度過這樣的時期,而不自知。😱😱

有部份也是因為樣式撰寫的彈性,於是這些後續修改或維護也常常不被重視
(進入一個反正重寫比較快的世界中)

過些日子專案慢慢養大了,開始感覺Styles維護真的很不容易,爬文 OOCSS 或 BEM,才了解這些命名方式與小細節的規範,可以有多大的好處。
都是為了讓撰寫者更加方便,互相幫助更容易啊!

近期正在看 ESLint ,從npm軟連結研究,不小心逛到相關的套件,才想起這件事還是要好好紀錄一下。

註: ESLint -- 是一個開源項目,最初由Nicholas C. Zakas於2013年6月創建。其目標是為javaScript提供可插入的linting實用程序。
卡斯伯 -- 鐵人賽:透過 ESLint 學習 JavaScript ES6

既然 Airbnb javaScript有這樣的規範或是建議,好奇心之下翻一翻,找到了我想找的東西。
Airbnb 的 CSS / Sass Styleguide (連結為中文翻譯版),覺得裡面的規範也是我一直在尋找的方向。

可發現幾個要點:

  1. 共同需理解的專業術語--方便夥伴溝通上的共識。
  2. 命名方式--尋找一目瞭然並避免衝突,容易理解的方式。
  3. 屬性表示--這部份是一種追求效能與簡潔的共識。
  4. 註解方式--方便他人理解並且比較好的做法。
並舉出範例好與壞,好讓剛入手的夥伴更容易理解。

屬性定義的順序引用不同團隊可能有些微的不同,文中表明的用意與邏輯也因應閱讀的清晰做了相關的解說。

如果是一個團隊,有人先定好這樣的共識感覺超棒的!

可惜目前團隊需要這樣做的,只有我一個人,但我打算開始寫這樣的文件,慢慢地的把這個規範建立起來,以備不時之需。

這個網誌中的熱門文章

標題線樣式Title-line CSS 的解法

腦袋停機運轉現象

繪者的巧思