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