学大师兄展新的一招

大师兄说，写样式有太多的class，为什么不用一些关键词去替代原本复杂的class 呢，在他的指导下面开始尝试去这样写。比如我写了一个btn 的样式，那么我把基础的样式写在btn这里，如果需要附加的样式，同时基于btn ，我就用相对应的关键词去写，比如 [role="tags"]，这是我用在标签上面的样式，基于btn，但是高宽不一样，这样做的好处可以省去一大堆复杂的class，然后可以用自己的关键词去写，方便自己去维护（声明：对于设计师来说，可能表达有问题）

输出到页面就是这样：

a.btn(role="tags",href="/tags/{{ tag }}"){{ tag }}

样式如下：

/* 按钮样式 */

.btn{
        display: inline-block;
        position: relative;
        outline: 0;
        color: rgba(0,0,0,0.44);
        background: rgba(0,0,0,0);
        font-size: 14px;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid rgba(0,0,0,0.15);
        white-space: nowrap;
        font-weight:400;
        font-style: normal;
        border-radius:999em;
}
.btn:hover{
        display: inline-block;
        position: relative;
        outline: 0px;
        color: #3CBD10;
        background: rgba(0,0,0,0);
        font-size: 14px;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid #3CBD10;
        white-space: nowrap;
        font-weight:400;
        font-style: normal;
        border-radius:999em;
}
[role="back"]{
        padding: 0.5em 1.25em;
        line-height:1.666em;

}
[role="navigation"]{
        padding: 0.5em 1.25em;
        line-height:1.666em;
}

[role="tags"]{
        padding: 6px 12px;
}

当大师兄把他的经验拿去做分享的时候，无情的被@高端工程师黑了，因为已经有人这样写了：http://amcss.github.io

CAIS

学大师兄展新的一招