我有一个具有以下风格的按钮:
.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原则,我们应该将视觉与结构分开。 这样的事情(我会假设 - 如果我错了,请纠正我):
.btn
{
width: 100px;
height: 40px;
float: right;
display: inline-block;
}
.skin
{
background-color: #555555;
border:1px solid #ffffff;
font-family:OpenSansRegular;
font-size:15px;
color: #ffffff;
}
但是如果我想对另一个按钮使用完全相同的配置怎么办,除了我想删除的浮动位置,我应该怎么做? OOCSS是否通过耦合结构中的定位来限制?
答案 0 :(得分:0)
这可能取决于你实际拥有的结构究竟是什么,但我可能会做一些类似于以下仍然遵循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;
}
实际的类名可能有所不同,但鉴于您只有一个特定属性,我认为具体名称在这种情况下是有意义的。