Angular Vue React 框架中的 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使用