CSS中的层分离编程详解

随着CSS的发展，使用CSS有语义化的命名约定和CSS层的分离，将有助于它的可扩展性，性能的提高和代码的组织管理。

在我前面的文章中讨论很多关于CSS的问题都可以通过使用一个适当的CSS策略来避免。在这篇文章里，我将着重于讨论使用一种方法或者一个命名规则所带来的好处。

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

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

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

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

1. .block {}
2. .block__element {}
3. .block–modifier {}

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

1. .product-details {}
2. .product-details__price {}
3. .product-details__price–sale {}

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

1. .product-details {}
2. .product-details__title {}
3. .product-details__title–small {}

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

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

1. .u-utility {}
2. .ComponentName {}
3. .ComponentName–modifierName {}
4. .ComponentName-descendantName {}
5. .ComponentName.is-someState {}