随着CSS的 发展 ，使用CSS有语义化的命名约定和CSS层的分离，将有助于它的可扩展性，性能的 提高 和代码的组织管理。
在我前面的 文章 中讨论很多关于CSS的问题都可以通过使用一个适当的CSS策略来避免。在这篇文章里，我将着重于讨论使用一种方法 或者 一个命名规则所带来的好处。
这里有很多可供使用的前端方法和命名规则，每个都有自己的优缺点。在几乎所有的案例中CSS被分割成更易于管理的代码[块]。CSS的这种分割方式定义了每一种方法。
命名规则
一个可靠命名规则的 重要 性是不可 忽视 的。就像组织结构带来的好处一样，这里有很多性能上的优势让你能够坚持地，有责任感地去命名你的选择器。
正确使用任何规则将会在大型项目减少与CSS相关的忧虑而发挥关键的作用
BEM
最流行的命名规则之一就是BEM（block：块，Element：元素，Modifier：修饰符）。通过给每个元素添加它的父级block模块作为前缀，使得目标的安全性变得更加 简单 了。BEM还有助于消除页面和body类对嵌套或者附加样式依赖。
CSS Code 复制内容到剪贴板
. block &nbs p; {} .block__element {} . block --modifier {}
上面的例子展示了一个BEM项目的类结构，下划线（__）被用来区分元素，而用连字符(--)是用来修饰元素的。下面是一个现实世界的例子 .. .
CSS Code 复制内容到剪贴板
. PR oduct-det ai ls {} .product-details__price {} .product-details__price- -s ale {}
BEM中的一个圈套是引诱在修饰部分中添加多种 用途 的样式类。大的，小的，绿色的或者醒目的等修饰选择器被提出引入到标记中，这在不久的将来将会发生 改变 。
CSS Code 复制内容到剪贴板
.product-details {} .product-details__t IT le {} .product-details__title-- small {}
像大多数的多用途类一样，在项目一 开始 的时候意图很明显，但是当一个设计改变的时候常常会导致矛盾的CSS。
SUIT
Suit起 源 于BEM，但是它对组件名使用驼峰式和连 字号 把组件从他们的修饰和子孙后代中区分出来。
CSS Code 复制内容到剪贴板
@H_247_ 126 @ .u-utility {} . component N am e {} .COM ponentName--modifierName {} .ComponentName-descendantName {} .ComponentName.is-some stat e {}通过消除潜在的混乱连字符号连接元素名来使得选择器的 可读性 更强。
CSS Code 复制内容到剪贴板
.ProductDetails {} .ProductDetails-price {} .ProductDetails -t itle--sale {}
加前缀
如果你 不想 使用如此严格或者复杂的命名规则，给每一个选择器加前缀同样可以达到这样的效果。
CSS Code 复制内容到剪贴板
.s-product-details {} .t-product-details {} .js-product-details {}
这种方法使得它很容易的在表象类中辨别结构类但是只是简单的写和理解。在上面的例子中的结构属性将会被应用到s-product-details选择器中。主题属性将应用于t-product-details选择器。
元素可以以同样的方式定义或者使用基类和修饰类...
XM L/HT ML Code 复制内容到剪贴板
< button class = "button" > Button </ button > < button class = "button button-checkout" > Checkout Button </ button > < button class = "button button-se Arch " > Search Button </ button >
从一方面说明在Sass partials中加前缀对于当在文件夹中删除必要的存储partials时对一个很大的项目文件定位是很有帮助的。这种方法被使用于ITCSS中。
你选择什么都没有问题，重要的是记住你的选择,并将他们应用到整个项目中。
方法
随着命名规则的增加，CSS变得更安全，更高效了。由于较小的CSS文件和更少的权重问题，所需要的嵌套选择器将会减少。
尽管有这些改进你仍可以像下面的这个例子使用复制的CSS来完成样式。
CSS Code 复制内容到剪贴板
.product-details__title { font-f ami ly : 'Helvetica Neue' , Helvetica , Arial , sans-serif ; text-transform : up PE rcase ; color : # 333 ; } .la test -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 -i mage" ></div> <div class= "box-padded product-description" ></div> .product-image { width : 400px ; overflow : hidden ; } .product-description { width : 500px ; min-h ei ght : 200px ; overflow : auto ; } .box-padded { background : #FFF ; padding : 10px ; } ```
内容与容器分离：
CSS Code 复制内容到剪贴板
<div class= "wrapper recently-viewed" ></div> <div class= "wrapper suggested-products" ></div> .wrapper { width : 400px ; m arg in : 0 auto ; overflow : hidden ; } .recently-viewed { border : solid 1px #ccc ; background : #FFF ; color : ￡666; } .suggested-products { border : solid 1px #ccc ; background : #FFF ; color : ￡666; }
这种面向对象的工作方式创建了一 系列 可以用来设置CSS属性的多种用途类。这种工作方式可以提高站点性能和维护以及保持CSS文件的DRY原则。
即使标记的多个主题是一致的，一个面向对象方法可以添加矫正的CSS用来覆盖或删除不想要的继承样式。
CSS Code 复制内容到剪贴板
product-delivry.padded-box { padding :0 }
SMACSS
SMACSS像OOCSS一样以减少重复样式为基础。然而SMACSS使用一套五个层次来划分CSS给项目带来更结构化的方法。
Base - HTML elements & defaults
Layout -Page structure
Module - Re-usable code bloks
State - Active/Inactive etc
Theme - Typography and colour schemes etc
这个增加的组织和结构提高了输出的CSS的效率。这个方法同样适用于需要添加或者删除层次的地方。
ITCSS
ITCSS是一个完全不同于SMACSS的 全新 的方法，它 创造 了一系列的层次来管理依赖关系和促进可扩展性。基础的层次包括通用和广泛的选择器。顶部的层次包含了局部模块具体化的选择器。整套的层次如下...
Tools?—?Default mixins & functions
Generic?—?Normalize, resets, box-sizing
Base?—?HTML elements
Objects?—?Design patterns
Components?—?Modules & blocks of code
Trumps?—?Helpers & override s
每个层次增加的权重，只允许添加额外的要求。
以上面同样的例子，CSS将会被划分为基础层和组件层。
CSS Code 复制内容到剪贴板
p { font-family : 'Helvetica Neue' , Helvetica , Arial , sans-serif ; font-size : 14px ; } .product-details__title { color : #333 ; } .latest-news__title { color : #FF0000 ; }
使用前请注意
你仅仅是可以决定使用上述策略之一，但是你不是全部都得靠它。如果某一层次并不适合你的项目那么就不要使用它了。你也可以改变或者增加一些东西来使得它适应你的项目和 团队 的需求。命名规则或者方法并不是每个时候都能100%的适合所有项目。
你也可以创建你自己的方法或者命名规则，允许一个量身定制的解决 方案 来完美的适应你项目的需求。定制解决方案的一个不足之处就是缺乏社区的支持和文档。
总结
以上是 为你收集整理的 CSS中的层分离编程详解 全部内容，希望文章能够帮你解决 CSS中的层分离编程详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。