在项目中，我们不仅要管理js代码，还要管【原创不易，请尊重版权】【未经授权禁止转载】理css代码，但是我们现在业界对js研究【作者：唐霜】本文作者：唐霜，转载请注明出处。的比较多，对css比较少，不过这两年我注【未经授权禁止转载】本文作者：唐霜，转载请注明出处。意到已经有不少有关css的新思想。不过，【原创不易，请尊重版权】【原创不易，请尊重版权】抛开这些新东西，我们的项目中，应该怎么管【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】理我们的css呢？我做了调研，大致结果如【版权所有，侵权必究】【本文首发于唐霜的博客】下：
本文作者：唐霜，转载请注明出处。【转载请注明来源】未经授权，禁止复制转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。| 方案【本文首发于唐霜的博客】 | 解释转载请注明出处：www.tangshuang.net | 优点未经授权，禁止复制转载。 | 缺点【未经授权禁止转载】 |
| Atomic CSS转载请注明出处：www.tangshuang.net | Tailwind, https://ac【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netss.io/ | 复用性，css代码量本文版权归作者所有，未经授权不得转载。 | html代码量，多处修改易漏未经授权，禁止复制转载。 |
| AMCSS著作权归作者所有，禁止商业用途转载。 | <div button=̶【原创不易，请尊重版权】未经授权，禁止复制转载。1;large blue”&转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】gt;Button</div>本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net; | ||
| OOCSS著作权归作者所有，禁止商业用途转载。 | 结构和设计的分离，容器和内容的分离【原创内容，转载请注明出处】 【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】 .mt20 { margin-top:【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net 20px } -> 样式 【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。 .flex .flex1 { flex原创内容，盗版必究。转载请注明出处：www.tangshuang.net: 1 } -> 结构 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。 .tc { text-align: c【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。enter } -> 内容 本文作者：唐霜，转载请注明出处。原创内容，盗版必究。 .abs { position: ab著作权归作者所有，禁止商业用途转载。【转载请注明来源】solute } -> 容器 【版权所有】唐霜 www.tangshuang.net【本文受版权保护】 .clearfix:after { c本文版权归作者所有，未经授权不得转载。【作者：唐霜】ontent: ”, dis【版权所有】唐霜 www.tangshuang.net【作者：唐霜】play: block; clear: 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。both; height: 0 } |
||
| SMACSS原创内容，盗版必究。 | Base 基本规则，整体样式，比如 bo【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netdy、input、button、form 转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】 Layout 布局规则，比如 顶部，页著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】脚，边栏，模块的大小等 本文版权归作者所有，未经授权不得转载。【转载请注明来源】 Module 可复用的模块样式规则【访问 www.tangshuang.net 获取更多精彩内容】 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。 State 状态样式 比如 隐藏 当前【版权所有】唐霜 www.tangshuang.net【作者：唐霜】高亮 转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。 Theme 主题 控制整体UI【原创不易，请尊重版权】 |
层次分明原创内容，盗版必究。 | 需要整体掌控易出错【本文受版权保护】 |
| MCSS本文作者：唐霜，转载请注明出处。 | multilayer CSS，层层覆盖叠【作者：唐霜】未经授权，禁止复制转载。加 | ||
| BEM著作权归作者所有，禁止商业用途转载。 | .block__element̵【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。1;modifier {} | 代码量【本文受版权保护】 | |
| scoped css原创内容，盗版必究。 | vue原创内容，盗版必究。 | 隔离【作者：唐霜】 | 依赖vue【本文首发于唐霜的博客】 |
| css modules【版权所有】唐霜 www.tangshuang.net | import * as Css from【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。 ‘./some.css&#【本文首发于唐霜的博客】未经授权，禁止复制转载。8217; | 隔离，tree shaking，编译为R【转载请注明来源】【版权所有】唐霜 www.tangshuang.netN Stylesheet对象 | 依赖编译【访问 www.tangshuang.net 获取更多精彩内容】 |
| css-in-js【本文首发于唐霜的博客】 | styled-components本文版权归作者所有，未经授权不得转载。 | 隔离，组件化本文作者：唐霜，转载请注明出处。 | 依赖运行时，代码量【原创内容，转载请注明出处】 |
实际上，没有哪一种是最好的，只有适合不适【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。合。对于我个人而言，样式隔离是一个必须选【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net项，因为我开发工具库比较多一些，我提供库本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。给别人用，别人可能还会使用其他人的库，两未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】个库之间撞名的情况很容易发生，所以，隔离原创内容，盗版必究。原创内容，盗版必究。对我来说非常重要。在考虑到各种场景后，我本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】最终使用css modules比较多，在【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。nautil中我就坚持css和css m【作者：唐霜】【原创内容，转载请注明出处】odules一起用。不过，除了隔离之外，【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】复用性就不是很好，因为很少能复用其他库的未经授权，禁止复制转载。原创内容，盗版必究。样式，最终会导致使用了我的库的站点，cs【本文首发于唐霜的博客】【原创不易，请尊重版权】s代码量可能会篇多一些。所以我说，没有那本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。个最好，只有最适合。
【版权所有，侵权必究】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。
方案列为什么会折行呢
页面宽度不够，已经调整了