Categories
程式開發

避坑指南:如何在基於組件的應用中使用CSS架構


CSS架構是一個常被開發人員忽視的複雜問題。為簡化開發人員的工作,可對每個組件封裝(Encapsulate)CSS,由此避免許多CSS相關的坑,但這種“變通”做法是以降低可重用性和可擴展性為代價的。

一旦開發人員定義了一個CSS類,該類將自動作用於整個應用的範圍之內,會修改所有相關元素及其子元素。對於那些結果可預測的簡單應用,這種做法非常適用。但是隨著應用和團隊規模的增長,該做法立刻會出現問題,將導致一些不可預料的問題。

上述問題的最初解決方案是BEM(Block Element Modifier)規範。作為一種方法和命名規範,BEM為開發人員清晰標識了每個類的行為,有助於避免產生衝突。例如,form__submit–disabled指示開發人員正在表單內設置一個提交按鈕的狀態為禁用。

但作為命名規範,難以強制開發人員去遵守BEM。此後,JavaScript推出了一些更易於實現的解決方案,包括CSS ModulesStyled Components,並得到了開發人員的採納。這些方法採用不同的技術路線,在單個組件中添加CSS,同樣解決了許多BEM所針對的問題。

解決組件化設計中缺少跨應用架構的問題,涉及三個獨立的方面:

  1. UI:包括主題和一般應用行為。
  2. 佈局組件(Layout Components):也常被稱為“容器”或“智能組件”。佈局組件確定指定組件在特定場景中的行為,通常是不可重用的。
  3. 展示組件(Presentational Components):是增強應用功能的可重用代碼片段。為增加展示組件的多樣性,其中應盡可能避免包含邏輯。

UI

UI會定義在作用於整個應用的全局CSS文件中。主要包括兩個方面:

  1. 常量類(Constant):開發人員過去會使用所有主流瀏覽器都支持的自定義CSS屬性,最近可使用SCSS或LESS變量,

CSS自定義屬性主要有兩方面優點。第一,可在運行時做修改。對於轉換主題或支持夜景模式,這是一種很好的解決方案。第二,支持在佈局組件中修改,開發人員更易於實現小範圍內的設計調整。

  1. UI狀態(State)定義通常可分解為三方面:
    1. 修飾符(Modifier)狀態:確定各元素的規格(大/小)、設計(主/次)等的變化。
    2. 行為(Behavioral)狀態:包括整個應用範圍的狀態。例如,在線/離線、正在加載等。
    3. 偽(Pseudo)狀態:啟用/禁用等臨時狀態,以及:hover和:focus等CSS狀態。

佈局組件

佈局組件會按指定方式在頁面上組織可重用的組件。佈局組件的功能可分解為兩個方面,一是以設定屬性和設計對可重用組件做初始化,二是使用CSS Grid、Flexbox等功能將其所控制區域設定為特定的佈局。

可重用組件

可重用組件中幾乎不包含邏輯。它們從佈局組件接收數據,當佈局組件執行操作時會觸發相關事件(或回調)。

為確保組件的可重用性,開發人員應盡量避免在組件中添加邏輯和設計。具體而言,通常應避免添加顯示、寬度、留白等屬性。

這並非易事,因為可重用組件常常需要處理比其最初設計更多的場景,例如,支持多行文本的按鈕,支持顯示更多文本內容的標題等。但可重用組件確保了組件真正的可重用性,無需在應用下次使用時進行重寫。

原文鏈接:

CSS Architecture for Component-Based Applications