1. 首页
  2. css

自动生成原子CSS

罗宾·韦瑟的《原子CSS中的速记长手问题》,讲述了一个有趣的经历。关键是,当你承担起把HTML和CSS之类的东西转换成实际的HTML和CSS的工作时,如果你能做到的话,有些边缘情况你必须自己编程解决。在本例中,Fela(我们刚才提到)将CSS转换为\”原子\”类,但是当您将速记和长手写混合在一起时,生成的类与级联会导致错误。
我认为JS中生成原子CSS的整个CSS思想非常有趣,现在让我们回顾一下,原子CSS的意思是,一个原子0,你为什么要这么做?这里有一些原因:如果你全力以赴,那就意味着你将少发CSS,因为没有重复的属性/值对,也没有为创作原因而编的类名。我猜一个全原子样式表(修剪以供使用,我们将得到)的大小是手写样式表的四分之一,或者更小。少发CSS是很重要的,因为CSS是一种阻塞资源,你可以避免命名。如果你限制可用的类,你可以\”免费\”获得一定程度的设计一致性。有些人只是喜欢它,并说它可以让他们更快。
– 它鼓励您\”清除\”未使用的类。你真的需要把这部分搞好,因为如果你不这样做,你就不会真正得到原子CSS的好处。它有一个用户界面库,所以你可以马上开始。
– 等等我们不是在说自动生成原子CSS吗?好的。值得一提的是,雅虎也是这里的早期参与者。他们的大意是,基本上使用函数作为类名(例如>),在构建步骤中将其处理为一个类(在HTML和CSS中)。我不知道它到底有多受欢迎,但是你可以看到它与Tailwind+PurgeCSS没有太大的区别。p现在,你不必编写原子CSS来获得原子CSS。在Robin的文章中:blockquote>p>它允许我们以一种熟悉的\”单一\”方式来编写样式,但却可以使用原子CSS。这增加了可重用性并减少了最终的CSS包大小。每个属性值对只呈现一次,即在第一次出现时。从那时起,每次我们再次使用特定的对,我们都可以从缓存中重用相同的类名。一些这样做的库是:•Fela•Styletron•React Native Web•Otion•StyleSheet在我看来,这是实际使用原子CSS的唯一合理方法,因为它不会影响编写样式时的开发体验。我建议不要手工编写原子CSS。。我认为这很好。我试过很多次直接写原子CSS,但我就是不喜欢。谁知道为什么。在我的生活中,我学到了很多新的东西,但这一点对我来说并不合适。但是我绝对喜欢这样的想法:计算机可以做任何他们必须做的事情来提高web在生产中的性能。如果一个构建步骤将我编写的CSS变成原子CSS…嘿,那太酷了。上面有五个库可以做到这一点,所以这个概念肯定是有道理的。在JS中,这些方法基于CSS是有意义的,因为它们绝对需要同时处理标记和CSS,所以这是最有意义的上下文。你们都怎么想?

自动生成原子CSS 为WP2原创文章,链接:https://www.wp2.cn/css/%e8%87%aa%e5%8a%a8%e7%94%9f%e6%88%90%e5%8e%9f%e5%ad%90css/