跳到主要内容

2016年是Atomic CSS的一年吗?

如果你熟悉布拉德弗罗斯特的话原子设计要么模式实验室你可能想知道如何应用它网站布局像CSS这样的样式语言;它并不像其他编程语言那样结构化,所有原子设计的例子都涉及HTML的组织。

但是,如果您实际应用了模式实验室网页风格指南对于一个项目,您将很快发现任何可以分解为基本可重用代码的内容都可以使用Atomic Design。

这不可避免地找到了通往CSS的方式,并导致了原子CSS(ACSS)的兴起。 ACSS已经存在了一段时间,但直到2015年初并没有真正引起人们的关注,并且它的受欢迎程度越来越高。

那么 - Atomic CSS是什么?

ACSS是一种为一个CSS属性使用一个类的方法,因此可以在站点的不同部分使用相同的属性。这消除了在样式表中复制该属性的可能性,因为类本身在HTML中被多次使用。这样可以生成更小,更“干燥”的样式表,也是快速处理网页上原型布局和组件的好方法。

这通常会导致在HTML元素上使用多个CSS类,类似于下面所示:

文本

上面的语法可能会让你感到震惊,因为你之前可能从未见过用于CSS类名的括号,并且可能看起来不必要,但它对复杂的原子类(如伪类和媒体查询)有意义。这不是编写原子类的正式方法,但它是迄今为止我发现的最佳方法。

使用括号表示类名

为了让浏览器读取类名中的括号,需要在CSS中进行转义。我不想在本文中过多地谈论转义字符,但这是一个简单的方法,包括在你想要转义的字符之前放置一个反斜杠\。如果我们想用属性text-transform:uppercase创建一个原子类,那么HTML中的类看起来就像他的tt(u)和CSS .tt \(u \)。所有现代浏览器都支持在CSS中转义字符,但我相信IE8有一些问题。如果您想了解更多,我建议您阅读本文Mathias Bynens

包括原子css类名中的括号的另一个好处是,它明确地将它们与非原子类分开,因为括号因为它是命名空间类的最佳实践。哈里罗伯茨写了一篇伟大的文章关于命名空间类的文章而我自己也想出了一种可重复使用的方法具有命名空间类的组件。如前所述,您可以根据需要编写原子类。

那么BEM呢?

在我看来,原子类只应该用于将在整个站点中重用的属性,对于你知道不会改变的属性,可以坚持使用BEM,或者你喜欢的任何命名约定。比如说你的网站有一个默认的输入框样式,我认为在使用BEM作为该类名并在此之后添加原子类没有任何问题。例如:

可以拥有这些属性:

.c-form__input {border-radius:2px;边框:1px solid#555;白颜色;身高:30px; }

这些属性构成输入元素的基本状态,其他状态(如成功或错误)可能会添加原子类。

.bd \(green \){background:green} .bd \(red \){background:red}

内联样式和ACSS之间有什么不同

简而言之,没有太大区别,但是对每个元素使用内联CSS可能会导致重复属性,而使用acss时,属性只会写入一次。我仍然建议内联关键css,但如果它们将被反复使用,则不会向元素添加属性。

这会导致CSS膨胀吗?

如果有未使用的类,ACSS可能会导致膨胀。您可以使用诸如此类的工具来避免这种情况Uncss要么净化CSS删除未使用的生产样式。然而,ACSS的最佳工具是雅虎的雾化器它读取文档中使用的原子类(或几个所有文档),并自动将相关的CSS添加到目标文件中。 Atomizer与gulp和grunt一起使用,这意味着它很容易添加为您的前端进程之一。

我如何说服我的上司使用这种技术?

雅虎和Mailchimp等大型知名公司不仅已在其生产代码中使用ACSS,而且如果您相信面向对象CSS(OOCSS),则ACSS在进一步模块化代码时更有意义。

我认为原子CSS(不要与原子设计混淆)代表OOCSS取得了n度。

-本弗兰

结论

我非常相信ACSS,并且不相信我可以在没有它的情况下重新创建一个基于Web的项目。我还没有尝试过类似的东西对于React,我还没看到它有多么不同CSS模块,但如果您目前没有使用这些工具(即使您是),我相信您会发现它是一种非常有益的方法,可以使您的CSS属性可重用。



翻译字数超限