我们为大家收集整理了关于CSS中的层分离编程，以方便大家参考。

这里有很多可供使用的前端方法和命名规则，每个都有自己的优缺点。在几乎所有的案例中CSS被分割成更易于管理的代码“块”。CSS的这种分割方式定义了每一种方法。

命名规则

一个可靠命名规则的重要性是不可忽视的。就像组织结构带来的好处一样，这里有很多性能上的优势让你能够坚持地，有责任感地去命名你的选择器。

正确使用任何规则将会在大型项目减少与CSS相关的忧虑而发挥关键的作用

BEM

最流行的命名规则之一就是BEM(block：块，Element：元素，Modifier：修饰符)。通过给每个元素添加它的父级block模块作为前缀，使得目标的安全性变得更加简单了。BEM还有助于消除页面和body类对嵌套或者附加样式依赖。

CSS Code复制内容到剪贴板

.block {}

.block__element {}

.block--modifier {}

上面的例子展示了一个BEM项目的类结构，下划线(__)被用来区分元素，而用连字符(--)是用来修饰元素的。下面是一个现实世界的例子...

CSS Code复制内容到剪贴板

.product-details {}

.product-details__price {}

.product-details__price--sale {}

BEM中的一个圈套是引诱在修饰部分中添加多种用途的样式类。大的，小的，绿色的或者醒目的等修饰选择器被提出引入到标记中，这在不久的将来将会发生改变。

CSS Code复制内容到剪贴板

.product-details {}

.product-details__title {}

.product-details__title--small {}

像大多数的多用途类一样，在项目一开始的时候意图很明显，但是当一个设计改变的时候常常会导致矛盾的CSS。

SUIT

Suit起源于BEM，但是它对组件名使用驼峰式和连字号把组件从他们的修饰和子孙后代中区分出来。

CSS Code复制内容到剪贴板

.u-utility {}

.ComponentName {}

.ComponentName--modifierName {}

.ComponentName-descendantName {}

.ComponentName.is-someState {}

通过消除潜在的混乱连字符号连接元素名来使得选择器的可读性更强。

CSS Code复制内容到剪贴板

.ProductDetails {}

.ProductDetails-price {}

.ProductDetails-title--sale {}

加前缀

如果你不想使用如此严格或者复杂的命名规则，给每一个选择器加前缀同样可以达到这样的效果。

CSS Code复制内容到剪贴板

.s-product-details {}

.t-product-details {}

.js-product-details {}

这种方法使得它很容易的在表象类中辨别结构类但是只是简单的写和理解。在上面的例子中的结构属性将会被应用到s-product-details选择器中。主题属性将应用于t-product-details选择器。

希望大家可以学会CSS中的层分离编程想了解更多精彩内容，请关注我们的网站!

相关推荐：

CSS每行显示4个图片样式介绍 

CSS属性缩写全写介绍