討論前端開發/CSS Component工作坊

上個星期五(03/18)，John有這個機會在台北開了個前端開發的工作坊，總共有11位朋友們來參加，深入探討了CSS Component的用法及Drupal 8的命名方式。

這次工作坊的成功來自大家的踴躍參與和發問，在slide裡看不懂的，或是覺得有問題的，大家都非常熱情的討論。在三個多小時裡，我們討論了相當多的東西。以下是我們討論的重點:

• 課程開始時，我們先講解前端開發的主要原則，progressive enhancement, accessibility, front-end performance, re-use, and automation。很多聽講者馬上發現了progressive enhancement跟accessibility的關聯，經過這幾天的沉澱，我也總結出相當多的相連的關係，譬如說progressive enhancement表示accessibility, accessibility代表前端功能(front-end performance)，前端功能會影響有多少可以被重新再用(re-use)，Re-use又是代表著automation, 所以，這些都是息息相關的。
• 接下來我們又討論了Web Components (W3C spec), React.js, Angular.js還有其他架構的Components不同之處，這些components都是設在一個HTML structure裡面，可是CSS Components是建立在class naming框架裡面。CSS component, e.g. .the-component, .the-component__an-element, etc., 不是在HTML structure 因為這些可以在不同的HTML structures. 例如， .button CSS component 可以用在 inputs (<input type="button">), buttons (<button>), and links (<a>).

• 大家對John的小花圖畫非常地感興趣： example CSS component: flower power.

• 當John講解了 .flower__bed element時,大家問了怎麼加 .flower__bed element裡同樣一個花盆到 .tree component. 在web development裡，我們常有requirement change發生，在這種情況下，我們只需要re-factor。把 .flower__bed refactor 到 a .planting-bed component that can contain a.flower 或是 a .tree.

• 我們討論了最爛命名的 class, .channel-tab__guide__upcoming-video__info__time. 這命名真的是問題多多，而且會很難refactor. 改成.channel-tab__video-time 會簡單易用一些.

• 我們也探討了.the-component--modifier__an-element，總結是我們應該可以把它改成.the-component.the-component--modifier .the-component__an-element，以後要建造像component的modifiers會比較簡單一點。 (範例： .button, .button--big, .button--red 可以放在一起來建造大按鈕，或是，宏按鈕，或是大紅按鈕。

翻譯於John的blog, http://goo.gl/RWkgs3，想看原文者，請移駕到John的blog。

大家在這堂課後，對CSS Compononent有更深入的了解，下一堂工作坊John會探討TWIG(在四月初左右)!歡迎大家踴躍參加!  目前工作坊的課程，請參考http://goo.gl/43N6LK。如果有其他課程想聽，或是需要我們在重新舉辦曾講過的主題，歡迎跟我們聯絡。