摘要：當然這不是只限于使用或者其他打包工具的方式都能支持使用優(yōu)點模塊化和可重用性沒有沖突顯性依賴不會污染全局可以配合預處理器使用少開發(fā)多帶帶文件寫法基本一致

To define is to limit. 
定義一樣東西，就意味著限制了它。
——王爾德 《道林·格雷的畫像》

React系列 --- 簡單模擬語法(一)
React系列 --- Jsx, 合成事件與Refs(二)
React系列 --- virtualdom diff算法實現(xiàn)分析(三)
React系列 --- 從Mixin到HOC再到HOOKS(四)
React系列 --- createElement, ReactElement與Component部分源碼解析(五)
React系列 --- 從使用React了解Css的各種使用方案(六)

這里主要總結一下CSS是怎么一步步演化呈現(xiàn)在百花齊放的局面,從用上React之后就更加多選擇了,我就舉例一下我的理解和用過的方案,還有一些了解過覺得還不錯的方案.本身沒有推薦或貶低哪些的意思,只是覺得可以滿足需求的都是可以使用的方案.

用官方口吻來說就是

CSS 能夠對網(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。

具有以下特點:

豐富的樣式定義

CSS提供了豐富的包括但不限于樣式外觀，文本字體,背景屬性,邊距形狀等等的能力,還有一些瀏覽器特有的屬性定制.

易于使用修改

可以將樣式定義在HTML元素的style屬性中，HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中。

可以將相同樣式的元素進行歸類使用同一個樣式進行定義，也可以將某個樣式應用到所有同名的HTML標簽中。

多頁面應用

CSS樣式表理論上不屬于任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實現(xiàn)多個頁面風格的統(tǒng)一。

層疊

簡單的說，層疊就是對一個元素多次設置同一個樣式，后來定義的樣式將對前面的樣式設置進行重寫。

體積減少

在使用HTML定義頁面效果的網(wǎng)站中，往往需要大量或重復的表格和font元素形成各種規(guī)格的文字樣式，而將樣式的聲明多帶帶放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少。另外，CSS樣式表的復用更大程序的縮減了頁面的體積，減少下載的時間。

然后隨著用戶審美水平日益提高的標準和需求,普通的樣式已經(jīng)不足以支撐起來了,特別有些簡單要求還會讓開發(fā)絞盡腦汁用盡各種奇淫巧技來實現(xiàn),這種情況甚至會大大違背結構和樣式分離的原則.

作為CSS的升級版,主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊.

CSS3規(guī)范的一個新特點是被分為若干個相互獨立的模塊。一方面分成若干較小的模塊較利于規(guī)范及時更新和發(fā)布，及時調整模塊的內容，這些模塊獨立實現(xiàn)和發(fā)布，也為日后CSS的擴展奠定了基礎。另外一方面，由于受支持設備和瀏覽器廠商的限制，沒備或者廠商可以有選擇的支持一部分模塊，支持CSS3的一個子集，這樣有利于CSS3的推廣,但不同瀏覽器在不同時段支持不同特性，這也讓跨瀏覽器開發(fā)變得復雜,當然截止到2019,主流瀏覽器已經(jīng)基本支持了.低端版本也能通過各種輔助插件完成.

提升優(yōu)勢:

減少開發(fā)成本與維護成本

例如以前需要使用圖片定位模擬圓角,絕對定位+定時器模擬動畫,元素偽造滾動條樣式等各種繁瑣工作都可以省略掉了.

提高頁面性能

減少多余的標簽嵌套以及圖片的使用數(shù)量，意味著用戶要下載的內容將會更少，頁面加載也會更快,能夠減少用戶訪問Web站點時的HTTP請求數(shù)，這是提升頁面加載速度的最佳方法之一

CSS3的推廣一方面增強了樣式的展示,一方面免去開發(fā)實現(xiàn)的額外工程,但是本質上并沒有減少開發(fā)的工作量,因為有很多類似而不相同的樣式還是需要手寫出來.現(xiàn)在的網(wǎng)頁越來越大,畫面越來越豐富,于是就應運而生出了------

因為我都是使用SCSS,就以此舉例,但是其實語法和實現(xiàn)功能大致相同的.

預處理器是一種強化 CSS 的輔助工具，它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優(yōu)雅,有助于更好地組織管理樣式文件，以及更高效地開發(fā)項目.

簡單舉例常用而強大的特性:

嵌套規(guī)則 (Nested Rules)

允許將一套 CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器,還有屬性嵌套,占位符選擇器等等

SassScript

可以通過聲明變量,函數(shù),運算等抽取重復樣式代碼減少大量重復樣板代碼.

指令

@import導入 SCSS 或 Sass 文件 ,@media 嵌套在 CSS 規(guī)則內,@extend繼承樣式等

控制指令

運用各種判斷循環(huán)實現(xiàn)控制樣式

上面都是前端開發(fā)的標配技能,懂得自然都懂,就不說太多了,但是該碰到的坑自然都會遇到.

主要這么幾個:

全局污染

好的規(guī)范自然能夠極大方便重用樣式減少代碼,但是別說多人協(xié)作開發(fā),即使個人維護都可能碰到多種樣式覆蓋,權重優(yōu)先級混亂,冗余重復屬性過多,于是各種內聯(lián)樣式,!important強制最先等寫法,雖然也有其他方案如功能屬性class拆分避免這種窘境,但是增大開發(fā)的參與難度,很難形成一套適用標準,起碼我覺得太繁瑣了.

命名煩惱

元素嵌套越深,如果想命名語義化明確點就可能導致越來越長越復雜的命中規(guī)則,而有一些一次性的樣式也不得不遵循這種規(guī)則,否則用內聯(lián)樣式替代

樣式壓縮

因為樣式對應到具體的引用屬性id,class,選擇器等,這一塊是沒辦法省略的,嵌套越深入選擇器前綴可能就越長,例如#A .B .C .D p{}這種

預處理器只是簡化開發(fā)寫法,實際編譯完成也就這個樣,本質上的問題沒有得到解決.

React本身沒有定義樣式的主張,而是用第三方庫提供的CSS-in-JS.這里是一些實現(xiàn)的對比,之所以會出現(xiàn)種類繁多的第三方庫是因為它們實現(xiàn)功能的支持有所區(qū)別,主要在

Automatic Vendor Prefixing (自動添加前綴)

Pseudo Classes (偽類)

Media Queries (媒體查詢)

Styles As Object Literals (對象字面量樣式)

Extract CSS File (提取CSS文件)

例如React的官方示例原生style屬性使用

style?屬性接受具有駝峰命名屬性的 JavaScript 對象，而不是 CSS 字符串。 這與 JavaScript DOM 的?style?屬性一致，但是更高效，并且防止XSS安全漏洞。 例如：

const divStyle = {
  color: "blue",
  backgroundImage: "url(" + imgUrl + ")",
};

function HelloWorldComponent() {
  return 
Hello World!
;
}

注意:

樣式不自動進行兼容。 要支持舊版本的瀏覽器，您需要提供相應的樣式屬性

React 會自動為某些內聯(lián)樣式的數(shù)字屬性值附加一個 “px” 后綴。 如果你想使用 “px” 以外的單位，請明確指定單位，并將該值指定為字符串

并不支持所有的 css，例如媒體查詢，:before和:nth-child等 pseudo selectors

然后我們也能用一些其他的CSS-in-JS庫解決,我就拿比較多人使用支持功能比較完善的來舉例一下,下面方案都屬于這種,但是傾向和用法上有一定區(qū)別:

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation.

Support for colocating your styles with your JavaScript component.

不強制和React搭配才能使用

支持媒體查詢無需window.matchMedia

支持偽選擇器像:hover, :active等等,不需要在組件中存儲懸停或活動狀態(tài)。 :visited也能良好支持

支持自動全局@font-face檢測和插入

在指定多個樣式時，尊重優(yōu)先順序

不需要AST轉換

只向DOM中注入渲染所需的確切樣式。

可以用于服務器渲染

低依賴,小(20k,壓縮后6k)

沒有外部的Css文件生成

自動添加前綴

import React, { Component } from "react";
import { StyleSheet, css } from "aphrodite";

class App extends Component {
    render() {
        return 

            
                This is red.
            
            
                This turns red on hover.
            
            
                This turns red when the browser is less than 600px width.
            
            
                This is blue.
            
            
                This is blue and turns red when the browser is less than
                600px width.
            
        
;
    }
}

const styles = StyleSheet.create({
    red: {
        backgroundColor: "red"
    },

    blue: {
        backgroundColor: "blue"
    },

    hover: {
        ":hover": {
            backgroundColor: "red"
        }
    },

    small: {
        "@media (max-width: 600px)": {
            backgroundColor: "red",
        }
    }
});

當然也很多人不太接受這種方式書寫Css,還把html結構嵌套一堆className={css()}的寫法.

使用標記的模板文本和CSS的強大功能，樣式組件允許您編寫實際的CSS代碼來樣式化組件。它還刪除了組件和樣式之間的映射——將組件用作低級樣式結構再簡單不過了!

風格組件既兼容React(用于web)，也兼容React Native——這意味著它甚至是真正通用的應用程序的完美選擇!

import React from "react";

import styled from "styled-components";

// Create a 

直接將樣式組件化,移除樣式和組件的映射關系

支持組件繼承,方便復用

和原有CSS方式無障礙搭配使用

這是我查資料的時候了解到的一種方案,因為沒有實際用過,所以我只貼上它的功能示例

完全的CSS支持, no tradeoffs in power

運行時大小僅為3kb(從12kb壓縮為gzip)

完全隔離:選擇器、動畫、關鍵幀

內置CSS瀏覽器前綴

非常快速、最小和高效

非服務器渲染時高效運行注入

面向未來:相當于服務器可渲染的"Shadow CSS"

支持源映射

支持動態(tài)樣式和主題

通過插件進行CSS預處理

export default () => (
  

    
only this paragraph will get the style :)

    { /* you can include s here that include
         other 
s that don"t get unexpected styles! */ }

    
  
)

這是我在學習webpack的Css-loader的時候了解到的一種方案,現(xiàn)在在使用的方案

CSS Module是一個CSS文件,默認所有類和動畫命名都限于局部范圍.所有資源(url(...))和@imports都在模塊請求格式.

Css模塊會被編譯成底層交換格式像ICSS或者Interoperable CSS,但是書寫格式和普通CSS文件一樣.

當從JS模塊導入CSS模塊時，它導出一個具有從本地名稱到全局名稱的所有映射的對象。

/* style.css */
.className {
  color: green;
}

import { PureComponent } from "react";
import styles from "./index.scss";

class Page2 extends PureComponent {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      

      
    );
  }
}

當然這不是只限于React,使用webpack或者其他打包工具的方式都能支持使用.

模塊化和可重用性

沒有沖突

顯性依賴

不會污染全局

可以配合預處理器使用

API少,開發(fā)多帶帶CSS文件寫法基本一致