1. 首页
  2. css

缩放CSS:光谱的两面

在最近与本•弗雷恩的一个购物脱口秀节目中,关于扩展CSS的话题出现了很多。本对此进行了大量的思考,甚至写了一本完整的书《持久的CSS》,它围绕着一个完整的ECSS方法论。
他谈到了基本上有两种解决方案用于规模样式化:
1. 完全隔离
2. 完全抽象
完全隔离是一种将书写样式的范围限定在您设置的某个边界(如组件)上的版本,在该边界中,这些样式不会漏入或漏出。
Total抽象是一种全局性的、通用的、可重用的写作风格,没有任何意外的副作用。
完全隔离可能来自.vue文件中的、动态生成CSS类选择器和HTML类属性的CSS模块,或JS项目中的CSS,如glamerous。即使是严格遵循的命名约定(如BEM)也可能是一种完全隔离的形式。
完全抽象可能来自于一个项目,如超光速粒子,它为您提供了一组固定的类名来进行样式设计(Tailwind类似于可配置的版本),或者是一个编程工具(比如雾化器),它可以将专门命名的HTML类属性转换成一个样式表,并提供它所需要的内容。
这是一个有问题的中间立场。它使用了命名方法,但没有严格遵守。它在组件中使用了一些样式,但也有一个全局样式表来执行其他随机操作。或者,它有许多开发人员参与到一个没有严格规则、混合全局和范围样式的样式系统中。任何不断增长的样式表。通过删除一些未使用的样式来解决这个问题并不是一个真正的解决方案(原因就在这里)。
请注意,web是一个很大的地方,并不是所有的项目都需要一个扩展解决方案。一个拥有数百名开发人员的庞大代码库需要维护几十年,这是绝对正确的。我的个人网站没有。我也遇到过一些样式方面的问题,但我从来没有被这些问题弄得如此残废,以至于我需要实现原子CSS(等)这样严格的东西来完成工作。到目前为止我还没有做过任何工作。但我看到了好处。
想象一下推特网站十多年了!尼古拉斯有一个很好的线索,他将Twitter的PWA与Twitter的传统桌面网站进行比较。
。战争,冗余,一堆无法修复的纸牌。其结果是极为低效且容易出错的样式,这对用户和开发人员都是一种惩罚。

缩放CSS:光谱的两面 为WP2原创文章,链接:https://www.wp2.cn/css/%e7%bc%a9%e6%94%becss%ef%bc%9a%e5%85%89%e8%b0%b1%e7%9a%84%e4%b8%a4%e9%9d%a2/