首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 生活随笔 > 正文

    CSS中的层分离编程详解 什么是分离定律

    时间：2020-05-08来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

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

    在我前面的文章中讨论很多关于CSS的问题都可以通过使用一个适当的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选择器。

    元素可以以同样的方式定义或者使用基类和修饰类...

    XML/HTML Code复制内容到剪贴板

    Button

    Checkout Button

    Search 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复制内容到剪贴板

    .product-image {

    width: 400px;

    overflow: hidden;

    }

    .product-description {

    width: 500px;

    min-height: 200px;

    overflow: auto;

    }

    .box-padded {

    background: #FFF;

    padding: 10px;

    }

    ```

    内容与容器分离：

    CSS Code复制内容到剪贴板

    .wrapper {

    width: 400px;

    margin: 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 overrides

    每个层次增加的权重，只允许添加额外的要求。

    以上面同样的例子，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中的层分离编程详解 什么是分离定律 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文CSS中的层分离编程详解 什么是分离定律由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.