应用CSS methodologies去完成控制模块化的方式示例

1、甚么是 CSS methodologies

CSS methodologies，能够了解成 设计方案方式，还可以了解成 css 标准，市面上应用状况以下图：

上图来源于：https://2019.stateofcss.com/technologies/

你将会在平常开发设计中其实不会专业花時间去留意和掌握 CSS methodologies，但伴随着你工作经验的累积，你将会会自身思索，或阅读文章他人的编码、参照在网上完善的架构，这里边都或多或少的包含了1些 css methodologies 的闪亮点。而下面要详细介绍的几种流行的 css methodologies，则能够帮你保证很好的总结和整理。

2、普遍的 CSS methodologies

1、OOCSS

朝向目标的 CSS（Object-Oriented CSS，简称 OOCSS ），由 Nicole Sullivan 于 2008 年提出，这根据她在yahoo的工作中。

（1）标准

1、不必应用 ID 用 Class

立即应用class来设置款式，这样写不只是能够提升词义，同時也减少css对html的依靠。

2、构造和款式分离出来

尽管初期 html 和 css 完成了断构和款式的分离出来，但 css 內部一样存在两类型型的款式：

• 构造款式（比如长宽、间距）
• 皮肤款式（比如色调、黑影）

因此 OOCSS 提议把这两种款式拆卸。

例如有3种按钮，白色的/翠绿色的/鲜红色的，可各自界定为：

class="btn btn-default"

class="btn btn-green"

class="btn btn-red"

假如你真的有许多个具备紫色按钮，则能够建立1个独立的紫色按钮类。这样能够大大降低CSS编码的数量。

3、器皿和內容分离出来

內容决不应当限定于特殊的器皿，以便重用，得分离出来开。

# 不正确写法
.header .action {
}
.header .action .login {
}
.header .action .register {
}

# 正确写法
.header{
}
.action{
}
.login {
}
.register {
}

承继挑选符是有效的，它能够降低因同样取名引起的款式矛盾（常产生于多人合作开发设计）。可是，大家不可过多应用。

（2）利与弊

益处：

• 控制模块化，可重用
• 降低编码反复
• 提升可扩展性、可维护保养性、可读性

缺陷：

• 虽降低了深层次的嵌套循环挑选器，可是多了更多的类
• 假如编码中沒有很多反复的视觉效果方式，例如1些小新项目，则运用OOCSS将会脱离实际

（3）案例

Bootstrap 便是用的 OOCSS。

比如：

html

 <div class='header'>
        <ul class='menu'> 
            <li class='menu-item active'>1</li>
            <li class='menu-item'>2</li>
            <li class='menu-item'>3</li>
        </ul>
        <div class="action">
            <button class="btn btn-login">login</button>
            <button class="btn btn-register">register</button>
        </div>
    </div> 

css：

.header {
}
.menu {
}
.menu-item {
}
.item.active {
}
.action {
}
.btn {
}
.btn-login {
}
.btn-register{
}

2、BEM

BEM - Block Element Modfier（块元素编写器）。诞生于2009年。

（1）內容

BEM 包含3个：

• Block - 块，如 header
• Element - 子元素，如 块menu 下的 item
• Modfier - 情况，如.current、.active

（2）标准

1、取名标准

• -中划线 ：仅做为连标识符应用，表明某个块或某个子元素的多单词之间的联接记号。
• __ 双下划线：用来联接块和块的子元素。
• -- 双中划线：用来叙述1个块或块的子元素的1种情况。

在一些企业（如腾迅）的标准里，双中划线被单下划线（_）取代。

比如：.block-name__element--modifier

demo - html：

    <div class='header'>
        <ul class='header__menu'> 
            <li class='header__menu-item--active'>1</li>
            <li class='header__menu-item'>2</li>
            <li class='header__menu-item'>3</li>
        </ul>
        <div class="header__action">
            <button class="header__btn--login">login</button>
            <button class="header__btn--register">register</button>
        </div>
    </div> 

demo - less:

.header {
    &__menu {}
    &__menu-item {}
    &__action {}
    &__btn {  
        &--login {}
        &--register {}
    }    
}

2、防止嵌套循环

BEM 数最多仅有 B+E+M 3级。

因此请防止 .block__el1__el2 的文件格式，立即改成 .block_el2。

这里的 block 就很像取名室内空间了。

（3）利与弊

益处：

• 等级关联1目了然，具备可读性
• 不必须借助等级挑选器来限制管束功效域，可防止跨组件的款式污染。

缺陷：

• 取名方法长而不好看，撰写麻烦（能够根据 less/sass 来简化撰写）
• 在较小的组件中，BEM 文件格式将会显得鸡肋。但针对公共性的、全局性性的控制模块款式界定，還是强烈推荐应用 BEM 文件格式。（特别对外公布的公共性组件）

别的：

BEM 取名会使得 Class 类名变长，但历经 gzip 缩小后这个带宽花销能够忽视不计。

BEM是不容许用标识挑选器的，哪怕最简易的 li 也得写成 .menu-item。

（4）实践活动

饿了么的架构elementUI便是BEM的1种，或你还可以科学研究网站company.yandex.ru/。

3、SMACSS

SMACSS（Scalable & Modular Architecture CSS ，即 CSS 的可拓展性和控制模块化构架）。Jonathan Snook 于 2011 年提出，那时候他在yahoo工作中，为 Yahoo Mail 撰写 CSS。

（1）标准

1、Categorizing CSS Rules（CSS 归类标准）

它将 CSS 分成5个不一样的种别：

Base 基础标准

比如 CSS Reset 和 CSS Normalize。

Layout 合理布局标准

比如上下分栏、栅格数据系统软件。

Module 控制模块

比如1个商品目录，1个导航栏条。可重用。

State 情况标准

比如选定情况。

Theme 款式标准

2、Naming Rules（取名标准）

为类名加上前缀：

Base 不必须前缀。并且是用标识而并不是 class 和 ID。

• l- 用作 Layout 的前缀：l-inline
• m- 用作 Module 的前缀：m-callout。但还可以无需前缀。
• is- 用作 State 的前缀：is-collapsed
• Theme 1般会新建个 theme.css，用以前存在的类名。假如想用独立的类名，能用 theme- 前缀。

事例：

<div class="l-box m-profile m-profile--is-pro-user">
  <img class="m-avatar m-profile__image" />
  <p class="m-profile__bio">...</p>
</div>

（2）案例

线上 demo：https://codepen.io/savemuse/pen/gWVpvd

4、 Atomic CSS

Atomic CSS 也是yahoo提出的，能够从字面意思了解成分子 CSS。

（1）示例

<div className="P(10px) M(20%) Pos(f) Start(50%) Bgc(#fff)" />

会有专业的 Atomic css 专用工具，协助将上面 html 中的 class name 分析成一切正常的 css。（略）

（2）利与弊

益处：将 CSS style 最少元件化，重用性最大化。

弊端：这压根便是在写 inline-style，只是大家用 class name 的方法來表明罢了。

（3）总结

这类做法真的很激进。我临时没法接纳。

3、总结

抛开激进的Atomic，我对剩余的 OOCSS / BEM / SMACSS 有以下提议：

她们各有的观念有互补也是有矛盾，在具体开发设计中能够有选择的应用

她们都可以以融合 CSS 预解决器（如 less/sass ）得到更好的高效率

把上文各自详细介绍她们的益处例举在1起比照汇总，发现她们处理的关键难题便是：控制模块化
 

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。