乐趣区

关于css:两种-CSS-方法论-详细分析

jiezi

说起 CSS 命名标准，大家应该都很相熟，或者应该据说过 BEM。BEM 是由 Yandex 团队提出的一种 CSS Class 命名办法，旨在帮忙开发人员创立更好的且构造统一的 CSS 模块。

BEM 将页面的类名分为 块（Block）、元素（Element）、修饰符（Modifier）。

  • 块（Block）：一个块是视觉上或者语义上的一个整体，它是一个具体且惟一的一个元素，例如，页面上的一个弹窗，或者是一个搜寻框；
  • 元素（Element）：个别认为是块的组成部分，元素比拟用它父级的块名称做为前缀，例如，弹窗的题目、敞开按钮、确认按钮；
  • 修饰符（Modifier）：修饰符示意一个具体元素的特定状态，例如，敞开按钮在鼠标没放上去和放上去的时候，出现的两种状态。

当初用 Bootstrap 的弹窗组件，举一个更加具体的例子：

鼠标放上去和没放上去的状态是有区别的。

通过下面的示例能够看出，块与元素是通过 两个下划线（__）连贯的，而元素和修饰符之间是通过 两个短横线（--）连贯的。

当然，明天的文章不会着重介绍什么是 BEM，如果你之前没接触过 BEM 能够尝试去理解一下，并且多在在我的项目中试用几次，感触他的魅力。另外，当初网上曾经有十分多的文章在介绍 BEM 了，急躁找，必定能找到优良的教程的。明天的文章会分享比拟少人介绍的两种 CSS 方法论：SUIT CSS 和 SMACSS。

SUIT CSS

SUIT CSS 是一种基于组件开发的 CSS 的方法论，它将类名分为两种类型：工具类 和组件类。

工具类

CSS 中有很多固定工具类，比方：左右浮动、文本截断、垂直居中……。工具类的作用是帮忙程序缩小一些反复代码，并提供统一的实现。

命名规定：u-[sm-|md-|lg-]< 工具类名 >。工具类应用 u- 打头，前面接类名（类名应用驼峰的形式命名），两头能够加上 sm、md、lg 这种响应式的规定。

组件类

组件类用来形容一个个具体的组件，组件是形成一个具体应用程序的基石，所以组件的设计特地重要。

命名规定：[< 命名空间 >-]< 组件名 >[- 后辈名][-- 修饰符]，这样的命名形式，在编写 HTML 和 CSS 的时候有几个益处：

  • 有助于辨别组件的根元素，后辈元素，以及用来润饰的类；
  • 降级类名反复的几率；
  • 可能让类名更具备语义化；

上面来看看命名规定的各个局部的具体作用：

命名空间（可选）

命名空间是可选的，如果你心愿防止本人定义的组件类名与引入的第三方款式类名发生冲突，则能够为本人的类名加上命名空间。然而，如果你们业务中不存在第三方的款式，则能够不带命名空间。

.sfq-Modal{} / 我的弹窗组件 /.sfq-Button {} / 我的按钮组件 / 复制代码

组件名

组件名应用大驼峰规定（首字母大写的驼峰规定，Pascal Case）来命名，​应用这种形式也能够尽可能的避免出现同名款式的抵触。

.Modal {}复制代码

<div class=”Modal”>
 …</div> 复制代码

组件名 - 后辈名

组件的后辈指附加在组件上的一部分，例如，弹窗组件的题目、按钮等等。后辈名称应用小驼峰规定（首字母大写的驼峰规定，Camel Case）命名。

<div class=”Modal”>
 <header class=”Modal-title”>
   <h2 class=”Modal-titleName”> 欢送关注 </h2>
   <span class=”Modal-closeBtn”>X</span>
 </header>
 <div class=”Modal-content”>
   爱折腾的前端工程师，欢送关注我的公众号「更了不起的前端」</div></div> 复制代码

组件名 – 修饰符

修饰符是一种示意组件特定状态的类名，修饰符名称同样应用小驼峰规定来命名，并且和组件名间接须要用 两个短横线（--）进行连贯，这与 BEM 体现统一。

<button class=”Button Button–default”> 点击关注「更了不起的前端」</button><button class=”Button Button–primary”> 点击关注「更了不起的前端」</button> 复制代码

变量名

SUIT CSS 除了定义了工具类、组件类这两种命名形式外，还有定义了 CSS 变量的命名形式。命名规定： -- 组件名[- 后辈名 |-- 修饰符]-(CSS 属性 | 变量名)。

:root {/ 根底按钮的背景色 /
 –Button–default-backgroundColor: #909399;  / 次要按钮的背景色 /
 –Button–primary-backgroundColor: #409EFF;
}复制代码

SUIT CSS 小结

SUIT CSS 除了定义了工具类、组件类的命名形式外，还提供了残缺的根底类，以及测试套件用来检测你的 CSS 类名是否符合规范，具体应用办法能够查看官网文档（https://github.com/suitcss/suit）。SUIT CSS 能够说在 BEM 的根底上进行了改良，特地是去除了双下划线的设计，在观感上就比 BEM 好看了许多，而且各种名称都是通过驼峰的形式命名，省略了局部短横线，这让 SUIT CSS 的类名的长度上也会比 BEM 更加精简。

SMACSS

SMACSS 官网：smacss.com

SMACSS（Scalable and Modular Architecture for CSS）是一套易开发，易保护的 CSS 编写的方法论，它将 CSS 规定一共分为五大类：

  1. Base（根底）
  2. Layout（布局）
  3. Module（模块）
  4. State（状态）
  5. Theme（主题）

你应该能在你现有我的项目的款式里发现下面的五个分类，这几种类型的款式混合在一起会让你的代码显得特地简单，如果你无意识将这些款式归类，将大大降低复杂度。除了将款式归类之外，每个类别还有一些实用的准则。

根底规定

根底规定作用于元素选择器，用于定义 HTML 标签的默认款式。根底款式次要用于设置题目大小，默认链接色彩，默认字体款式以及 body 背景等。

/ 根底款式示例 /body, form {margin: 0;    padding: 0;
}a {color: #039;
}a:hover {color: #03F;    
}复制代码

布局规定

CSS 的实质上来说就是布局页面中的元素的，然而，页面各个元素也是有主次之分的。例如，头部、尾部这种大的区块就是次要组件，咱们称之为布局（Layout）。而导航栏（属于头部），网站阐明（属于尾部）这种区块为主要组件，咱们称之为模块（Module）。

上面举个具体的案例，来看看掘金的页面布局：

页面上有一个头部，一个导航条，一个内容区域以及一个侧边栏，这些都属于布局的局部。

SMACSS 中容许在布局款式中，应用 ID 选择器，有助于在 HTML 中一眼辨别出节点在布局中的地位。其余的非 ID 选择器的类，须要增加 l- 前缀，示意这属于布局款式。

<div id=”header”></div><div id=”navigation”></div><div id=”content” class=”l-left”></div><div id=”sidebar” class=”l-right”></div> 复制代码

模块规定

后面提到过模块，模块是绝对与布局组件来说，更加涣散的主要组件，这个辨别的确比拟含糊，所以有一些计划也勾销了布局规定，将所有可重用组件都划分为模块。

模块规定在官网文档没有具体的命名格调，我看了很多文章，在命名模块的时候根本都是在参考 BEM，所以这里不再独自介绍。

状态规定

状态是用来形容模块在不同状态下的外观，应用 is- 前缀，这有助于咱们在 HTML 中辨别元素的状态。

<header id=”header”>
 <ul class=”nav”>

    <!-- 示意被选中 -->

   <li class=”nav–item is-selected”> 欢送关注 </li>
   <li class=”nav–item”> 欢送关注 </li>
 </ul></header> 复制代码

某些状态优先级比拟高，能够酌情加上 !important，例如用来管制元素显示或暗藏的。

.is-hide {display: none !important;
}.is-show {display: block !important;
}复制代码

SMACSS 小结

这里没有特地介绍主题规定，因为主题在以后这个工夫，根本曾经被 CSS 变量所代替。SMACSS 有很多的规定这里没有具体列出来，然而在对于 CSS 如何命名方面的规定其实比拟少，而且它的布局规定与模块规定的确有些含糊，不太好辨别。

作者：Shenfq

退出移动版