前几天我们开会讨论新项目的技术选型和项目本文作者：唐霜，转载请注明出处。【作者：唐霜】结构，其中讨论到样式管理的部分，争论一下未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。子多起来。前端样式，最终的表现还是css著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。，但是在开发时，则会有多种多样的管理方式原创内容，盗版必究。转载请注明出处：www.tangshuang.net。之所以争论多，也是因为管理方式太多，不【本文受版权保护】【关注微信公众号：wwwtangshuangnet】同的开发者想法不一致引起的。本文就来梳理著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。一下在前端项目中样式的管理，以及表达我自【转载请注明来源】【本文首发于唐霜的博客】己的样式管理方式。

理解css-loader

css-loader是我们在现代前端开发著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】中必须掌握的一个东西，它给我们提供了cs未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。s在前端开发中的一种工作模式，并且我们很【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】多关于css的东西都基于此。

它功能主要是解释样式（css）中的imp【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】ort和url，并且把它们认作一个资源模【未经授权禁止转载】转载请注明出处：www.tangshuang.net块，用webpack的模块化方式requ【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netire这个资源，完成这一步之后，在读取资【版权所有，侵权必究】【未经授权禁止转载】源内容，并进行解析或转化。在读取的时候，未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。它基于file-loader或者url-【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】loader，因此，要了解读取资源内容这【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】个步骤的原理，可以再深入去了解这两个lo【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ader。也就是说，在css-loade【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】r的作用下，就像js里面，你不断impo【本文受版权保护】著作权归作者所有，禁止商业用途转载。rt一层一层的模块一样，css文件里面，【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。也可以做到这样的效果。

但你需要理解css-loader的输入和【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】输出，它的输入是css样式表（里面包含了【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。import等），输出是将import的【作者：唐霜】著作权归作者所有，禁止商业用途转载。东西打包进来之后的css样式表（不再包含【本文受版权保护】【关注微信公众号：wwwtangshuangnet】import），css-loader就是本文版权归作者所有，未经授权不得转载。【本文受版权保护】一个css的打包器。因此，在对scss/【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。less/postcss等样式处理器的l【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。oader进行使用时，要把它放在css-未经授权，禁止复制转载。【原创不易，请尊重版权】loader之前运行（在webpack配【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。置中放在css-loader之后）。而类原创内容，盗版必究。【转载请注明来源】似style-loader、extrac【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。t-loader这样对css样式表结果进【未经授权禁止转载】本文作者：唐霜，转载请注明出处。行后置处理的loader，则要放在css【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】-loader之后处理。style-lo未经授权，禁止复制转载。【转载请注明来源】ader是将这些处理好之后的css样式表【转载请注明来源】本文版权归作者所有，未经授权不得转载。，用一个<style>标签包【转载请注明来源】【转载请注明来源】起来，直接（动态）插入到html文档中。

在css-loader是一个“css的打本文作者：唐霜，转载请注明出处。【未经授权禁止转载】包器”的基础上，css-loader还是【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net一个css语法的增强器。css-load转载请注明出处：www.tangshuang.net【未经授权禁止转载】er提供了css module的功能，即【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。css in js，将css作为一个模块【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】，导出css接口的形式。这非常适合jsx【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】的开发模式，它不仅可以使使用方式更现代，【转载请注明来源】【原创不易，请尊重版权】而且还可以起到css的局部作用域效果。包【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。括vue里面的scoped style也未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。是这样实现的。但是实际上，css mod转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netule是使得样式的类名随机化，并且在js【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】x里面使用的值到最后编译的结果是随机类名【转载请注明来源】【版权所有】唐霜 www.tangshuang.net，这样就可以不冲突。但是，需要注意的是，原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。同一个css module被引用到不同j【作者：唐霜】未经授权，禁止复制转载。s module时，该css modul著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。e输出的类名是一样的。此外，@impor转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nett语法支持用~引用node_module原创内容，盗版必究。【原创内容，转载请注明出处】s里面的模块。

集中管理 vs. 组件化管理

在项目中组织管理样式文件也是一个麻烦事。【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】传统的开发模式将所有的样式文件集中放在一转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。起，这样做的好处是样式复用非常方便，大部转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】分ui框架就是在这样的管理模式下出现的。【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】但是组件化开发潮流之后，将样式和组件文件本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】放在一起的思想流行起来，进而不少人开始习转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】惯将同一个模块的js和样式文件放在一起管本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】理。

写这篇文章的时候，我并不能准确的说，到底【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。哪一种更好，因为集中管理和组件化管理各有转载请注明出处：www.tangshuang.net【未经授权禁止转载】自己的道理。但是，我又不能用“根据实际情【转载请注明来源】未经授权，禁止复制转载。况选择适合自己的”这样的话来搪塞。

集中管理有自己的优势，所有的样式放在一个【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。地方，通过文件名区分一个样式文件对应什么原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】模块或组件，找起来也不慢。样式和组件并不转载请注明出处：www.tangshuang.net【未经授权禁止转载】一定要绑定在一起，如果直接在组件文件内引本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】用样式，那么你在某个地方需要用另一套主题【未经授权禁止转载】原创内容，盗版必究。去渲染这个组件的时候就比较麻烦，所以，将转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】组件和样式分离，用名称绑定在一起，也是一原创内容，盗版必究。【原创不易，请尊重版权】种非常好的选择。从各个方面来讲，集中管理【本文首发于唐霜的博客】【原创不易，请尊重版权】样式文件没有明显的坏处。

组件化管理样式文件是一种新的习惯，它更多【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】的是从模块管理的角度思考。一个模块/组件【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】，包含了DOM结构、样式，以及js逻辑代【转载请注明来源】著作权归作者所有，禁止商业用途转载。码。特别是受web-component的【原创内容，转载请注明出处】【原创内容，转载请注明出处】影响，vue发明了.vue文件，将模板、著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。js、样式写在一个文件里面，这样一个组件转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。就是一个文件，要了解一个组件的全部工作原本文版权归作者所有，未经授权不得转载。【转载请注明来源】理，不需要打开多个文件。但是很明显，组件【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】的复用仅限于组件作为一个整体来复用，不能【原创内容，转载请注明出处】【原创内容，转载请注明出处】把里面的某个样式挑出来复用。

文本形式 vs. 模块形式

css module概念提出之后，并没有【作者：唐霜】【未经授权禁止转载】受到广泛的追捧。大部分项目仍然使用cla【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netssName字符串的形式引用样式。但在某【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】些项目中，我尝试使用css module【转载请注明来源】著作权归作者所有，禁止商业用途转载。之后，发现绝对是比较现代化可接受的一种新【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】形式。文本形式直接使用className著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】会比较适合集中式文件管理，你需要提供所有【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】的类名给开发者，让他们知道每一个类名，才原创内容，盗版必究。【作者：唐霜】能在代码中准确挑选className。你本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。可以遵循BEM的样式名规范，方便开发者查【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。找样式。

但是，css module的形式则不需要本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net进行推测。也就是说，在使用过程中，开发者【作者：唐霜】本文版权归作者所有，未经授权不得转载。是根据你的css module导出的接口著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】来进行使用，而非约定的className著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。，这样对于开发者而言，他不需要去记忆和查本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。阅既定的样式名，只需要像一个模块一样，使【本文受版权保护】【版权所有，侵权必究】用模块导出的接口作为样式名。模块导出的接本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。口，其返回值代表了实际的类名，但这个类名【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。可能是一个随机字符串。

另一个值得关注的是，在react nat本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ive这种形式的开发中，样式并不遵循we【关注微信公众号：wwwtangshuangnet】【本文受版权保护】b标准，所以在使用的时候，样式被以运行时【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】的形式直接载入到程序进程中。所以，使用c【版权所有，侵权必究】【本文首发于唐霜的博客】lassName的形式不是很符合这样的开【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】发。当然，实际上，我们的构建工具可以帮助未经授权，禁止复制转载。【版权所有，侵权必究】我们从样式中寻找出对应的classNam【版权所有，侵权必究】【版权所有，侵权必究】e，并把样式在运行时进行载入，但这与re【未经授权禁止转载】【版权所有，侵权必究】act native推荐但形式差的有点远转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】。

通用的样式管理和使用方法

这里指的“通用”是指跨平台、跨端，向后兼【作者：唐霜】【版权所有】唐霜 www.tangshuang.net容。用一种方法去管理和使用样式，通过构建【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。工具，使得同一套代码，能够适用于web、【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netnative、小程序的开发。

• 集中管理样式文件，使用有损的css标准子本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。集撰写样式，“有损”主要是希望同一套样式【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。可以适用于react native
本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】
• 采用css module的形式使用css【转载请注明来源】转载请注明出处：www.tangshuang.net类
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua【本文受版权保护】【原创不易，请尊重版权】ng.net本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。ng.net
• 发挥css-loader的compose【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。能力，避免css多层选择器（css mo原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。dule仅适用单层选择器）
【原创不易，请尊重版权】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。ng.net转载请注明出处：www.tangshua未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。ng.net
• 将css转化为Stylesheet Ob【转载请注明来源】本文版权归作者所有，未经授权不得转载。ject后使用于react native【原创内容，转载请注明出处】【作者：唐霜】中
【访问 www.tangshuang.n【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【本文受版权保护】

之所以使用集中管理，而不是流行的组件化管【版权所有，侵权必究】【版权所有，侵权必究】理，是为了复用，我们通过文件名来区分不同【原创内容，转载请注明出处】未经授权，禁止复制转载。的样式文件是关于什么主题的。这样，实际上著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。，我们更容易在开发中对样式进行调整。而且【本文受版权保护】【本文首发于唐霜的博客】，扁平化的集中管理会减少一个节点的样式分【版权所有】唐霜 www.tangshuang.net【转载请注明来源】散在不同目录时进行修改的尴尬。

css转化为Stylesheet obj【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】ects的方法目前还不是很多，我所找到的【本文受版权保护】本文版权归作者所有，未经授权不得转载。库有css-to-react-native、css-to-react-native-【关注微信公众号：wwwtangshuangnet】【本文受版权保护】transform、css-to-rn.macro、emotion。另外，你可以参考Tora在样式上的一些规范，以了解这个问题上他们是怎么处理的。

2019-06-15 5729