本文转载自微信公众号《前端那些有趣的故事》，作者舒江军。转载本文，请联系前端那些有趣的事情公众号。说起css，印象最深的是刚毕业开始做前端开发岗位的时候，作为一个剪图男孩（cutpictureboy），在页面排版和还原设计图上广泛使用css开发页面，记得一开始接触最多的是Bootstrap（用来开发响应式布局，移动设备优先的WEB）。但是随着前端编程的飞速发展，出现了element、antdesign等优秀的UI库，对比之下感觉审美疲劳。言归正传，css这几年催生出不少新的解决方案，比如CSSModules、styled-components（js中的css）、FunctionalCSS、CSSatomicclasses、CSSsandbox等。1.CSSModuleCSSModule，作为顾名思义，就是一个CSS模块为什么需要模块化？我们知道，基于vue和react开发SPAweb应用，本质上都是由多个组件搭建而成，就像搭积木盖房子一样。如果这时候两个组件的样式和类名重复了，那岂不是冲突了？为了解决冲突，需要模块化。在没有命名冲突的情况下，最好将组件沙盒化。CSSModule是CSS模块化的实现方式之一。CSSModule被封装后的类名会根据命名规则转换成一个带哈希值的新类名，防止css类名冲突的问题。啊同学：Vue:scoped样式的实现方式是CSSModule吗？答：不是，CSSScope是通过限定作用域实现的，样式在本地生效，不是真正的CSSModule。我们知道，当style标签带有scoped属性时，其css样式只能用于当前的Vue组件。它的实现原理是通过PostCSS实现的，通过给对应的dom添加一个属性，在css选择器中添加一个新的对应的属性对应这个唯一的dom，如下图以及css模块是如何实现的？以vue为例，如何使用CSS模块webpack直接使用文档导入vue-loader？？[1]vue-cli3内置，开箱即用，只需要在style标签中标注module，即可在组件中使用CSSModules。更多操作参见文档。使用文档[2]我们来看看CSSModule在Vue项目中的编译效果。可以看出，CSSModules会在最终构建页面时自动重命名该类。根据Vue的官方描述，这个模块特性引导VueLoader将CSSModules本地对象作为一个名为$style的计算属性注入到组件中。然后您可以通过模板中的动态类绑定来使用它。乐同学：你说CSSModule是CSS模块化的一种实现。CSS模块化还有其他实现吗？有的，比如BEM的命名约定，以及下一节要介绍的JS中的CSS，这里简单介绍一下BEM以供扩展阅读：CSSModulesUsageTutorial[3]BEMOfficialSpecification[4]2.JS中的CSSJS中的CSS，顾名思义，就是将应用程序的CSS样式写在JavaScript文件中，使用JS语言编写CSS，包括用.css、.less、.scss等。通过使用es6语法的标签模板字符串语法为组件定义css属性，我们不需要设置className类名~下面雪同学看一下demo：styled-components为React而生，所以Vue可以用回答：是的，styled-components团队专门为Vue开发了一个vue-styled-components，和React的styled-components用法非常相似。如果你有兴趣，你可以玩它。玩不好（不过这个仓库？有点，好像很小，style-component写起来确实有点别扭）但是我一直觉得CSS-in-JS会越来越流行文档链接？？[5]扩展：styled-components官网[6]3．事实上，CSS原子类的概念很古老。本质上是一种写??CSS的思路。简而言之，就是用原子类构造一个选择器。比如我们定义一个base。选择器，如mgt20（代表margin-top:20px）等，优点是易于提取重用代码，提高代码重用度，但过度抽象也会带来巨大的维护成本。3.1TailwindTailwind官网链接[7]其实本质上是一个原子类思想，一个类代表一个CSS属性。好处是把类拆分的足够细，粒度小，很好，很“原子”。在国外很流行，因为自定义属性强，类名语义强，你再也不用为类名的取舍发愁了（毕竟我们一个组件可能需要n个类开发），定制就像积木一样，但国内争议比较大。早期的atomic类在国内基本都是被喷的，但是2020年以后态度变了，下面看demo。官方的如何实现卡片的例子，一看就是一大堆类名，不过确实看着简单，可以搭建，就是粒度太小了~问题也暴露了，不好记。使用使用它，就像小时候拿起字典查单词一样。请查看顺风书的链接[8]。当前版本的推特是基于tailwind的。我们可以在控制台中清楚地看到它。挺丰富的，赞助了vite的广告位进一步阅读：如何评价CSS框架TailwindCSS？[9]3.2bulmaBulma是一个免费、开源的现代CSS框架，基于Flexbox布局技术。刚开始接触的时候，是在社区看到基于Bulma的。用于Vue.js的轻量级UI组件buefy。它完全基于CSS，不需要javascript。这也是他和boostrap最大的区别。不过现在不是很主流，这里就不多说了。有兴趣的同学可以详细了解一下。你可以看到下面的例子。学习使用CSS框架并不是最终目的。它只是提高生产力的工具。工具的目的是提高我们的开发效率，最终赋能到我们的产品上，所以不用太担心你是否用过这些框架。毕竟，你不可能使用所有的框架。也就是说，了解原理也是可以的，可以提高自己的认知，扩展阅读：CSSFrameworkBulmaTutorial[10]https://buefy.org/[11]4.CSSSandbox（沙箱）csssandbox简单来说就是起到风格隔离的作用，互不干扰。前端跟微前端接触比较多。毕竟要保证各个集成的应用风格互不干扰。因为应用可能是由不同的团队成员开发的，所以会出现类名冲突是很正常的。最早的实现方式应该是iframe，iframe自带天然隔离，但是这种方式有很多局限性，有几点和我们上面提到的一样，比如scopedCSS：通过定义属性scoped，可以与DOMtreetolimitthescopeofCSScssinjsandCSSModuleusetoolstocompilestylesintoscriptsandremovetagsinthehead:这也是qiankun（微前端框架）的csssandbox的原理，就是通过在运行时记录子项目时添加style/link标签，这些标签在子项目卸载时被删除。重新添加新加载的子项的标签，实现shadowDOM：可以理解为dom中的dom，它是Web组件的一个重要属性，可以让隐藏的DOM树依附于常规DOM树.缺点是兼容性比较低。差，可以看看兼容性？？[12]延伸阅读：使用shadowDOM[13]参考[1]使用文档https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95[2]使用文档？https://cli.vuejs.org/zh/guide/css.html#css-modules[3]CSSModules使用教程：http://www.ruanyifeng.com/blog/2016/06/css_modules.html[4]BEM官方规范：http://getbem.com/[5]文档链接https://github.com/styled-components/vue-styled-components[6]styled-components官网：https://styled-components.com[7]官网链接：https://www.tailwindcss.cn/[8]查看链接：https://tailwindcss.com/docs/border-radius[9]如何评价CSS框架TailwindCSS？:https://www.zhihu.com/question/337939566[10]CSS框架Bulma教程：http://www.ruanyifeng.com/blog/2017/10/bulma.html[11]https://buefy.org/：https://buefy.org/[12]兼容性：https://www.caniuse.com/?search=shadow%20DOM[13]使用shadowDOM：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM
