CSS Methodologies

CSS 方法論們

因應公司目前專案需求簡單整理了目前線上的 CSS 方法論們 (OOCSS、SMACSS、BEM、SUIT CSS、ITCSS、The 7-1 Pattern、MVCSS),包含架構、命名等相關規範,除 Atomic 外,Atomic 簡單來說就是原子概念,將 CSS 拆分成許多不同的小部件,如 .border-bottom .border-1px .border-solid …等,在實際頁面中做組裝動作,嚴格來說不是很符合一般專案的情境。

雖然整理完所有方法論,以目前專案而言,沒有實際適合的命名規則可以使用,現階段應該會以 The 7-1 Pattern 作為主要架構基底搭配 SUIT CSS 的命名概念,再去做一套專屬的命名規範。

維持基本的 CSS 要求:

  • 不針對 html tag 做樣式
  • 低耦合
  • 提升樣式名稱語意

規範百百種,不要通通都覺得可以用,混到最後沒有一個規則,就是四不像呀!現在開始要還債惹!T^T

CSS/sass

2016 Oct 28th Reading Ref

esther

Highlight this week: CSS variables

CSS Architecture

esther

CCS架構到命名方式的應用與舉例,沒有細部介紹現有的架構跟命名規則有點可惜,有大概提到幾個命名方式的優缺點,Naming Methodologies跟Namespacing內容不錯。
ITCSS & SUIT CSS 可以再深入研究。(筆記)

CSS/sass

2016 Oct 24th Reading Ref

Refactoring CSS without Losing Your Mind

esther

少數針對CSS重構的討論,喜歡講者一開始針對technical debt的解說和refactoring/rewrite的區分。
劃重點:Use all: initial; to buy you more time! XDDDD
另外作者提到的小故事也滿讓人值得思考的:
Refactoring is a second chance that most industries don’t get.

CSS/sass