摘要：缺乏高級(jí)編程特性影響同樣深遠(yuǎn)，社區(qū)發(fā)展的預(yù)處理器能夠有效緩解，，，殊途同歸，異軍突起，基本實(shí)現(xiàn)變量嵌套變量混合擴(kuò)展和邏輯等。
前言
關(guān)注點(diǎn)分離（separation of concerns）原則多年來(lái)大行其道，實(shí)踐中一般將 HTML 、CSS 、JavaScript 分開(kāi)編寫(xiě)維護(hù)，早期框架 angularjs 即是如此，直到 React 爭(zhēng)議中問(wèn)世，引領(lǐng)關(guān)注點(diǎn)混合趨勢(shì)，驅(qū)使開(kāi)發(fā)者重新審視 CSS 工程化發(fā)展。
尷尬的CSS
相對(duì)于 JavaScript 的突飛猛進(jìn)，CSS 的發(fā)展緩慢，相對(duì)止步不前。隨著前端職能擴(kuò)大化成為常態(tài)，前端工程化日趨成熟，CSS 先天缺陷愈發(fā)明顯：
全局作用域
缺乏高級(jí)編程特性
代碼冗余
極限壓縮
依賴(lài)管理
最大的缺陷 來(lái)自于全局作用域，class name 全局生效，多人協(xié)作中的風(fēng)格不一致，隨時(shí)可能引發(fā)蝴蝶效應(yīng)。為規(guī)避多人協(xié)作的風(fēng)格沖突，社區(qū)提出 OOCSS ，BEM 等方法論，但實(shí)踐中完全取決于團(tuán)隊(duì)執(zhí)行力度，筆者也曾苦惱于合理的命名，為避免沖突，導(dǎo)致類(lèi)名冗長(zhǎng)，無(wú)聊且痛苦。
缺乏高級(jí)編程特性 影響同樣深遠(yuǎn)，社區(qū)發(fā)展的預(yù)處理器能夠有效緩解，sass ，less ，stylus 殊途同歸，postcss 異軍突起，基本實(shí)現(xiàn)變量、嵌套、變量、混合、擴(kuò)展和邏輯等。隨著 CSS 規(guī)范逐步推進(jìn)，高級(jí)編程特性完全可期。筆者大膽斷言，前端工程化的推進(jìn)，已經(jīng)基本解決 CSS高級(jí)編程特性缺乏 的問(wèn)題。
代碼冗余，極限壓縮對(duì)開(kāi)發(fā)的影響相對(duì)很小，經(jīng)典的 bootstrap 就包含大量的冗余代碼，但絲毫不影響其流行程度。
目前難以解決的是依賴(lài)管理，NPM 已經(jīng)成為事實(shí)上的 JavaScript 包管理工具，而 CSS 始終沒(méi)有發(fā)展出可用的管理模式，sass 的淺嘗輒止，例如 bootstrap-sass , Bourbon 等，顯然無(wú)法滿(mǎn)足需求。隨著 React 引領(lǐng)的關(guān)注點(diǎn)混合，以組件為核心的開(kāi)發(fā)模式，有效規(guī)避了 CSS 缺乏依賴(lài)管理的缺陷，筆者認(rèn)為，依賴(lài)管理弊端完全可控，未來(lái)的發(fā)展，留給未來(lái)述說(shuō)。
新銳的組件化
前端發(fā)展日新月異，React 在眾人爭(zhēng)議中進(jìn)入視野，典型的 React 組件同時(shí)包含結(jié)構(gòu)、樣式、行為，示例如下：
/**
* @description - lite component
* @author - huang.jian
*/
export class Counter extends Component {
constructor(props) {
super(props);
this.state = {
timestamp: Date.now()
};
}
render() {
return (
);
}
}
前端應(yīng)用由組件聚合而成，組件層面對(duì) CSS 進(jìn)行抽象，從而解決大型應(yīng)用的 CSS 維護(hù)難題。社區(qū)出現(xiàn)的 CSS IN JS 解決方案，目前看來(lái)就是可行解決方案，其本質(zhì)在于通過(guò) JavaScript 來(lái)聲明，維護(hù)樣式，以 styled-components 舉例：
const Button = styled.button`
border-radius: 3px;
padding: 0.25em 1em;
color: palevioletred;
border: 2px solid palevioletred;
`;
function Buttons() {
return (
Normal Button
Primary Button
);
}
樣式寄生組件之中，組件掛載時(shí)，動(dòng)態(tài)插入樣式，實(shí)現(xiàn)按需加載，動(dòng)態(tài)生成類(lèi)名，隔離作用域。另外一種思路，通過(guò) style 屬性傳入內(nèi)嵌樣式，完全規(guī)避選擇器全局作用域的問(wèn)題。
// 官方示例有刪減
var Radium = require("radium");
var React = require("react");
var color = require("color");
// You can create your style objects dynamically or share them for
// every instance of the component.
var styles = {
base: {
color: "#fff",
},
primary: {
background: "#0074D9"
},
warning: {
background: "#FF4136"
}
};
@Radium
class Button extends React.Component {
render() {
return (
{this.props.children}
);
}
}
面向組件開(kāi)發(fā)，為樣式管理提供更多的可能性，完全使用 JavaScript 抽象，管理，維護(hù)樣式，略顯激進(jìn)，但也不失為一種解決方案。
客觀的分析
目前主流的 CSS IN JS 方案與傳統(tǒng)的方式對(duì)比如下：
優(yōu)勢(shì)：
隔離作用域 -- 樣式生效通過(guò)內(nèi)嵌，或者生成獨(dú)一無(wú)二的類(lèi)名，避免出現(xiàn)選擇器沖突；
高級(jí)編程特性 -- 充分利用 JavaScript 的能力增強(qiáng)對(duì)樣式的控制；
樣式按需掛載 -- 頁(yè)面需要的樣式才會(huì)加載，有效避免樣式冗余；
依賴(lài)管理 -- 寄生于組件，利用現(xiàn)存的 NPM 生態(tài)進(jìn)行包管理；
動(dòng)態(tài)樣式 -- 能夠更加簡(jiǎn)單，直接的修改樣式
劣勢(shì)：
無(wú)法復(fù)用現(xiàn)有生態(tài)，特性完全依賴(lài)于庫(kù)的實(shí)現(xiàn)；
編輯器代碼補(bǔ)全，語(yǔ)法檢查，語(yǔ)法高亮等需要插件支持；
偽類(lèi)選擇器（disabled、:before、:nth-child ）支持詭異；
樣式屬性駱駝式命名；
獨(dú)辟蹊徑
筆者并不完全認(rèn)同 CSS IN JS 的理念，也不反對(duì)將其應(yīng)用于生產(chǎn)項(xiàng)目。CSS 中最嚴(yán)重的問(wèn)題，不通過(guò) CSS-in-JS 也能CSS Module 方案。通過(guò)工程化的方式，將選擇器編譯為獨(dú)一無(wú)二的類(lèi)名，使用 JavaScript 管理選擇器與元素的關(guān)聯(lián)，僅此而已。
// Header.jsx
import style from "./Header.css"
// { header: "Header__header--3kSIq_0" }
export default function Header() {
return (Header!!!
);
}
優(yōu)勢(shì)：
隔離作用域 -- 類(lèi)名編譯生成，有效避免選擇器沖突；
樣式按需加載 -- 利用 tree-shaking 機(jī)制，僅保留存在引用的選擇器，有效避免樣式冗余；
依賴(lài)管理 -- 關(guān)聯(lián)組件，利用現(xiàn)存的 NPM 機(jī)制進(jìn)行包管理；
充分利用現(xiàn)有生態(tài) -- 編輯器高亮，自動(dòng)補(bǔ)全，sass ，postcss 高級(jí)編程特性；
劣勢(shì)：
欠缺動(dòng)態(tài)樣式特性 -- 無(wú)法充分利用 JavaScript 的能力增強(qiáng)對(duì)樣式的控制；
主觀的感悟
本文未涉及的 單文件組件 也是可行方案之一，目前 Vue ，Angular 等框架采用。筆者始終認(rèn)為，與其創(chuàng)造更多抽象的技術(shù)讓前端學(xué)習(xí)曲線(xiàn)更加陡峭，不如通過(guò)工程化的手段來(lái)修復(fù)存在的缺陷，理念上求同存異。面對(duì)各種技術(shù)方案，適合實(shí)際項(xiàng)目的方案才是最好的方案，選用預(yù)處理器 PostCSS ，BEM ，亦或動(dòng)態(tài)編譯，都需要結(jié)合業(yè)務(wù)場(chǎng)景、團(tuán)隊(duì)習(xí)慣等因素決策。
關(guān)注公眾號(hào)，獲取動(dòng)態(tài)，支持作者。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/112891.html
