怎样写出可复用的css1. 之前我们经常被告知尽量语义化css：html中定义class时，好的命名是以html内容来定

1. 之前我们经常被告知尽量语义化css：html中定义class时，好的命名是以html内容来定义，而非css表现。如下：

如上，实现一个居右的【更换门店】按钮：

<!--好的-->
<style>
  .change-store {
    float: right;  
  }
</style>
<a href="#" class="change-store">更换门店</a>

<!--不好的-->
<style>
  .fr {
    float: right;  
  }
</style>
<a href="#" class="fr">更换门店</a>

2. 比对

业务命名的css，类似.change-store

感觉上像css依赖html结构

抽象业务功能命名css，如.card

感觉上像html依赖css

3. 怎么选择

怎么选择，取决于我们想要公共哪部分，或者说我们想要哪块复用性更高。如果想要我们的css更加灵活和可复用，结论就是像下面这样命名：

.card
.btn, .btn--primary, .btn--secondary
.badge
.card-list, .card-list-item
.img--round
.modal-form, .modal-form-section

参考

Adam Wathan：CSS Utility Classes and "Separation of Concerns"