• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

CUBE CSS

CSS/HTML rin, seun 9个月前 (06-17) 72次浏览 0个评论

如果您可以保证技术方面的一件事,那就是某个地方的某人会宣布CSS不能胜任“大项目”的工作,而这些人无疑会推荐的是采用JavaScript的方法或诸如Tailwind之类的全能型实用程序方法。

有大多没有错,这些方法,我很喜欢顺风的早期原型,但往往全在JavaScript项目的背景下,或至少一个完全新建项目便利的冷落,在建议的点。问题在于,大量项目是网站,因此建议对于大多数开发人员通常不起作用。就上下文而言,据估计WordPress为互联网提供了约36%的电源,并且仍在增长。与此相比,一个微不足道的0.3%的网站使用做出反应,例如。请务必牢记这些数字。

在本文中,我将向您介绍如何编写CSS,我认为它可以帮助很多人(至少希望如此),因为我已经使用了这种方法,或者该方法的早期迭代,以支持大型网站,小型博客,移动应用程序甚至Intranet软件!这种方法论源于两个大型项目,这些项目因其灵活性而一直为数百万人提供服务,直至小型网站和入门工具包。这种灵活性还使CUBE CSS可以在非常老和很新的代码库中工作。

该方法的重点是利用CSS和整个Web平台的功能,并添加一些控件和结构来帮助使事情变得更加可维护和可预测。最终目标是交付尽可能少的CSS-很大程度上依赖于逐步增强和现代技术。我希望到文章结尾,它将帮助您重新考虑将来可能如何编写CSS

什么是CUBE CSS?

CUBE代表Composition Utility Block Exception,而CSS则代表CSS(级联样式表)。如前所述,多维数据集方法学是很好的CSS 的扩展,而不是重新发明。由于级联和继承的特殊性发挥了重要作用,因此也非常认真地维护了这一口头禅。

CSS

这种方法最重要的部分是语言本身:CSS。关键是要指出它的存在,因为某些替代方法(例如BEM(我已经使用了很多年))可能会与层叠样式表相去甚远。我很喜欢 CSS,但是认为它的核心功能实际上是可扩展CSS的关键(抱歉,我说过)。这种想法也花费了很长时间,并且需要很多经验。CSS是一种极其复杂的编程语言,因为要学习的很多知识都很少涉及语法,而更多的在特定领域(通常是浏览器)中如何工作。

Cascade本身就是宏伟的,因为它使我们能够编写很少的CSS,而且实际上并不像人们通常所说的那样可怕。当然,在Internet Explorer的早期,级联有点棘手,但是将旧知识和技术用作现代方法的基础就像将马饲料喂入汽车一样。

该方法的核心是,大多数工作已经使用全局和高级样式为您完成。这意味着您甚至在开始考虑组件(或者就CUBE CSS而言)之前,您的版式就已经基本设置好了,您的颜色很好用,元素之间也很协调。我们使用方法论的其余部分(多维数据集)不是对所有样式进行样式设置,而是提供与通用全局系统不同的上下文样式。

从本质上讲,CUBE CSS是一种渐进式增强方法,而不是与CSS粒度或将项目推入其生命周期方法一英寸的像素作斗争。

组成

谈到系统:让我们谈谈设计系统。我很幸运,我已经从事这些工作已有大约五年了,与设计系统一起工作一直是我作为设计师和前端开发人员的职业中最有价值的方面之一。这主要是因为设计系统不仅使您在微观层次上思考,而且还使您在宏观层次上思考,因为您不仅需要做出有关像素的决策,还必须做出高层设计决策有助于解决。设计系统工作实际上是很多时间的外交工作

我经常在这里看到狭窄的,仅包含组件的隧道视野不足,而实际上,这些方法是较少的设计系统,而是更多的组件库,可以解决更窄范围的问题。

通常,在有关设计系统的最新讨论(阅读:tweet线程)中,对东西进行了非常微优化。很好,因为如果它对人们有用,那就对了!不过,我会发出警告:乐高积木类比在设计系统的更广泛范围内并不重要。但是,这对于解释组件在整个项目中的作用非常有用。

我提到所有这些,并不是说对设计系统说得很聪明,而是因为即使将设计系统分解成微小的分子,它仍然会在某个时候被应用到更大的上下文中,并且永远都不应忘记,但是经常是。我发现,多年来,在许多项目中的许多方法中,更广泛的组成通常胜过微观优化,因此存在CUBE CSS 的组成层

我对构图是什么意思?让我们看一下这种经典的布局:

带有组件的基本布局的线条插图
3列网格,很好的经典英雄和卡牌情况。

我们这里有各种元素,它们本身都是独立的组件。这种布局的组成是控制元素的整体布局和节奏的因素。将构图视为骨架

相同的图示,但是组件消失了,骨骼结构仍然保留
如您所见,构图处理事物如何缝合在一起,而不管它们恰好是什么组成部分。

为了进一步说明这一点,我们可以将所需的任何组件放入骨架中。像此示例一样,我们将卡片替换为号召性用语:

最初的插图,但其中一张卡已被新组件替换
我们的行动号召并没有错位,因为该视图的组成部分为我们处理了所有布局。

组成也是组件中的关键。以我们的卡组件为例。您可能会在某处有一些流程内容,就像在插图中一样,标题和摘要一起出现。您可以做的是向其中的每个元素添加一个类,并对它们的行为进行微优化,就像使用BEM一样,或者可以执行以下操作:

代码语言
的CSS

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

然后我们将其应用到我们的卡标记中,如下所示:

代码语言
的HTML

<article class="card">
  <img class="card__image" alt="" />
  <div class="[ card__content ] [ flow ]">
    <!-- our content in here will auto-flow now -->
  </div>
</article>

我们创建了一个实用程序,可以为我们提供通用的流程和节奏,从而帮助我们组合布局组件。这无缝地引导我们进入下一部分。

实用工具

如果使用级联是此方法的基础,那么实用程序就是帮助其舒适行走的鞋子。

在CUBE CSS上下文中,实用程序是一种CSS类,可以完成一项工作并且可以很好地完成这项工作。这个CSS类通常会定义一个CSS属性,但也可能在一个简洁的组中包含一些CSS属性,例如包装器实用程序的示例:

代码语言
的CSS

.wrapper {
  margin-inline: auto;
  padding-inline: 1rem;
  max-width: 60rem;
}

这个方便的实用程序提供了一致的最大宽度的填充容器,当视口大于60rem宽时,该容器位于视口的中间。

一项工作:做得好。

设计令牌

这些是Jina提出的概念,彻底改变了我对设计系统的看法。这是Jina的直接引用:

“设计令牌是设计系统的视觉原子-具体来说,它们是存储视觉设计属性的命名实体。我们使用它们代替硬编码的值,以维护可扩展和一致的视觉系统。”

设计令牌非常有用,因为它们使我们的系统具有可伸缩性(对不起,我再说一遍)。这是这种方法(CUBE CSS)的核心,因为我们采用了这些抽象的值,并通过实用程序类将其应用于我们的上下文。

例如,假设我们的原色是#ff00ff,这是一种不错的洋红色。这可以在我们的上下文之外的数据库中甚至是JSON文件中定义,如下所示:

代码语言
的JavaScript

{
  "colours": {
    "primary": "#ff00ff",
    "secondary": "#ffbf81",
    "base": "#252525"
  }
}

对我来说,通常在CSS和CSS之间需要一步,生成设计令牌实用程序类。您最终得到这样的结果:

代码语言
的CSS

.bg-primary {
  background: #ff00ff;
}

.bg-secondary {
  background: #ffbf81;
}

.color-primary {
  color: #ff00ff;
}

.color-secondary {
  color: #ffbf81;
}

生成这些类后,我们将如下所示应用它们:

代码语言
的HTML

<article class="bg-primary color-base"></article>

像这样应用我们的设计令牌,使我们可以一次定义事物,并将其应用于任何地方。它减少了重复,最重要的是:减小了整体捆的尺寸!

转到方法的下一部分:块。块是您的构建块或组件。这是您的卡或按钮。如果您以前已经使用过BEM,则定义几乎相同。不过,在这一点上,阻止实际上是一件小事,因为涉及的其他部分(CSS,组合和实用程序)已经处理了很多事情。如果选择使用这种方法编写CSS,则可能会发现块CSS 很小,因此。

BEM和CUBE之间的主要区别在于,街区内部的一切都是开放季节。如前所述,这是因为您的全局CSS,合成规则和实用程序很可能为您完成了大部分工作,因此拥有正式元素是多余的。

我个人仍然喜欢对元素使用BEM语法,例如:

代码语言
的CSS

.my-block__my-element {
  /* Cool CSS goes here */
}

这主要是因为使用BEM已有多年经验,所以现在是我的大脑进行编程的方式。

您也可以像这样舒适地为每个元素提供平面选择器,甚至可以应用HTML元素样式:

代码语言
的CSS

.my-block .title {
  /* Cool CSS goes here */
}

.my-block h2 {
  /* Cool CSS goes here */
}

没关系,因为再次,您的全局CSS,实用程序和组合规则已经为您完成了艰苦的工作。

例外

在这次旅行的最后:例外。这些几乎没有变化。例如,您可能具有“反转”状态或“非活动”状态。对于这些:我们使用数据属性

以这张卡为例。默认情况下,它是标准版卡:

附有图片,标题和摘要的卡片
我们的标准版卡片元素

但是,当我们添加“反转”状态时,图像位于底部,内容位于顶部。

相同的卡但被翻转
我们的例外使它发生了翻转。

我们使用如下数据属性添加异常:

代码语言
的HTML

<article class="card" data-state="reversed"></article>

这为CSS  JavaScript 提供了有用的钩子!您可以像这样反转内容:

代码语言
的CSS

.card[data-state='reversed'] {
  display: flex;
  flex-direction: column-reverse;
}

分组

class使用此方法时,属性可能涉及很多内容,因此我喜欢使用方括号将内容归类,如下所示:

代码语言
的HTML

<article
  class="[ card ] [ section box ] [ bg-base color-primary ]"
  data-state="reversed"
></article>

我倾向于遵循以下顺序:

  1. 主块类
  2. 任何后续块类
  3. 实用程序类

我什至可以将实用程序分为标准实用程序和设计令牌,具体取决于有多少。

有人问我关于我在课堂上使用括号的属性很多和相当多的时间,他们得到了非常混杂的招待会。重要的是清晰度,我认为它们提供了这一点。

如果您不喜欢方括号,则可以改用类似管道的内容:

代码语言
的HTML

<article
  class="card | section box | bg-base color-primary"
  data-state="reversed"
></article>

归根结底,您做什么都不重要,因为HTML和CSS足够聪明,可以忽略他们不理解的事情或对他们没有意义的事情。因此,它们确实是优秀的编程语言。

喜欢 (0)

您必须 登录 才能发表评论!