大家好，我是Pitang。近期，由于业务调整，前端工程基础建设已在集团启动。我主要负责CSS技术的选型。我对目前业界的几种主流方案进行了比较完整的研究和比较，分享给大家。目前整个CSS工具链和工程领域的主要方案如下：我们的技术选择标准是：开发速度快、调试体验友好、可维护性友好、扩展性友好、协作友好、体积小、最佳实践指导目前主要有三套方案需要对比：Less/Sass+PostCSS纯CSSc端方案styled-components/emotion纯CSS-in-JS端方案TailwindCSSHTML端方案基于编写辅助类纯CSS端方案简介及优势维护状态：一般星数：16.7K支持框架：无框架限制项目地址：https://github.com/less/less.jsLess/Sass+PostCSS目前主流组件采用此方案libraries和enterprise-level在ant-design等项目中被广泛使用，它们的主要功能如下：给CSS添加类JS的特性，也可以使用variables,mixins,writejudgements等。引入模块化的概念，可以在一个less文件中导入另一个less文件使用兼容标准，可以快速使用CSS新特性，兼容浏览器CSS差异等。这样的工具可以配合主流的工程化工具，如Webpack，并提供相应的加载器，如sass-loader，然后在React/Vue项目中创建.scss文件，编写sass语法，导入React组件即可生效。比如我写了一段sass代码，显示响应的每个断点下一个组件的情况：.component{width:300px;@media(min-width:768px){width:600px;@media(min-resolution:192dpi){background-image:url(/img/retina2x.png);}}@media(min-width:1280px){width:800px;}}或导入一些代码来标准化浏览器差异：@import"normalize.css";//其他组件相关的代码不足这类解决方案的主要问题之一是它只是增强了CSS本身，而没有提供一种方法来帮助开发人员编写更好的CSS，更高效和可维护的CSS有什么建议.你还是需要自己定义CSSclasses和ids，并思考如何组合这些classes和ids来描述HTML样式。你可能还会写很多冗余的Less/Sass代码，这会给项目造成负担。在可维护性方面优化也存在巨大问题。可引入CSS设计规范：BEM规范，协助用户在整个网页的HTML骨架和相应的类上进行设计。可以引入CSSModules来限制CSS文件的“范围”，以确保它们可以在以后维护，修改一个内容不会引起全局BEM规范B(Block)、E(Element)、M(Modifier)中其他样式的影响，具体来说，通过块、元素、行为定义所有视觉功能。以设计一个Button为例：/*Block*/.btn{}/*根据Block的Element*/.btn__price{}/*修改Block样式的Modifier*/.btn--orange{}.btn--大{}一个符合上述规范的真实按钮：$3BIGBUTTON可以实现如下效果：CSSModulesCSSModules主要是给CSS添加局部作用域和模块依赖，让CSS也可以组件化。示例如下：importReactfrom'react';importstylefrom'./App.css';exportdefault()=>{return(HelloWorld);};.title{composes:className;color:red;}上面编译后会变成如下hash串：CSS、Less、结合Sass等使用。纯JS端解决方案介绍及优势维护状态：总星数：35.2K支持框架：React，通过社区支持Vue等框架项目地址：https://github.com/styled-components/styled-components使用JS模板字符String函数，在JS中编写CSS代码，带来两个认知上的改变：不再是基于HTML编写CSS，而是从组件设计的角度，为组件编写CSS，然后应用组合组件的思路来构建大型应用程序自动提供类似于CSSModules的体验，无需担心样式的全局污染。同时带来了很多JS端独有的功能特性，让开发者可以像开发JS一样开发CSS，比如编辑器自动Completion、Lint、编译压缩等。比如我写一个按钮：constButton=styled.button`/*Adaptthecolorsbasedonprimaryprop*/background:${props=>props.primary?"palevioletred":"white"};color:${props=>props.primary?"white":"palevioletred"};font-size:1em;margin:1em;padding:0.25em1em;border:2pxsolidpalevioletred;border-radius:3px;`;render(Primary
);可以获得如下效果：还可以展开样式：//TheButtonfromthelastsectionwithouttheinterpolationsconstButton=styled.button`color:palevioletred;font-size:1em;margin:1em;padding:0.25em1em;border:2pxsolidpalevioletred;border-radius:3px;`;//AnewcomponentbasedonButton,butwithsomeoverridestylesconstTomatoButton=styled(Button)`color:tomato;border-color:tomato;`;render(TomatoButton
);可以得到如下效果：不足这种方案虽然提供了在JS中写CSS，但是充分利用了JS的插值、组合等特性，然后应用React组件等组合思想来组合组件与CSS细粒度绑定，让CSS随组件一起开发，同时提供类似于组件的模块化特性。与Less/Sass相比，它可以重用JS社区的最佳实践等。但它仍然存在一些不足：它仍然是对CSS的增强，提供了很大的灵活性。开发人员仍然需要考虑如何组织自己的CSS。没有一套“观点”最佳实践。上层也缺少styled-components复用的材质库，可以参考设计使用，导致初期使用时开发速度较低。用JS写CSS必然会带来一些属于JS的局限性。比如在TS下，需要修改Styled组件。官方维护的类型注解内容只兼容React框架。Vue和其他框架得到社区的支持。一般来说，它们不适合团队协作，需要手动总结最佳实践和规范。优化寻求一套编写CSS的最佳实践和团队合作规范可拥有大量素材库或辅助类等，提高开发效率，快速完成应用开发偏好HTML端解决方案介绍及优势维护状态：活跃之星计数：48.9K支持框架：React、Vue、Svelte等主流框架项目地址：https://github.com/tailwindlabs/tailwindcss典型的是TailwindCSS，一个辅助类优先的CSS框架，提供如flex、pt-4,text-center,rotate-90这样有用的类名，基于这些底层辅助类向上构建任何网站，只需要专注于为HTML设置类名。更形象的例子可以参考下面的代码：名称设计，然后设计两个按钮，这两个类名类似于主流组件库中Button不同状态的设计，这两个类由更基础的TailwindCSS辅助类组成：.btn{@applytext-basefont-mediarounded-lgp-3;}.btn--primary{@applybg-rose-500text-white;}.btn--secondary{@applybg-gray-100text-black;}以上辅助类包括以下几类：设置文本相关：text-base,font-medium,text-white,text-black设置背景相关：bg-rose-500,bg-gray-100设置间距相关：p-3设置角相关：rounded-lgpass@applyTailwind提供的方法用于组合这些辅助类来构建更高级别的样式类。以上最终效果如下图：我们可以看到TailwindCSS将我们网站开发的过程抽象为使用Figma等设计软件设计界面的过程，同时提供了一套设计规范，相当于内置了最佳实践，比如color和shadow，字体相关的内容，一张很形象的图就可以说明这一点：TailwindCSS为我们规划了一个元素可以设置的属性，并给出了一组可以为每个属性设置的值。这些属性+属性值组合成一个有机的设计体系，非常方便团队协作和共识，让我们开发网站像设计一样简单快捷，同时又能保持整体风格的一致。TailwindCSS也可以结合React、Vue、Svelte等主流组件库，融入基于组件的CSS设计思想，而只需要修改HTML上的类名即可，比如我们设计了一个菜谱组件：//Recipes。jsimportNavfrom'./Nav.js'importNavItemfrom'./NavItem.js'importListfrom'./List.js'importListItemfrom'./ListItem.js'exportdefaultfunctionRecipes({recipes}){return({recipes.map((recipe)=>())}
