AngularVueReact框架中的CSS

框架中的 CSS

Angular Vue React 三大框架

Angular Vue 內建樣式整合

React 一些業界實踐

Angular 

Angular . js (1.x)：沒有樣式整合能力

Angular （2+）：提供了樣式封裝能力  2.與元件深度整合

ShadowDOM（談一談神奇的ShadowDOM）：1.邏輯上一個DOM  2.結構上存在子集結構

Scoped CSS （Scoped CSS規範）：1.限定了範圍的CSS 2.無法影響外部元素 3.外部樣式一般不影響內部 4.可以通過 /deep 或 >>> 穿透

達到封裝效果：模擬 Scoped CSS  方案1.隨機選擇器（不支援）2.隨機屬性  <div abc>—-div[abc]{ }

Angular 中載入 css 方法

 

Vue

模擬 Scoped CSS  方案1.隨機選擇器 css modules  2.隨機屬性  <div abc>—-div[abc]{ }

參見：詳解在Vue中有條件地使用CSS類      

           在Vue中使用樣式

 

React （React入門教程）

官方沒有整合方案   

社群方案：1. css modules （需要自己編譯，將 class name 放到結構中）  參見部落格

2.(babel) react-css-modules (正常寫 class 即可）

3.styled components (將元件和樣式封裝到一起，變成帶有樣式的元件）

4.styled jsx （直接在 jsx 中寫樣式，簡單粗暴）

參見部落格：react 中 css 的使用    定義元件和css樣式

react中書寫css的三種方式    React.js中的CSS使用