为什么我不再使用原子 CSS

23 年 12 月 27 日 星期三
582 字
3 分钟

我并不反对原子 CSS,实际上,在了解和使用过 Tailwind CSS 和 UnoCSS 之后,我很喜欢它。

原子 CSS 的优势

  1. 原子 CSS 的学习成本不高,大部分的类名符合直觉,而且 UnoCSS 让开发体验更加直观和友好。正如 Tailwind CSS 说的那样,借助原子 CSS,我可以无需离开 HTML 快速搭建网站。这可能有点违背“关注点分离”的原则,但是确实减少了反复切换到 CSS 的次数。

  2. 另外一个原子 CSS 给我带来的好处是,我不再需要去思考该为元素起一个合适的类名。我只需要关注该元素的样式,而不需要去思考它的语义。这让我不再纠结于 container 还是 wrapperheader 还是 headnav 还是 navbar

为什么不再用了?

  1. 原子 CSS 会让 HTML 变得臃肿,它生成了大量的类名,这些冗长的类名让可阅读性变得很差。我认为代码是给人类阅读的,优秀的代码应该像一篇文章一样,让人一目了然。对于你不熟悉的项目,你需要花费一些时间才能定位到需要修改的元素。这让调试体验总是被打断。样式的不可预测性已经够让人头疼了,现在又多了一段段原子类样式。

    过多的声明成了负担
  2. 原子 CSS 使用起来非常方便,所以可以随意嵌套 HTML 结构,但是这也是它的缺点,想要写出可维护的代码要求变得更高。

  3. 它的功能并不完备,面对复杂样式,无可避免的需要使用语义化类名。

后话

长久以来,围绕原子 CSS 和语义化 CSS 的使用产生了许多的争论。喜欢原子 CSS 的人会找出一堆理由来推崇它,而反对它的人也会找出一堆它的缺点。我认为作为使用者,没有必要为此争出高低,而是应该根据实际情况来选择最适合自己的工具。我希望可以在二者之间找到一个平衡。对于我来说,原子 CSS 应该会回归到一个辅助工具的地位,而不是无节制的使用。

文章标题:为什么我不再使用原子 CSS

文章作者:柃夏chapu

文章链接:https://www.lxchapu.com/posts/why-i-dont-use-atomic-css[复制]

最后修改时间:


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用CC BY-NC-SA 4.0进行许可。