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