You are here

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

Submitted by Jenny on Mon, 03/21/2016 - 14:00

CSS Component Design workshop attendees上個星期五(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 and the flower - discussing CSS Component Design討論CSS Component Design大家對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。如果有其他課程想聽,或是需要我們在重新舉辦曾講過的主題,歡迎跟我們聯絡

 

Add new comment