组件库常见-AMCSS开发模式

前端泥瓦匠
661 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

AMCSS 的介绍

它是 Attribute Modules for CSS 的缩写，表示借助 HTML 属性来进行 CSS 相关开发；

AMCSS 的官网

AMCSS有专门的介绍网站: amcss.github.io/

优点：

  • 每个属性有效地声明一个单独的命名空间，用于封装样式信息，从而产生更易于阅读和维护的 HTML 和 CSS;

传统类名写法

 <div class="button button-large button-blue"> Button</div>

目前主流类名选择器：通过多个类名进行控制

  • .button {...}
  • .button-large {...}
  • .button-blue {...}

AMCSSE 写法

<div button="large blue">Button</div>
<div am-button="large blue">Button</div>
<!-- （避免属性，属性名冲突） -->

AMCSS 则是基于属性控制

[am-button] {...} [am-button~="large"] {...} [am-button~="blue"] {...}

案例一：Bootstrap Buttons

        最初的 Bootstrap 标记非常基于约定：所有按钮都需要一个btn类和一个以 . 为前缀的特定按钮类btn-。它会导致混乱、重复的标记。相比之下，AM 版本使用属性am-Button作为标识符，并允许直接、自然、附加的修饰符，例如large,primary等。

Large primary button

 <a class="btn btn-primary btn-lg">Large primary button</a>
 <a am-Button="primary large">Large primary button</a>

Default button

<a class="btn btn-default"> Default button</a>
<a am-Button>Default button</a>`

Small info button

 <a class="btn btn-info btn-sm"> Small info button</a>
 <a am-Button="info small"> Small info button</a>

Extra-small danger button

 <a class="btn btn-danger btn-xs">Extra-small danger button</a>
 <a am-Button="danger extra-small"> Extra-small danger button</a>

传统样式写法：

.btn{ /* Default button styles */ }
.btn-primary{ /* Primary colours */ }
.btn-largef{/* Large sizing */}

AMCSS 样式写法：

[am-Button] { /* Default button styles */ }
[am-Button~="primary"] { /* Primary colours */}
[am-Button~="large"]{/* Large sizing */}

案例二：Flexbox Grid

        使用网格系统是司空见惯的，而Flexbox Grid是我们特别喜欢的一种。在这里，我们将一些示例标记转换为 AM 样式。

传统写法：

<div class="row reverse">
  <div class="column-12--hand column-8--lap">
  	<div class="box">Responsive</div>
  </div>
</div>

AMCSS 样式写法：

<div am-Grid-Row ="reverse">
  <div am-Grid-Col="12 lap:8">
  	<div am-Demo="box">Responsive</div>
  </div>
</div>

原始标记与所有基于类的网格系统都有一些问题。因为网格类使用频率很高，所以它使用了像&这样的相对裸露的css 类，但是因为列需要响应，所以它避开了全局类，而是定义了类。row``reverse``col``col-breakpoint-number

另一方面，AM 标记定义am-Grid-Row和am-Grid-Column模块，并且由于每个都定义了一个命名空间，我们可以自由地使用我们选择的值。这些值可以使用比类更方便的字符范围，因此我们可以使用一种语法，它更容易一目了然。我们还可以通过省略断点来采用移动优先的方法。breakpoint:number``hand

案例二：Traits

虽然 AM 可以用作 BEM 样式类命名的插件，但您也可以考虑使用一个模块来定义更通用的命名空间来对相关样式进行分组。与 Suit CSS 中的实用程序类类似，这些可以被认为是可重用的样式特征，可以应用在组件上或组件内。

<div class="u-posAbsoluteCenter" am-position="absolute center">
    <div class="u-textTruncate u-textCenter" am-text="truncate center"> 
        Very centered text. 
    </div>
</div>

在这里，我们可以利用不同命名空间*am-position中的值和am-text操作的事实，因此我们可以在两个地方使用该值，而不必担心命名冲突。center

用 AM 构建

DEVELOPED BY - Glen Maddern、Ben Schwarz

WITH THANKS TO - Ben Smithett、Florent Verschelde、Robbie Manson

张鑫旭对 AMCSS 的看法

值得借鉴，但没必要大规模使用，毕竟属性选择器的性能和类名相比差别很大，过度使用可能会产生可感知的性能问题。

但是价值还是很可取的，关键要看使用场景，通常我们静态的组件开发，我建议还是使用类名串联，因为大家都习惯，同事也习惯。但是，有时候，AMCSS 这套基于属性选择器开发的思路还是很有用的。

例如，我们经常需要在 DOM 元素上存储数据，例如放在 data-store 属性中，此时，配合 AMCSS，我们可以非常高效进行不同数据不同样式的控制。

另外，无障碍访问中的 aria-*本质上也都是通过属性控制，现代 Web Components 的 UI 控制也是基于 HTML 属性，因此，AMCSS 是有生命力有市场的，但是，并不是作为主力出现。

avatar
文章
阅读
粉丝