大师兄说,写样式有太多的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