与安迪·贝尔一起粉碎播客第 19 集：什么是 CUBE CSS？

今天，我们谈论的是 CUBE CSS。 它是什么，它与 BEM、SMACSS 和 OOCSS 等方法有何不同？ 我与它的创造者安迪贝尔交谈，以找出答案。

显示注释

• 多维数据集 CSS
• 皮卡利利
• 从零开始学习 11 - 节省 40%！
• 安迪·贝尔和皮卡利利在推特上

注意： Smashing Podcast 的听众可以使用代码SMASHINGPOD在 Andy 的 Learn Eleventy From Scratch 课程中节省高达 40% 的费用。

每周更新

• “维特鲁威能教给我们什么关于网页设计的知识”
  弗雷德里克·奥布莱恩
• “SWR 简介：用于远程数据获取的 React Hooks”
  易卜拉希玛·恩道
• “网页设计师如何帮助餐厅进入数字体验”
  苏珊娜·斯卡卡
• “使用 Jest 测试 React 应用程序的实用指南”
  通过 Adeneye 大卫 Abiodun
• “Django 亮点：处理静态资产和媒体文件（第 4 部分）”
  菲利普·凯利

成绩单

Drew McLellan：他是英国的教育家和自由网页设计师，在设计师网页行业工作了十多年。 在此期间，他曾与世界上一些最大的组织合作，如 Harley-Davidson、BSkyB、联合利华、甲骨文和 NHS。 与 Heydon Pickering 一起，他是 Every Layout 的合著者，并经营着 Front-End Challenges Club，该俱乐部专注于通过简短有趣的挑战教授前端开发最佳实践。

Drew：他的最新项目是 Piccalilli，这是一个包含教程和课程的网站时事通讯，可帮助您升级为前端开发人员和设计师。 所以我们知道他是一位经验丰富的开发人员和教育家，但你知道他是第一个获准在 Crufts 与熊猫比赛的人吗？

德鲁：我的 Smashing 朋友们，请欢迎，安迪·贝尔。 嗨，安迪，你好吗？

安迪·贝尔：我太棒了，谢谢。 你好吗？

德鲁：我很好，非常感谢。 今天我想和你谈谈你在你的网站 Piccalilli 上发布的一些内容，关于你近年来为自己开发的一种 CSS 方法。 首先，我想我们应该探索一下 CSS 方法的含义，因为这对不同的人可能意味着不同的东西。 所以当你想到 CSS 方法论时，它对你来说是什么？

安迪：德鲁，这是一个很好但很难开始的问题。 欣赏，谢谢！

德鲁：欢迎！

安迪：这是一个棘手的问题。 所以，就上下文而言，我已经使用 BEM 很长时间了，那就是块元素修改器。 这已经存在了很长时间。 我对 CSS 方法论的看法是，它不是一个框架，而是一个组织结构。 这就是我喜欢看的方式。 这几乎就像一个过程。 就像你遇到了一个需要用 CSS 解决的问题，然后你使用这种方法来为你解决它，并使事情保持可预测和有条理。 BEM 之所以具有传奇色彩，是因为它非常成功。

Andy：那么你几乎可以限定样式组件之类的东西。 你几乎可以说它们是以方法论为导向的，尽管它们与框架更紧密相关，但它仍然是一种将事物分解成微小分子的方法论。 所以本质上这也是我试图用 CUBE CSS 做的事情。 一种思维结构，我想我将其描述为。

Drew：所以它是一个关于你如何架构和编写 CSS 的过程的应用程序，它不是基于工具或任何其他类型的技术的任何东西，它只是一种工作流程。 所以有很多不同的方法。 你提到了 BEM。 有 SMACSS、OOCSS、原子 CSS。 然后你就有了像 ABEM 这样不寻常的爱子方法。 你见过那个吗？

安迪：是的。

德鲁：为什么要发表你自己的？

安迪：是的，是的。 为什么要自己做？ 这是一个非常好的问题。 我想熟悉我的人都知道，我很喜欢逆水行舟。 这主要是因为我也倾向于在不同的团队中做很多不同的项目。 因此，我发现，与传统开发人员一起使用 BEM 非常困难，因为他们习惯于将 CSS 用于 CSS 的全部内容：级联等，这就是为什么我从语言中偷走了它.

Andy：另一方面，结构化方法较少，与程序员、JS 类的人一起工作更难，因为他们喜欢结构、组织和小组件，使用他们所使用的语言工作是可以理解的。

安迪：所以我发现自己在这些职位上与不同类型的人一起工作，在不同类型的项目中，一种方法并不完全奏效。 多年来，我一直在玩弄这个关于事情如何发展的想法，然后是我和 Heydon 所做的事情，每个布局，它强制执行其中的大部分，即 C，作曲部分，然后在过去的六个月里，我对它进行了非常迅速的改进。

安迪：我写一篇关于它的文章的唯一原因是因为我只是在做这门课程，我想我最好写一些补充材料来配合它，以便人们理解它，它绝对被炸毁了。 所以也许我们还没有结束方法论，德鲁。

Drew：所以你一直在整理的课程材料实际上使用 CUBE CSS 作为它的方法，是吗？

安迪：是的。 因此，有 50% 的课程实际上是前端课程，即使它是无限制的课程。 我们构建前端的方式是如此、如此紧密地交织在一起，以至于我不能只是说，“哦，顺便说一句，这就是我写一个漂亮的 CSS 的方式”，然后就离开了。 我知道人们喜欢深入细节，所以我想，我要做的是，我会写这篇非常长且非常详细的帖子，然后如果有人想提高技能并真正了解我们在做什么，然后他们可以做，剩下的就从那里开始。 今天我们在这里，德鲁，坐着聊天。

Drew：如果有人已经了解 BEM 并且可能已经在使用 BEM，例如，因为这可能是最广泛采用的方法之一，不是吗？ 因此，如果他们已经了解 BEM 并且他们即将加入 CUBE，那么他们会觉得这很容易采用吗？ 有很多相似之处还是完全不同？

安迪：是的。 我想说从 BEM 到 CUBE 可能是一个平稳的过渡，尤其是我仍然喜欢为 CUBE 编写 CSS 的方式。 所以大部分事情都发生在更高的层次上。 所以它发生在级联级别，它发生在全局 CSS 上，使用实用程序来做很多事情。 但是当你深入了解它的细节时，它是非常类似于 BEM 的组件、块和元素。 唯一与 BEM 不同的是，我们没有使用修饰符，而是使用称为异常的东西，而不是使用 CSS 类，它转向数据属性，我认为这提供了很好的分离和真实异常，这就是修饰符应该是什么。

安迪：我离开 BEM 的部分原因是因为我发现我使用它的方式，尤其是在设计系统中，修改器被主导，它成为一个问题，因为它就像，什么是在这一点上我的块的作用？ 因为如果我将它修改到无法定期识别的地步，那么这种方法是否仍然可以正常工作？

Andy：然后是整个设计令牌的东西，Jina 用我们现在都开始采用的闪电设计系统所做的东西。 实用程序类的东西真正开始对这种方法有意义。 所以我只是把我喜欢别人工作的所有东西都抹掉了，转而投入到我自己的工作中。

Drew：你谈到了 BEM，这种修饰方法有点失控。 这是 CUBE 试图解决的 BEM 的主要痛点之一吗？

安迪：是的，绝对的。 我确实喜欢 BEM 的修饰方法，它确实有意义。 我喜欢 BEM 的地方是我仍然在做的事情，它是一个元素的双下划线，然后是修饰符的双破折号。 我喜欢这种组织事物的方式。 这只是一个好的情况，好吧，我实际上可以用实用程序类来解释很多修饰符，然后是其他位......

安迪：所以我在文章中使用的例子是，假设你有一张卡片，然后卡片被翻转，所以内容出现在图像之前。 所以这是有道理的，看到 display: flex 然后你反转它，反转顺序。 这是有道理的，有一个例外规则，因为它是卡默认状态的例外，这就是我喜欢看到的方式。 这就像该组件上的受影响状态，是异常，这是有道理的。

Andy：我最近做的很多东西，带有响应式 JavaScript 的现代前端堆栈，有很多状态变化，在 CSS 和 JavaScript 之间适当地处理它是有意义的，因为它们变得越来越不管你喜不喜欢，彼此更缠绵。 这是他们的共同语言。 正如你从我的脸上看到的那样，几乎没有，但你去吧。 你可能在想，“实际上，我最近一直在使用 react 很多，所以我正好相反。” 所以我也可以看到。

Drew：那么让我们进入 CUBE。 所以 CUBE 代表 Composition Utility Block Exception。 那正确吗？

安迪：是的。 就是那个。

德鲁：这到底是什么意思？

安迪：哦，伙计，你应该以前听过！ 去年我在做一个演讲。 我做了一个演讲，它被称为使用可扩展的 CSS 保持简单，在那里我介绍了它的早期版本，称为 CBEUT，它是 Cascade Block Element Utility Token。 那是垃圾。 我讨厌它的名字。 我做了几次，去年的这个演讲，我真的不喜欢这个名字。 然后当我今年开始做这些事情时，我想，“我真的需要考虑一下它实际上是什么以及它叫什么。” 我认为 CUBE 不那么垃圾。 我认为这是我能描述它的最好方式。

安迪：但是，这些东西的名字总是很垃圾，不是吗？ 我的意思是，像 BEM 一样，这是一个多么垃圾的名字！ 但我们都这样做。 看看 Jamstack：这也是一个可怕的名字，不是吗？

德鲁：我的嘴唇被封住了！

安迪：你的老板会问，“什么？” 这是真的。 在我们的行业中，它就是这样，不是吗。

Drew：似乎很多 CSS 方法都在尝试解决 CSS 的一些特性，比如级联。 我的理解是，CUBE 试图利用 CSS 的这些特性和属性。

安迪：是的。 一个很好的类比是 SCSS，就像 Sass 一样，是自然 CSS 语言的扩展，不是吗？ 你在 CSS 中还是很正确的。 所以CUBE CSS就是这样。 所以它是CSS的扩展。 所以我们还是应该写 CSS，就像 CSS 应该的那样……好吧，它应该是写出来的。 老实说，它应该是如何编写的，就是名称给出了它：级联样式表。 所以它再次接受了这一点，因为我发现我已经一路下降到微优化级别。 我一直在走这条路，我看到很多人最近在哪里……我在文章中也提到了这一点，我可以看到……最近有一些证据。 我发现人们一直在创建间隔组件和类似的东西，我理解这个问题，我一直处于那种情况。

Andy：我修复它的方式是，我没有深入研究并尝试进行微优化，而是开始在组合层面上思考问题，因为无论你的组件有多小，在某些时候它们都会运行成为页面，它们将成为视图。 你无法避免，事情就是这样。 因此，不要试图说，“对，我需要这些小帮手来做这个布局，”你说，“对，我有一个联系人页面视图，或者一个产品页面视图，这是一个骨架布局组合。 然后我可以在其中插入任何我想要的组件。” 我们现在有了像 Grid 和 Flexbox 这样的东西，它们让这更容易实现，你基本上可以把你想要的任何东西放在骨架布局中，没关系。 然后，组件应该按照您希望它们的行为方式运行，无论是否使用容器查询。

Drew：这是 CUBE 的组成部分，您在其中更多地从宏观层面看待事物，着眼于如何将组件组合成视图以创建您需要为网站或应用程序创建的页面类型或者你有什么。

安迪：所以它本质上是在创造规则。 这就像指导。 它试图为某事获得指导。 这不像是一个严格的规则，比如，你应该这样做，你应该这样做。 这本质上就是您对浏览器所做的事情，使用这种方法，您是在说……您并没有强迫它做任何事情。 你说，“看，理想情况下，如果你能像这样布置它，那就太好了，但我知道情况可能并非如此，所以这里有一些界限和一些我们可以使用的上下水平。 尽你所能，加油。” 然后你只需将一些组件放在它上面，让它做它做的事情。 你在那里添加足够的控制让它看起来不垃圾。

安迪：所以一个很好的例子会看到......我们在每个布局中做了一个布局，称为切换器，它基本上将内联项目直到某个点，计算出它应该多宽的计算只会将它们堆叠在一起. 但是因为我们为 in-line 和块添加了边距，所以它可以工作，不管它的状态是什么，它看起来仍然很好。 这就是我们的想法，我们不会告诉浏览器说：“您必须将这三列网格分层。” 我们说，“如果你可以将三列网格分层，那就去做吧。 否则，只需堆叠和空间即可。” 所以这是一种让浏览器真正完成其工作的方法。

Drew：过去几年中出现的许多 CSS 不同的方法都非常关注组件级别的处理，就像处理组件一样。 CUBE 并没有过多地淡化组件方面，它只是在获取这些组件并将它们组合成更大的布局的顶部给出了这个额外的概念，而不仅仅是说布局只是另一个组件。

安迪：是的，这是一个很好的观点，是的。 我认为关于组件要说的是它们很重要，尤其是在现代前端的东西中。 我们做了很多组件的东西，系统的东西。 但我看到组件的方式是，它是扩展已经完成的规则​​的集合。

Andy：我在文章中的观点是，当你深入到块级时，你的大部分样式实际上已经完成，你的组件正在做的实际上是在 Is 上打点并穿过 T，它是说， “对，在这种情况下……”例如，对于一张卡片，让图像的最小高度为 X，并在此处添加一些填充。 做这个，那个和另一个。 在这里放一个按钮。 它只是在已经从 CSS 的其余部分继承的内容之上的附加规则。 我认为这可能是最好的描述方式。

Andy：而在 BEM 中，组件是事实的来源。 在您将该类放在元素上之前，此时没有应用任何内容，并且该方法有效。 我刚刚发现我通过这样做写了更多的 CSS，以及更多重复的 CSS，我不喜欢这样做。

德鲁：你会考虑排版、颜色、垂直节奏、间距等等，这些都是这个模型中构图的一部分吗？

安迪：是的。 在全球 CSS 中，是的，绝对是。 尤其是垂直节奏和流动。 我们在 24 种方式上写了一篇文章，不是吗，几年前，我们是流动和节奏部分。 这也是这种方法的一种抽象，您可以在其中设置一个基本组件，该组件基本上使用了 lobotomized owl 选择器。 我不知道我将如何在广播中描述这一点，但我们会的。 我认为，我们将在有关 Heydon 文章或其他内容的节目说明中加入。 但本质上，它选择子元素……对不起，兄弟元素。

Andy：所以它说，“是的，元素 X 之后的每个元素都有 CSS 成本和属性值的最高边距”，然后你可以在组合上下文中设置 CSS 自定义属性值。 所以你可以说，“对，在这个组件中，如果有流动的流动，我们会将流动空间设置为实际上是两个 rem，因为我们希望它是漂亮和强大的，宽阔的空间。” 然后在另一个例子中，你可能会说，“实际上，我希望流动空间是半个 rem，因为我希望它是紧凑的。” 这一切都在发生，所有的控制都来自更高的层次，然后你正在做的是，你正在添加上下文覆盖而不是每次都重新发明它，一遍又一遍地重新发明相同的东西。

Drew：那就是 C，作曲。 接下来我们有U，即Utility。 那么我们所说的效用是什么意思呢？

安迪：所以这是一个只做一项工作的课程，而且做得非常好。 这可能是设计令牌的实现……它是属性的抽象。 通常是颜色或排版样式、大小和类似的规则。 这个想法是您生成应用这些的实用程序类。 所以你有一个实用程序，它将应用背景原色，就像原色一样，然后是原色，这是文本颜色。 然后，您可能会为边缘填充以及所有这些事情生成一些间距标记。 他们只做一项工作。 他们只是添加一个间距规则，一个颜色规则，仅此而已。

安迪：但是你也有其他的实用程序。 所以一个很好的例子是包装实用程序。 这将做的是，它将在元素上设置最大宽度，然后将左右自动边距放置在事物的中间。 所以它只是有一份工作，而且它只是高效而出色地完成它。

安迪：所以你已经有了你的全球风格，你已经完成了很多排版设置和很多地板空间。 然后你的作文给出上下文和布局。 然后，实用程序将标记直接应用于元素，为它们提供您需要的样式。 例如，就像一个标题，你说，“我希望它有这个大小，我希望它有这个引导，我希望它有这个度量。” 然后到那时……这就是我所说的关于积木的内容……然后你再往下走，你已经完成了大部分工作。

Andy：所以他们为您提供了这种非常有效的工作方式，而且因为 HTML 也可以通过管道流下来，所以将工作负载抽象到 HTML 而不是 CSS 上真的很好，我发现。 我曾经真正进入实用程序类，就像这种旧的脾气暴躁的风格，“哦，关注点分离”，但我实际上认为这是一种非常体面的工作方式。 我在文章中提到我实际上喜欢 Tailwind CSS。 我认为它确实有效，而且我真的很喜欢用它来进行产品打字，因为我真的可以很快地把东西写出来。 但我认为它有点太过分了，Tailwind 是这样，而我喜欢在它超越了仅仅在一个类上应用一个规则时下雨它。 就是这样，我想。 你？

德鲁：所以，是的，你在文章中谈到了很多关于设计令牌的内容，这是我们在第三集中与 Jina Anne 在 Smashing Podcast 上讨论过的内容，我想是的。 所以听起来设计令牌是一个非常基本的方面。

安迪：是的。 哦，天哪，是的。 我清楚地记得当 Jina 做闪电设计系统的事情时，因为当时我正在构建一个设计系统，或者类似于设计系统的东西，我们正在努力获得行政部门的批准。 当闪电设计系统问世时，我真的只是一个接一个地向他们发送链接，我说，“这就是我们正在做的。 我们正在建立一个设计系统。 这就是 Salesforce 目前使用它的目的。” 我记得她当时的工作实际上帮助我把东西穿过门。

Andy：那么设计令牌的东西一直是我应用这些规则的好方法。 因为我是一名设计师，所以我可以看到这种组织以及组织和创建单一事实来源的能力非常有用，因为这是我们在数字设计中真正没有的东西，尤其是在 Adob​​e在使用 Photoshop 之类的东西的时代，我们没有那么奢侈。 我们用 Pantone Book 打印了它，但我们没有在整个商店里用随机十六进制代码进行数字化。

安迪：所以这很棒。 我喜欢那种程度的控制。 实际上，我认为它有助于创造力，因为你不再考虑不重要的东西，你只是在想你在用它做什么。

德鲁：这些设计令牌的实现对方法特别重要吗？ 它总是CSS自定义属性吗？

Andy：我认为这对 CUBE 来说非常重要。 我得到的一些回应，人们对此有点挣扎。 里面完全没有提到技术。 唯一一致的技术是 CSS。 你可以随心所欲地做。 你可以用人们现在正在做的任何 CSS 和 JS 来做这一切，或者你可以只用 Vanilla CSS。 你可以用 Sass 做到这一点。 我用萨斯做。 少，如果那是你还在做的事情。 所有这些可用的技术，post CSS，所有这些东西。 你想怎么做都可以，没关系。

安迪：这个想法是，如果你遵循这些结构，你会没事的。 这就是它背后的想法。 它是一种非常松散的方法，并不像某些方法那样严格。 我特别在 BEM 中看到过，人们对 BEM 的原则根深蒂固，以至于你甚至不再解决问题。 我认为你必须灵活。 我在去年的这个演讲中说过。 我当时想，“如果你过于执着于你的枪，从长远来看，你实际上会给自己带来问题，因为你试图遵循一条特定的道路，但你知道它不再起作用了。” 您应该始终保持灵活性并使用系统，而不是按部就班地工作。

德鲁：所以B，B就是Block。 你已经谈到了这个想法，当你深入到块级时，大部分东西都应该到位，然后块级样式只真正关心特定组件的实际细节。 一般来说，块的概念是否与人们熟悉的类似？

安迪：哦，当然，是的。 所以想象一下你的 BEM 组件并从中取出所有的视觉内容，这就是你剩下的，基本上，块。 当我第一次开始考虑这种方法时，这就是我努力表达的内容。 一个块实际上是一个 C，它是一个组合，但这让它变得非常困难，因为你在那里进入了递归领域，我认为人们的大脑会爆炸。 但实际上这就是一个块，它实际上是另一个组合层，但更多的是一种严格的上下文，所以就像你的卡片、你的按钮、你的轮播，如果你仍然喜欢这样做的话，以及所有这些东西。

安迪：它就像一个特定的东西，一个组件，然后在里面你为它设置特定的规则，真的忽略了其余的，所以你不会……你可以在块中应用令牌，我会这样做仍然，但实际上它更面向布局，是一个块，就我与他们一起工作而言，或者至少获取令牌并以特定方式应用它，例如按钮悬停状态，诸如此类。 因此，当您真正了解它们时，您的块应该很小，它们根本不应该做太多事情。

Drew：所以它可以像超链接一样小。

安迪：是的。

德鲁：但它也可能是其他块的复合集合？

安迪：是的。 就像一个模块之类的东西。 你绝对可以这样做。 因为，再一次，这又回到了它的构图方面，就是无论进入什么都不重要。 一个很好的例子就是卡片。 因此，卡片的内容例如是标题、摘要和按钮。 你不应该真的专门针对这三个元素。 你应该说，“看，任何碰巧在内容中找到自己的东西，里面都有一些流程规则，并且有一些组合布局规则，”然后你在里面放了什么并不重要。 您可能会决定要将图像放入该内容中，并且它应该可以正常工作，看起来应该很好。

Andy：这就是使用 CSS 的全部意义所在。 这是使用 CSS 的一种非常宽容的方式。 通过减少僵化，您的生活变得更加轻松，因为当某些东西意外地发现自己在某物中时，它会看起来并不可怕，因为如果您对事物更加具体，这就是我所拥有的成立。

Drew：我的 CSS 绝对需要很多宽恕！

安迪：我知道你知道！

德鲁：干杯！ 所以这就是B。最后一件事是E：E是例外。 现在我们不是在谈论错误消息，是吗？

安迪：不，不。 这是一种——

Drew：我们不是在谈论 JavaScript 异常。

安迪：是的，是的。 在这一点上不应该有这些。 无论如何，我不希望如此，否则你真的在树林里：我认为我无法帮助你！ 整个想法是......所以你已经用你的块创建了上下文，而一个例外就是这样，它就像规则的一个例外：所以一张翻转的卡片，或者它可能是一个幽灵按钮。 所以你知道那些刚刚有边框和透明背景的按钮吗？ 那将是一个例外，因为按钮可能具有纯色背景颜色，然后是标签颜色。 所以它创造了一种独特的变化状态。

Andy：我之所以用数据属性而不是类来做这件事，是因为 a) 我认为有一个区别很好。 因此，当您扫描大量 HTML 时，您可以看到数据，用连字符连接一些东西，您会说：“好吧，这个元素肯定发生了一些变化。” 另一件事是让 JavaScript 访问该状态非常好，反之亦然。 所以我真的很喜欢在 JavaScript 中应用带有数据属性的状态。 我认为这本质上就是它们的用途，一种通信层。 他们之间的和谐似乎真的很好。

Andy：一个很好的例子是，假设你有一个状态消息，然后 JavaScript 会添加数据状态，要么是成功，要么是错误，要么是信息，或者其他什么。 然后，您可以使用 CSS 中的异常样式来挂钩。 所以你知道这是状态组件的一个例外，它违背了它的默认状态。 所以这只是一种非常方便的处理事物的方式。 它在两端都是可预测的：它在 CSS 端是可预测的，在 JavaScript 端也是可预测的。

Drew：我想，类名没有给你的东西是属性和值，这很好。 因此，如果您想拥有类似状态的东西，它可以是成功或失败或警告或您拥有的东西，您可以专门处理该状态属性并翻转它的值。 而对于一大长类名称列表，例如，如果您在 JavaScript 中对其进行操作，您将不得不查看它们中的每一个并在其中添加业务逻辑，上面写着：“我只能设置其中之一，”如果将其中两个类应用于同一个元素会发生什么？ 您无法使用数据属性获得它，它只有一个值。

安迪：是的。 这是一个很好的说法，是的。 我发现，这样工作非常有帮助。

德鲁：这很有趣。 我认为我没有看到任何其他采用这种方法的方法。 这对 CUBE 来说是完全独一无二的吗？

安迪：可能是这样。 我真的不太注意其他事情，我应该做的。 其他人可能正在这样做。 我现在告诉你，这是其中最具争议的方面。 有些人真的不喜欢使用数据属性的想法。 事情也是如此，我的回应是，做你想做的事。 我们不是告诉你以某种方式做事，这只是建议。 如果你想对 CSS 类做例外，比如修饰符，那就把自己搞砸了。 CUBE 警察不会来敲你的门。 绝对没问题。

Andy： CUBE 是一种思考的东西，它是一种结构。 您可以应用该结构，但您想应用它，使用您想要的工具或任何您想要的技术。 只要你保持一致，这就是重要的事情。

Drew：所以没有纯粹的 CUBE 这种东西？

安迪：我写它的方式是纯粹的立方体，德鲁。 其他人都是假的，只是弱模仿。

Drew：除了你，没有人可以说，“那不是教科书 CUBE。”

安迪：不，就是这样。 没有人可以质疑这一点，真的吗？ 所以，是的，我会同意的。 给你一点影响力之类的东西，我想，类似的东西。

Drew：您能否将 CUBE 方法与其他方法混合并匹配？ 你能用一点 BEM 吗？

安迪：是的，我想是的。 我一直在考虑它，因为我很快就会在它上面做更多的事情，因为它变得非常流行，所以人们会想要更多的工作。 我要研究的一件事是如何在现有的东西上使用 CUBE 方法。

安迪：所以天平有两个相反的末端。 人们提出的一个很好的问题是：“这如何与每个布局和其他东西一起工作？” 我喜欢，基本上，每个布局都是 C。这就是每个布局，它是组合层。 然后有人问，“嗯，这将如何与像 Brad Frost 所做的那样的 Atomic Web Design 这样的东西一起工作？ 这就像，好吧，你可以将这些部分分解并在每个级别应用它们。 原子设计一直深入到微观细节。 它将它抽象为使用，对，好吧，我可以将它与实用程序一起应用，所以我认为是分子。 我可以将它与实用程序一起应用，它会将您已经知道的内容转化为这种略有不同的工作结构。

安迪：真的，这是对很多东西的重命名。 我在这里没有发明任何东西，我只是有点，就像我说的，我只是偷了我喜欢的东西。 我喜欢一些原子设计东西的思考方式。 这真是一些聪明的工作。 和 BEM。 Harry 做的东西，倒三角形 CSS，我觉得真的很酷。 所以我只是从他们每个人中挑选出我喜欢的部分，然后将它们全部缝合到另一个混合的东西中，方法。 我想还会有更多。

Drew： CUBE 方法可以应用于已经有 CSS 的现有项目，还是你真的需要从一个新项目开始？

安迪：这在很大程度上取决于。 所以，如果你有一份像引导工作一样的工作，而且它只有数千行自定义 CSS，而我之前肯定参与过，那么我认为你可能会试图用一瓶水来灭火观点。 But if you… say, for instance, if you've got a rough BEM setup and it's gone a bit layer-y, you could use CUBE to refactor and actually pull it back into shape again.

Andy: It depends, the answer to that one. But it's doable, as with everything. If you really want it to work, Drew, you can do it if you want, can't you? The world is our oyster!

Drew: Especially if your BEM site's gone layer-y.

Andy: Yeah. Nothing worse than a layer-y BEM site!

Drew: I've noticed in the examples that you've given… and I've got an eagle eye, I've seen you've been doing this for a while… a lot of your class values in the HTML attribute are wrapped in square brackets.

Andy: Oh, God, yeah. Tell you what, Drew-

Drew: What is that about? 那是关于什么的？

Andy: I'll tell you what, if there's ever one thing that I've done in my whole career that's just been absolutely outrageously controversial… and you follow me on Twitter, you've seen what comes out of my mouth… it's those bloody brackets! My, God! 人们要么爱他们，要么恨他们。 They're Marmite, they are.

Andy: The reason I do them is a grouping mechanism. So if you look at the way that they're structured, the way I do it is, block at the start and then I'll do a utilities after that. Then what I might do is, in between a block group and a utility group, there might be another block class. So a good example of that would be… we'll go back to the card again. But then say that there's a specific block called a CTA, like a call to action. You might have that applied to the card as well, and then your utilities are enforcing the design attributes, so the colors and all that business. So then you've got three groups of stuff.

Andy: When you come to it, if you've got that order in your head each time, you know, okay, right, this first group's blocks. Oh, that's looks like another block. I've got that one. Then it's like, right, they're definitely utility classes. Then what I might even do is, if there's a lot of design token implementation, have that in a separate group. So it's just very clear what each group is doing, and there's a separation inside of the classes there as well. I've found it really helpful. Some people find it incredibly offensive. It's definitely a do it if you want to do it. Definitely you don't have to do it.

Andy: It's quite funny, when I published that article, so many people finished halfway through to ask me, “What is it with these brackets?” I was like, “Did you finish the article? Because there's a big section at the end where it explains exactly what they're doing,” to the point where I actually had to write a bit in the middle of the article of, “If the brackets are essentially doing your head in, click here and I'll skip you all the way down to that explanation bit so you can just read about them.” It can be quite controversial.

Andy: When I've worked on really, really complex front-ends… and we did a little bit of stuff together, didn't we, last year?

德鲁：是的。

Andy: You've seen the sort of design implementation on that project that we were on. It requires that sort of grouping because there's just so much going on at the time, there's so much different stuff happening. I've just found it really, really useful over the years, and also get lots of questions about it, to the point where I was almost going to write just one page on my website that I could just fire people to to answer the question for them.

Drew: Slash, what's with the brackets?

Andy: Yeah. Slash, brackets. Have you seen that new Hey Email thing that's just come out? They've bought a domain of itsnotatypo.com, just to answer the whole Imbox, like im with an M rather than an in. Basically, I was like, “I think I need to do that,” like, whatswiththebrackets.com, and just do a one-pager about it.

Drew: It strikes me that the approach with brackets actually could be something that might be useful when using things like Tailwind or something that has a lot of classes because that can-

Andy: Yeah. Oh, God, yes.

Drew: You have classes that are addressing your break points and what have you, and then you'll have things that are for layout, things that are for color or type, or what have you. So it might also be a useful way of dealing in situations like that.

Andy: I'd definitely agree with that. A good analogy… not analogy. A good bit of info about Tailwind is that I actually quite like Tailwind. I've used that on very big projects. The one thing that really opened my eyes to Tailwind though was when I saw a junior developer try to work out what was going on, and it was really, really eye-opening because they just didn't have a clue what was happening.

Andy: I think that's one problem I've found with these sort of over-engineered approaches, which I think it's fair to say Tailwind is, is that there's a certain skill level that is required to work with it. I know the industry tends to have an obsession with seniority now, but there's still people that are just getting into the game that we need to accommodate, and I think having stuff that's closer to the language itself is more helpful in those situations because they're probably learning material that is the language as it is. So I think it's just a bit more helpful. Especially having a diverse team of people as well. Just food for thought for everyone.

Drew: People might look at all the different methodologies that are out there and say, “This is evidence that CSS is terrible and broken, that we need… all these problems have to be solved by hacking stuff on top. We need tools to fix bits of CSS. We need strict procedures for how we implement it, just to get it to work.” Should the platform be adapting itself? Do we need new bits of CSS to try and solve these problems or are we all right just hacking around and making up funny acronyms?

Andy: I think the power of CSS, I think, is its flexibility. So if you're going to program CSS, a lot of the knowledge is less of the syntax and more of the workings of a browser and how it works. I think that might be a suggestion, that the problem is that people might not have learnt CSS quite as thoroughly as they thought they might have learnt it, who created these problems. I've seen that in evidence myself. I spotted a spacing mechanism that had been invested, which was very complicated, and I thought, “This person has not learnt what padding is because padding would actually fix this problem for them, understanding how padding works and the box model.” That's not to be snidey about it.

Andy: We work in an industry now that moves at an even faster pace than it has done previously and I think there's a lot less time for people to learn things in detail. But, on that front, I think CSS still does have work to do in terms of the working group, who I think do a bloody good job. A great, shining example of their work was the Grid spec which was just phenomenal. The way that rolled out in pretty much every browser on day one, I thought that was so good.

Andy: But we've got more work to do, I think, and I think maybe the pace might need to increase a little, especially with stuff like container queries, we all love talking about them. Stuff like that I think would help to put CSS in a different light with people, I think. But I think CSS is brilliant, I love it. I've never had a problem with it in lots of years really. I do find some of the solutions a bit odd, but there you go.

Drew: What's the response been like to CUBE since you published the article?

Andy: Mind-blowing. I honestly published it as just supporting material, and that's all I expected it to be, and it's just blown up all over the place. A lot of people have been reading it, asking about it, been really interested about it. There's definitely more to come on it.

Andy: I did say in the article, I said, “Look, if people are actually quite interested in this, I'll expand on this post and actually make some documentation.” I've got bits of documentation dotted around all over the place, but to sort of centralize that, and then I was thinking of doing some workshops and stuff. So there's stuff to go. It's how Every Layout started as well. We both had these scattered ideas about layout and then we sort of merged them together. So something like that, I suppose, will come in the future.

Drew: Are there any downsides that you're aware of to using CUBE? Are there problems that it doesn't attempt to solve?

Andy: Yeah. This accent, Drew, it just won't go way, no matter what I do! In all seriousness, I think CUBE's got as close as I can get to being happy with the front-end, which is saying a lot, I think. You never know, things might change again. This has evolved over more recent years. Give it another five years, I'll probably be struggling with this and trying something else. I think that's the key point, is to just keep working on yourself and working on what you know and how you approach things.

Andy: This definitely won't work for everyone as well, I know that for a fact. I know that from my comments. I don't expect it to work for everyone. I don't expect anything to work for everyone. It's the same with JavaScript stuff: some people like the reactive stuff and some people don't. 就是这样。 We're all people at the end of the day, we all have different tastes. It's all about communicating with your teammates at the end of the day, that's the important thing.

Drew: I know you as a very talented designer and developer and you, like many of us, you're just working on real projects all day, every day. But you've recently started publishing on this site, Piccalilli, which is where the CUBE CSS introduction article was. So Piccalilli is kind of a new venture for you, isn't it? 这到底是怎么回事？

Andy: Very kind of you to say, Drew. You've actually worked with me, so that's high praise. But the Piccalilli thing is an evolution. So I'm a freelancer. I do client work, but I think this has become apparent with the pandemic, that that is not the most sustainable thing in the world in some industries. I think freelancing can be very, very tough, as a developer and designer. It's something that I've been doing it for so long now, 10 years… well, 12 years now actually.

安迪：我想做一些不同的事情，应用我所拥有的知识并与人们分享。 我一直非常开放和分享，我想将其正式化。 所以我创建了 Piccalilli 来编写教程，但主要是针对我正在制作的课程：那是主要的肉和土豆。 然后是时事通讯……人们真的很喜欢时事通讯，因为我每周都会分享我在互联网上发现的很酷的东西。 这就是它的支柱。 一切都很顺利。 我想，随着岁月的流逝，这基本上就是我希望看到自己做越来越多的全职工作的地方。

德鲁：那么皮卡利利接下来会发生什么？ 你有什么要出来的吗？

安迪：谢谢你打开那里的门，德鲁！ 到此录音发布时，第一门课程将上线：从零开始学习 11，这就是我们学习如何构建 Gatsby 网站的地方！ 不，您将学习如何构建 Eleventy 站点。 所以你从一个完全空的目录开始，里面什么都没有，它是空的，然后在它的最后你将完成这个非常漂亮的代理网站。 我们在其中学到了各种各样的东西。 您将学习如何与 Eleventy 一起真正进城。 我们从一些地方提取远程数据。 我们使用 CUBE CSS 为它构建了一个非常好的前端。

Andy：如果你想进入 Jamstack 并且你想进入静态站点生成器，或者只是想如何构建一个漂亮的网站，我希望这只是一门非常方便的课程。 正如我们所说，它目前正在其生命的一英寸内进行编辑。 我希望它会很酷，而且很有用。 但这是我在过去几年里一直在做的很多事情的积累。 所以应该很有趣。

安迪：那就买吧，我打个折扣码，像smashingpod 40% off，一出来就可以买到。

德鲁：太棒了。 我们将把它联系起来。 你知道如何可靠地拼写 Piccalilli 了吗？

安迪：我和克里斯和戴夫一起参加了 ShopTalk Show，我在那儿说，“如果有什么事情你想雇用我，那就是第一次不假思索地手写 Piccalilli，”因为我已经这个词写了很多遍，以至于我完全知道如何把它拼出来。 所以你的问题的答案是肯定的。

德鲁：嗯，我还在挣扎，我会告诉你这么多！

安迪：这很难。 天啊。 我完全同情。 我花了很长时间来学习如何拼写它，但它是我们词汇表中的单词之一。 今年我正在尝试拼写必要的拼写而不犯拼写错误！

Drew：所以我一直在学习 CUBE CSS。 你最近在学习什么，安迪？

安迪：你知道吗？ 这会让你大吃一惊，德鲁。 MySQL是我最近一直在学习的。 所以，基本上，Piccalilli 完全是自行出版的。 这是一个 Eleventy 网站，但它背后有一个 API，它背后有一个 MySQL 数据库。 为人们提供他们购买的内容的东西需要一些相当大的查询。 所以我实际上只是在一些 MySQL 上进行了适当的投资……尤其是连接之间的差异，我实际上并没有意识到每种连接类型之间存在差异。 所以这真的很有用，它导致了与数据库的一些非常快速的交互。

Andy：我曾经运行过这个叫做 Front-End Challenges Club 的东西，当我第一次启动它时，它就崩溃了，因为 MySQL 至少可以说是粗制滥造的。 所以我真的一直在学习如何做到这一点，因为我根本不是后端人员，我是一个像素推动者。 所以这绝对不在我的职权范围内。 这更像是你的树林，不是吗？ 我觉得它真的很酷，MySQL。 其实我真的很喜欢写。 这是一种非常好的教学语言，不是吗？

德鲁：是的，很棒。 我在学校学过 SQL。

安迪：哇！

德鲁：我们现在谈论的就像 20 年前一样。

安迪：那时候他们有电脑吗？

德鲁：他们做到了，是的。 我们不得不风——

安迪：你必须手写吗？

德鲁：我们不得不把它们收起来！ 我们做到了。 但是，我告诉你，对于开发人员来说，这类似于学习你的乘法表：其中一件事看起来有点繁琐，但一旦你流利了，它就会一次又一次地变得有用。

安迪：是的。 当然。 也确实存在明显的差异。 你真的看到了速度上的差异。 我真的很喜欢使用 Node，因为它真的很快，但是 Node 和 MySQL 只是……不是一个很常见的选择，但我认为这是一个不错的选择。 我认为它真的很好用。 所以我对此很满意。 如您所知，我不喜欢编写 PHP。 所以这永远不会是一个选择。

Drew：亲爱的听众，如果你想从 Andy 那里听到更多消息，你可以在 Twitter 上关注他，他在 hankchizljaw。 您可以在 piccalil.li 上找到 Piccalilli，在那里您还可以找到描述 CUBE CSS 的文章，当然，我们还将在演示说明中添加指向所有这些内容的链接。

德鲁：谢谢你今天加入我们，安迪。 你有什么临别的话吗？

安迪：注意安全，戴上口罩。