项目CSS管理方案对比

广告位招租
扫码页面底部二维码联系

在项目中,我们不仅要管理js代码,还要管【原创不易,请尊重版权】【原创不易,请尊重版权】理css代码,但是我们现在业界对js研究本文作者:唐霜,转载请注明出处。原创内容,盗版必究。的比较多,对css比较少,不过这两年我注未经授权,禁止复制转载。【本文受版权保护】意到已经有不少有关css的新思想。不过,【原创内容,转载请注明出处】原创内容,盗版必究。抛开这些新东西,我们的项目中,应该怎么管本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net理我们的css呢?我做了调研,大致结果如【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。下:

【本文受版权保护】【未经授权禁止转载】未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】
方案【访问 www.tangshuang.net 获取更多精彩内容】 解释本文作者:唐霜,转载请注明出处。 优点原创内容,盗版必究。 缺点【版权所有,侵权必究】
Atomic CSS著作权归作者所有,禁止商业用途转载。 Tailwind, https://ac转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。ss.io/ 复用性,css代码量【关注微信公众号:wwwtangshuangnet】 html代码量,多处修改易漏【作者:唐霜】
AMCSS本文版权归作者所有,未经授权不得转载。 <div button=̶【转载请注明来源】【转载请注明来源】1;large blue”&【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。gt;Button</div>著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】;
OOCSS【原创内容,转载请注明出处】 结构和设计的分离,容器和内容的分离原创内容,盗版必究。
著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net .mt20 { margin-top:原创内容,盗版必究。未经授权,禁止复制转载。 20px } -> 样式
转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。 .flex .flex1 { flex【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】: 1 } -> 结构
未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。 .tc { text-align: c【本文受版权保护】未经授权,禁止复制转载。enter } -> 内容
【转载请注明来源】【本文首发于唐霜的博客】 .abs { position: ab【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】solute } -> 容器
【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。 .clearfix:after { c【转载请注明来源】【本文首发于唐霜的博客】ontent: ”, dis【作者:唐霜】原创内容,盗版必究。play: block; clear: 【作者:唐霜】本文作者:唐霜,转载请注明出处。both; height: 0 }
SMACSS本文版权归作者所有,未经授权不得转载。 Base 基本规则,整体样式,比如 bo原创内容,盗版必究。【未经授权禁止转载】dy、input、button、form
著作权归作者所有,禁止商业用途转载。【作者:唐霜】 Layout 布局规则,比如 顶部,页【版权所有,侵权必究】【版权所有,侵权必究】脚,边栏,模块的大小等
【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。 Module 可复用的模块样式规则【本文受版权保护】
未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。 State 状态样式 比如 隐藏 当前原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net高亮
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】 Theme 主题 控制整体UI【版权所有】唐霜 www.tangshuang.net
层次分明【版权所有】唐霜 www.tangshuang.net 需要整体掌控易出错【本文首发于唐霜的博客】
MCSS著作权归作者所有,禁止商业用途转载。 multilayer CSS,层层覆盖叠【转载请注明来源】【作者:唐霜】
BEM【关注微信公众号:wwwtangshuangnet】 .block__element̵未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net1;modifier {} 代码量转载请注明出处:www.tangshuang.net
scoped css著作权归作者所有,禁止商业用途转载。 vue【原创内容,转载请注明出处】 隔离【未经授权禁止转载】 依赖vue【原创不易,请尊重版权】
css modules本文作者:唐霜,转载请注明出处。 import * as Css from未经授权,禁止复制转载。【原创不易,请尊重版权】 ‘./some.css&#【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】8217; 隔离,tree shaking,编译为R转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。N Stylesheet对象 依赖编译转载请注明出处:www.tangshuang.net
css-in-js转载请注明出处:www.tangshuang.net styled-components【访问 www.tangshuang.net 获取更多精彩内容】 隔离,组件化【原创不易,请尊重版权】 依赖运行时,代码量本文版权归作者所有,未经授权不得转载。

实际上,没有哪一种是最好的,只有适合不适【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】合。对于我个人而言,样式隔离是一个必须选原创内容,盗版必究。未经授权,禁止复制转载。项,因为我开发工具库比较多一些,我提供库【本文受版权保护】【本文首发于唐霜的博客】给别人用,别人可能还会使用其他人的库,两【作者:唐霜】原创内容,盗版必究。个库之间撞名的情况很容易发生,所以,隔离著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。对我来说非常重要。在考虑到各种场景后,我本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】最终使用css modules比较多,在【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】nautil中我就坚持css和css m转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.netodules一起用。不过,除了隔离之外,本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】复用性就不是很好,因为很少能复用其他库的著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】样式,最终会导致使用了我的库的站点,cs本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】s代码量可能会篇多一些。所以我说,没有那【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。个最好,只有最适合。

【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】
已有2条评论
  1. 1188 2022-03-18 14:35

    方案列为什么会折行呢

    • 否子戈 2022-03-18 19:48

      页面宽度不够,已经调整了