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

方案列为什么会折行呢
页面宽度不够,已经调整了