大型项目如何编写和维护CSS

1. 大型项目如何编写和维护 CSS 大漠#2023.03.13#中国杭州

2. 关于我此处添加头像大漠前端码农#中国鹏城

3. 大型项目如何编写和维护 CSS 01 02 03 大型项目的特点和痛点大型项目的 CSS 编写和维护未来特性给大型项目的 CSS 编写和维护带来哪些变化

4. 01 大型项目的特点和痛点

5. 01：大型项目的特点和痛点

6. 01：大型项目的特点和痛点大型项目的特点此处添加图片大此处添加图片多

7. 01：大型项目的特点和痛点 02：组件 01：⻚面多 04：工具 03：人

8. 01：大型项目的特点和痛点协作难易冲突维护苦灵活性差

9. 01：大型项目的特点和痛点可维护性可扩展性可重用性需要考虑可维护性需要考虑可扩展性需要考虑可重用性修复一个错误或添加新的代码扩展到其他技术堆栈有多容易? Web 组件是否可重用？CSS 行是多么耗费时间，要修改多添加新功能的速度有多快?… 代码是否可重用？可重用性有少文件… 多大?...

10. 02 大型项目的 CSS 编写和维护

11. 02：大型项目的 CSS 编写和维护 1 大型项目 CSS 的编写 2 为什么大型项目的 CSS 难以管理 3 C S S 的最佳实践

12. 02：大型项目的 CSS 编写和维护 1 大型项目 CSS 的编写 2 为什么大型项目的 CSS 难以管理 3 C S S 的最佳实践

13. 02-1：大型项目 CSS 的编写此处添加图片 CSS Framework 此处添加图片自己编写 CSS

14. 02-1：大型项目 CSS 的编写 https://2022.stateofcss.com/en-US/css-frameworks/

15. 02-1：大型项目 CSS 的编写选择 CSS Frameworks VS. 自己编写CSS 项目复杂性项目时间表 CSS知识项目研发时间线是否团队否有很强的CSS 太紧项目的复杂性是否要转移可扩展性解决方案是否可扩展，可维护性添加新功能是否快修复问题是否快，未来自创升级是否容易知识 R R R R R

16. 02：大型项目的 CSS 编写和维护 1 大型项目 CSS 的编写 2 为什么大型项目的 CSS 难以管理 3 C S S 的最佳实践

17. 02-2：为什么大型项目的 CSS 难以管理 CSS is simple, but not easy

18. 02-2：为什么大型项目的 CSS 规则难以管理全局命名空间类、自定义属性、变量的命名权重（特异性） CSS 选择器、属性的权重级联规则级联层的覆盖

19. 02-2：为什么大型项目的 CSS 规则难以管理命名困难重构困难调试困难全局命名空间重构 CSS 相当困难调试复杂的 CSS 尤其困难当一切都是全局的时，任何事许多 CSS 错误都是“无声的”，在考虑代码顺序的同时还要在情都可能出乎意料地影响其他易产生无法预料的错误和副作心时计算级联和计算的最终规事情。随着更多的人和代码加用，尤其是仅加不减 CSS，造则，除此之外，还需要对 CSS 入，代码会变得越来越难以预成大量死代码存大，又很难知原理要有一定的了解测和维护道它们是否相互依赖

20. 02：大型项目的 CSS 编写和维护 1 大型项目 CSS 的编写 2 为什么大型项目的 CSS 难以管理 3 C S S 的最佳实践

21. 02-3：CSS 的最佳实践样式表和关注点分离

22. 02-3：CSS 的最佳实践维护寻找最佳实践性能可读性 C S S 架构（C S S A r c h i t e c t u r e） ,我更喜欢称之为 CSS 方法论 https://philipwalton.com/articles/css-architecture/

23. 02-3：CSS 的最佳实践 BEM OOCSS SUIT MCSS Atomic Design AMCSS ITCSS Cube CSS SMACSS CSS 方法论

24. 02-3：CSS 的最佳实践 OOCSS SMA CSS BEM ITCSS OOCSS 中的“对象”是一 SMCASS 是对不同类型 BEM 是一种模型，用于种可以抽象和重用的重复的 CSS 进行分类的指考虑如何将事物分解为组视觉模式，其思想就是识南，并且与 OOCSS 等方件、子元素以及各种离散别常⻅的视觉模式，并将法兼容。其主要想法是获状态。重复的代码块提取到可重取所有类名，并将它们组用类中。比如 Bootstrap 织到单独的桶中，并为 ITCSS 背后的主要思想之一是通过分层的⻆度来考虑样式表，以帮助控制级联。“ITCSS”来自每个渐进层形成的倒金字塔形状。这是管理大型项目 CSS 文件的一种有影响力的方法。 CSS 文件提供一些结构。

25. 02-3：CSS 的最佳实践 https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

26. 02-3：CSS 的最佳实践 https://speakerdeck.com/manz/jsday-2019-apocalipcss https://github.com/alexander-schranz/itcss

27. 02-3：CSS 的最佳实践 InlineStyle 可以在编写常规 CSS 和满足正在寻找的许多扩展属性之间取得平衡。允许我们使用 CSS 的全部功能，而不必担心样式在组件中溢出，同时将内容保持在组件目录中。基于组件的框架中通常会在组件内部应用内联样式。在像 React 这样的框架中，可以将一个 JavaScript 对象传递给 style 属性，就会将其转换为内联样式。 CSS Modules CSS in JS 重新思考关注点分离从表面上看，这看起来很像内联样式，但可以访问样式表的强大功能。因为 Styled Components、Emotion 等库而流行。旨在在不增加运行时成本的情况下为开发人员提供最佳体验

28. 02-3：CSS 的最佳实践 Tailwind CSS Atomic CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。它最初的动机就是启用样式而无需编辑或将规则附加到现有的样式表。 1. https://css-tricks.com/lets-de ne- exactly-atomic-css/ 2. https:// www.smashingmagazine.com/ 2013/10/challenging-css-best- practices-atomic-approach/ Atomic CSS 下一代工具类的 CSS 框架。Windi CSS 不会一次生成所有的 CSS，而是只会生成你在代码中实际使用到的原子化 CSS。 https://windicss.org/ UnoCSS 即使按需的 Atomic CSS 引擎 https://github.com/unocss/unocss CSS In JS https://antfu.me/posts/reimagine-atomic-css-zh Windi CSS

29. 02-3：CSS 的最佳实践 https://medium.com/analytics-vidhya/css-preprocessors-what-is-this-now-bae60c0bfedb

30. 02-3：CSS 的最佳实践 https://www.javascriptstuff.com/how-to-style-react/

31. 03 未来特性给大型项目的 CSS 编写和维护带来哪些变化

32. 03：未来特性给大型项目的 CSS 编写和维护带来哪些变化 https://www.bram.us/2022/12/20/css-in-2022-and-beyond-2022-10-07-full-stack-europe/ https://zhuanlan.zhihu.com/p/452468980

33. 03：未来特性给大型项目的 CSS 编写和维护带来哪些变化自定义属性不依赖任何 CSS 处理器，更好组织代码和管理 CSS 作用域可以和 Design Token 很好的结合在一起，实现与设计师协同开发嵌套和作用域选择器根据容器尺寸或样式调整组件样式网格，真正实现组件驱动式开发 :is() 和 :where() 改变选择器权重容器查询级联层级联层 @layer 规则，真正解决 CSS 级联规则产生的痛苦

34. 03：未来特性给大型项目的 CSS 编写和维护带来哪些变化 https://www.w3.org/community/design-tokens/

35. 03：未来特性给大型项目的 CSS 编写和维护带来哪些变化 https://uxdesign.cc/design-tokens-cheatsheet-927fc1404099

36. 03：未来特性给大型项目的 CSS 编写和维护带来哪些变化 https://github.com/design-tokens/community-group/issues/2

37. 03：未来特性给大型项目的 CSS 编写和维护带来哪些变化 https://www.w3cplus.com/css/css-layer.html

38. 03：未来特性给大型项目的 CSS 编写和维护带来哪些变化 https://juejin.cn/book/7161370789680250917/section/7164357178164248612

39. 03：未来特性给大型项目的 CSS 编写和维护带来哪些变化 https://juejin.cn/book/7161370789680250917/section/7164357178164248612 https://codepen.io/airen/full/bGjqRrg (请使用 Chrome Canary 查看)

40. 03：未来特性给大型项目的 CSS 编写和维护带来哪些变化 https://juejin.cn/book/7161370789680250917/section/7165845190614188062 https://zhuanlan.zhihu.com/p/497961289

41. 谢谢