CSS

CSS分层理论

CSS分层理论

Posted by wang chong on May 16, 2019

为什么要分层?

  1. CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性、性能的提高和代码的组织管理。
  2. 大量的样式、覆盖、权重和很多的!important很难维护,分好层可以让团队命令统一规范,方便维护。
  3. 团队成员都可以有责任的去命名CSS选择器

多种分层方式

SMACSS

官网

SMACSS(Scalablew and Modular Architecture for CSS 可扩展的模块化架构的CSS),像OOCSS一样以减少重复样式为基础。然而SMACSS使用一套五个层次来划分CSS给项目带来更结构化的方法:

  1. Base - 设定标签元素的预设值 PS:html{} input[type=text] {}
  2. Layout - 整个网站的[大架构]的外观 PS:#header {margin:30px 0;}
  3. Module - 应用在不同页面的公共模块 PS .button{}
  4. State - 定义元素不同的状态 PS .nav-main { .active{} }
  5. Theme - 画面上所有的 【主视觉】的定义 PS : border-color、background-image

在写选择器的时候,修饰符使用的是–,子模块使用__符号,两个单词间有语义化使用-连接,例如

<div class="container"> 
    <div class="container-header">
        <div class="container-header__title">
            <h1 class="container-header__title--home"></h1>
        </div>
    </div>

</div>   

BEM

官网

BEM和SMACSS非常的类似,主要用来如何给项目命名。一个简单命名更容易让别人一起工作。比如选项卡导航是一个块(Block),这个块里的元素是其中变迁之一(Element),而当前选项卡是一个修饰状态(Modifier):

  1. block - 代表了更高级的抽象或组件
  2. block__element - 代表.block的后代,用于形成一个完整的 .block的整体。
  3. block_modifier - 代表.block的不同状态或不同版本。

修饰符使用的是_ , 子模块使用__符号。(不同一个-的原因是CSS单词连接),例如:

<ul class="menu">
    <li class="menu__item"> </li>
    <li class="menu__item_state_current"> </li>
    <li class="menu__item"> </li>
</ul>

SUIT

官网

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

修饰符使用的是–,子模块使用__符号。(不用一个-的原因是CSS单词连接),例如:

.u-utility {}
.ComponentName {}
.Component--modifierName {}
.ComponentName-descendantName {}
.ComponentName .is-someState {}

.ProductDetails {}
.ProducDetails-price{}
.ProductDetails-title--sale {}

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

.s-product-details {}
.t-product-details {}
.js-product-details {}

结构属性将会被应用到s-product-details选择器中。主题属性将被应用于t-product-details选择器中。

ACSS

官网

ACSS考虑如何设计一个系统的接口。

原子(Atoms)是创建一个区块的最基本的特质,比如说表单按钮。分子(Molecules)是很多个原子(Atoms)的组合,比如说一个表单中包括了一个标签,输入框和按钮。生物(Organisms)是众多分子(Molecules)的组合物,比如说一个网站的顶部,它包括了网站的标题、导航等。而模板(Temolates)又是众多生物(Organisms)的结合体。比如说一个网站页面的布局。而最后的页面就是特殊的模板。

.m-10 {
     margin: 10px;
}
.w-50 {
    width: 50%;
}

ITCSS

官网

ITCSS是一个用来组织管理CSS代码的一个规范。有一下要点:

  1. Settings – 全局可用配置,设置开关。 $color-ui : # BADA55 ; $spacing-unit: 10px;
  2. Tools – 通用工具函数。 @mixin font-color() {font-color: $color-ui}
  3. Generic – 通用基础样式。 Normalize、resets、box-sizing:border-box;
  4. Base – 未归类的HTML元素。 ul{ list-sytle : square outside}
  5. Objects – 设计部分开始使用专用类。 .ui-list__item {padding: $spacing-unit;}
  6. Components – 设计符合你们的组件 .products-list {@include font-brand(); border-top:1px solid $color-ui;}
  7. Trumps –重写, 只影响一块的DOM。通常带上我们的!important;

书写CSS技巧

  1. 尽量不让自己的样式层级超过3层
  2. 尽量不使用!important,通过添加和使用类名,比如.hidden类名
  3. 尽量原理Sass中介绍@extend的一般经验法则–他们有些是迷惑人
  4. 尽量在样式表中添加注释
  5. 让团队写CSS有一个标准规范—Harry Roberts写了一个很有名的CSS指南
  6. 此外,应该有一个可以展示元素样式的模块库
  7. 使用类似scss-lint工具,让你的SCSS/CSS和规范保持一致。
  8. 尽量不要使用*这样的全局选择器
  9. JavaScript钩子是使用的类名,尽量加上前缀js-
  10. 取名尽量和bootstrap框架的组件接近。
  11. 在样式中避免使用#id