如何使用OOCSS使按钮位置独立？

我有一个按钮，样式如下：

.btn 
{
    width: 100px;
    height: 40px;
    float: right;
    display: inline-block;
    background-color: #555555;
    border:1px solid #ffffff;
    font-family:OpenSansRegular;
    font-size:15px;
    color: #ffffff;
}

我认为，使用OOCSS原则，我们应该将视觉和结构分开。 类似这样的事情（我会假设——如果我错了，请纠正我）：

---

但是，如果我想对另一个按钮使用完全相同的配置，除了我想移除的浮动位置，我应该怎么做呢？OOCSS不是通过耦合结构中的定位而受到限制吗？

这可能取决于您实际拥有的结构，但我可能会做以下类似的事情，仍然遵循OOCSS原则：

.btn { /* Default button structure properties */
    width: 100px;
    height: 40px;
    display: inline-block;
}
.float-right { /* More specific button structure properties */
    float: right;
}
.skin { /* Default button skin properties */
    background-color: #555555;
    border: 1px solid #ffffff;
    font-family: OpenSansRegular;
    font-size: 15px;
    color: #ffffff;
 }

实际的类名可能不同，但如果您只有一个更具体的属性，我认为在这种情况下，具体的名称是有意义的

.btn { /* Default button structure properties */
    width: 100px;
    height: 40px;
    display: inline-block;
}
.float-right { /* More specific button structure properties */
    float: right;
}
.skin { /* Default button skin properties */
    background-color: #555555;
    border: 1px solid #ffffff;
    font-family: OpenSansRegular;
    font-size: 15px;
    color: #ffffff;
 }