AMCSS的介绍

含义:

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

    AMCSS的官网:

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

优点:

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

的HTML和CSS;

传统类名写法:

div class=”button button-large button-blue”> Button

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

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

AMCSSE 写法

Button

Button
(避免属性，属性名冲突)

AMCSS则是基于属性控制

[am-button] {…}
> [am-button~=”large”] {…}
> [am-button~=”blue”] {…}

案例一: Bootstrap Buttons

Large primary button

Extra-small danger button

Extra-small danger button
> Extra-small danger button

传统样式写法:

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

AMCSS样式写法:

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

案例二: Flexbox Grid

传统写法:

<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>