在最近的项目重构中，我发现经常会写出类似下面的CSS，本身看着其实没有太大问题并且工作也是正常的，但是对于CSS的易用性和可维护性来说就是很大问题了。这就是本文要介绍的二个关于OOCSS（面向对象的CSS）的最重要的二个原则。
h4
{
font-size: 18px;
margin: 18px 0;
color: #333;
.title {
line-height: 30px;
}
.action-bar {
font-family: @default-font-family;
font-weight: normal;
}
.action-bar[class*="col-"] {
padding-left: 15px;
padding-right: 15px;
}
}OOCSS的两个主要原则：
这意味着我们需要以skin的形式定义可重复使用的Visual Features（像background和border样式），那么之后可以与其它各种各样的对象混合以达到不同的效果，而不需要太多的代码。
结构与样式的分离同时也意味着使用class去命名你的对象和它们的组件，而不是单独的依赖于HTML的语义。举例来说，我们可以为media对象添加class='media'，并且为它的组件添加class='img'（如image/video元素）和class='bd'（如body/text元素）。
在样式表中通过引用这些classes（而不是直接给 <img> 元素添加样式），会让你的HTML更加灵活。举例来说，如果在接下来的几年内，一个新的media元素（如<svg>）出现了，我们可以将它无缝融入当前的HTML中。
本质上来说，这意味着尽量不要使用依赖于位置的样式。任何一个对象应该保持样式一致，尽管你将它放置在不同的位置。所以，不要给<h2>添加类似 .myObject h2 {...} 这样的样式，而是创建并使用一个class来表示你所希望的<h2>，如<h2 class='category'>。
这样一来，我们可以确保:
<h2>的样式会保持一致category CSS class的元素的样式会保持一致.myObject h2的样式与<h2>一致，你并不需要去覆盖它