大型项目如何编写和维护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. 谢谢

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.123.1. UTC+08:00, 2024-03-29 13:28
浙ICP备14020137号-1 $访客地图$