.ProductDetails-title–sale {}
加前缀
如果你不想使用如此严格或者复杂的命名规则，给每一个选择器加前缀同样可以达到这样的效果。
CSS Code复制内容到剪贴板
.s-product-details {}
.t-product-details {}
.js-product-details {}
这种方法使得它很容易的在表象类中辨别结构类但是只是简单的写和理解。在上面的例子中的结构属性将会被应用到s-product-details选择器中。主题属性将应用于t-product-details选择器。
元素可以以同样的方式定义或者使用基类和修饰类…
XML/HTML Code复制内容到剪贴板
<button class="button">Button</button>
<button class="button button-checkout">Checkout Button</button>
<button class="button button-search">Search Button</button>
从一方面说明在Sass partials中加前缀对于当在文件夹中删除必要的存储partials时对一个很大的项目文件定位是很有帮助的。这种方法被使用于ITCSS中。
你选择什么都没有问题，重要的是记住你的选择,并将他们应用到整个项目中。
方法
随着命名规则的增加，CSS变得更安全，更高效了。由于较小的CSS文件和更少的权重问题，所需要的嵌套选择器将会减少。
尽管有这些改进你仍可以像下面的这个例子使用复制的CSS来完成样式。
CSS Code复制内容到剪贴板
.product-details__title {
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #333;
}
.latest-news__title {
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #FF0000;
}
这就是前端的方法的由来，将你的CSS划分层次会有助于防止重复的样式和大分组的选择器。共同或者基础的样式被分开定义，而更具体或者修饰的样式被添加到继承样式的顶部。
OOCSS
面向对象CSS有两个主要的原则第一是表现与结构分离，第二是容器与内容分离。这两个原则的设计是用来通过创建可复用的CSS模块以提高性能。
表现与结构分离：
CSS Code复制内容到剪贴板
<div class="box-padded product-image"></div>
<div class="box-padded product-description"></div>
