CSS解决方案

背景随着前端项目的复杂度越来越高，如何构建可维护、可重用、可配置的CSS代码成为了每个前端工程师需要思考的问题。问题本质：CSS最初是为了描述网页的风格而提出的，不具备编程语言的特性。因此，在前端工程化的道路上，CSS暴露了一些问题，阻碍了它：全局范围、没有模块复杂系统、多人协作的概念，容易出现风格冲突，难以维护；缺乏变量、函数等编程语言的特性，不利于通用属性、样式的抽象和复用；每个浏览器及其不同的版本是不同的。CSS语法支持的程度和支持方式的不一致，具体体现在是否支持某些功能上。同一个属性在不同的浏览器中有不同的属性名；根据不同状态渲染样式时（这里称为StateStyling），需要定义多个类，可读性差；.....针对这些问题，爱折腾的前端程序员探索了各种技术和解决方案。本文简单介绍常用的CSS技术，然后分享两种常见的CSS工程解决方案，希望能帮助像我一样对这些概念比较模糊的同学对此有一个系统的认识。BEMBEM（Block__Element--Modifier），是一种CSS命名约定，看例子：风景对应Block，天空，地面，人物对应Element，黄昏对应修饰符。不难看出，BEM的本质其实就是将HTML元素的层级关系和元素自身的状态结合起来，形成元素唯一的className，旨在解决全局作用域带来的样式冲突问题的CSS。但BEM毕竟是一个规范，而不是一个框架。Block、Element、Modifier的命名需要开发者思考。引用某位大牛的话：“命名和缓存失效是计算机领域最难的两件事”。可见BEM会增加开发人员的工作量。另外，当HTML结构复杂时，BEM形式的className会很长，可读性差，增加了代码文件的体积。CSSPreprocessorCSS预处理器（CSSPreprocessor）是一类CSS框架，旨在增强CSS语言功能，从而帮助开发者编写可重用和可维护的样式代码。主流的CSS预处理器包括：Sass、Less、Stylus，它们都以DSL的形式为开发者提供更强大的语言特性（Sass：.scss/.sass，Less：.less，Stylus：.styl），然后将它们编译成浏览器可以理解的.css文件。SassSass(SyntacticallyAwesomeStylesheets)被誉为世界上最成熟、最强大的CSS预处理器。没什么不对，Sass拥有庞大的用户群，活跃的社区和详细的文档是它的优势之一。最初基于Ruby，后来衍生出libSass和DartSass，使得Sass编译速度更快。Sass具有强大的功能。它为CSS扩展了变量、Mixin、继承、数学运算等编程语言功能，优化了CSS本身的语法。例如，适当使用嵌套可以使样式结构更加清晰；它提供了不会产生额外的http请求的导入，还提供了一组强大的内置函数。LessLess(LeanerStyleSheets)基于JS，其设计理念尽可能类似于CSS语法和函数式编程。Less甚至向后兼容CSS，这意味着在将旧项目迁移到Less时，您可以直接将CSS代码复制到.less文件中。当然，你仍然需要使用Less提供的功能进行修改，但这无疑减少了工作量。.所以Less上手快，但相对Less功能较弱。比如它没有提供类似Sass的@function功能，Mixin不适用于需要返回值的情况；又如Less的extend函数实际上是将Extended对象的样式复制到目标对象中，而不是像Sass那样为多个类定义相同的样式，造成代码冗余。例如：/*LessCode*/.header{padding:2px;字体粗细：粗体；}h1{.header;/*扩展.header样式*/font-size:42px;}h2{.header;/*扩展.header样式*/font-size:36px;}编译结果:.header{padding:2px;字体粗细：粗体；}h1{填充：2px；字体粗细：粗体；字体大小：42px；}h2{填充：2px；字体粗细：粗体；font-size:36px;}StylusStylus基于NodeJS，提供更强大的功能，同时适当地接近CSS语法。它看起来像是Sass和Less的结合。Stylus的语法是python风格，崇尚简洁，所以建议不要写花括号，当然这是可选的。查看Stylus代码：border-radius()-webkit-border-radius:arguments-moz-border-radius:argumentsborder-radius:argumentsbodyfont:12pxHelvetica,Arial,sans-serifa.button{border-radius:5px可以看到，Stylus在定义函数、变量或者mixins时，甚至不需要像sass一样添加$、@等符号，语法非常简洁。总的来说，Sass有详细的文档，成熟的社区，相对强大的功能和编译速度；Less向后兼容CSS，学习曲线平缓，迁移旧项目的难度较小，但功能不如Sass和Stylus强大；Stylus是最强大的Big，语法最简洁，但文档可读性较差。PostCSS此外，我们来谈谈PostCSS。PostCSS本质上是一个平台。该平台本身不对CSS做任何增强。它只是将CSS解析为AST并将其提供给插件。所有需要的功能都可以通过插件灵活定制（babel也是这样的Thought），比如Autoprefixer、类似babel-preset-env的PostCSSPresetEnv、CSSModules、stylelint等，你甚至可以自己写插件-插件。因此，也可以将上面三个替换成PostCSS，即找到对应的需要语法功能的PostCSS插件，如：postcss-partial-importpostcss-advanced-variablespostcss-nested...CSSModulesCSSModules是一个CSS模块化规范：通过为CSSRule生成一个唯一的类名，默认在本地制作每个CSSModule下的CSSRule。当然，也可以声明全局规则。CSS模块导出映射本地类名和全局类名：/*style.css*/.className{color:green;}importstylesfrom"./style.css";//import{className}from"./style.css";element.innerHTML='';此外，它还支持同一模块或不同模块内CSSRules之间的复合，提高了样式的复用性。常见的实现有webpack的css-loader，以及针对React优化的HOC版react-css-modules。//css-loader{test:/\.css$/,loader:'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'}//react-css-modulesimportReactfrom'react'；从'react-css-modules'导入CSSModules；从'./table.css'导入样式；classTableextendsReact.Component{render(){returnA0