怎么在CSS中利用methodologies实现模块化-创新互联

这期内容当中小编将会给大家带来有关怎么在CSS中利用methodologies实现模块化，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、网页空间、营销软件、网站建设、深泽网站维护、网站推广。

一、什么是 CSS methodologies

CSS methodologies，可以理解成设计模式，也可以理解成 css 规范，市面使用情况如下图：

怎么在CSS中利用methodologies实现模块化

二、常见的 CSS methodologies

1、OOCSS

面向对象的 CSS（Object-Oriented CSS，简称OOCSS ），由 Nicole Sullivan 于 2008 年提出，这基于她在雅虎的工作。

（1）规则

1、不要使用 ID 用 Class

直接使用class来设定样式，这样写不只是可以增加语义，同時也降低css对html的依赖。

2、结构和样式分离

虽然早期 html 和 css 实现了结构和样式的分离，但 css 内部同样存在两种类型的样式：

结构样式（例如长宽、距离）
皮肤样式（例如颜色、阴影）

所以 OOCSS 建议把这两种样式拆开。

比如有三种按钮，白色的/绿色的/红色的，可分别定义为：

class="btn btn-default"

class="btn btn-green"

class="btn btn-red"

如果你真的有很多个具有紫色按钮，则可以创建一个单独的紫色按钮类。这样可以大大减少CSS代码的数量。

3、容器和内容分离

内容绝不应该限制于特定的容器，为了重用，得分离开。

# 错误写法
.header .action {
}
.header .action .login {
}
.header .action .register {
}

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

继承选择符是有用的，它可以减少因相同命名引发的样式冲突（常发生于多人协作开发）。但是，我们不应过度使用。

（2）利弊

好处：

模块化，可重用
减少代码重复
提高可拓展性、可维护性、可读性

缺点：

虽减少了深层的嵌套选择器，但是多了更多的类
如果代码中没有大量重复的视觉模式，比如一些小项目，则应用OOCSS可能不切实际

（3）实例

Bootstrap 就是用的 OOCSS。

例如：

html

css：

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

2、BEM

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

（1）内容

BEM 包括三个：

Block - 块，如 header
Element - 子元素，如块menu 下的 item
Modfier - 状态，如.current、.active

（2）规则

1、命名规范

-中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线：用来连接块和块的子元素。
-- 双中划线：用来描述一个块或者块的子元素的一种状态。

在某些公司（如腾讯）的规范里，双中划线被单下划线（_）替代。

例如：.block-name__element--modifier

demo - html：

BEM 命名会使得 Class 类名变长，但经过 gzip 压缩后这个带宽开销可以忽略不计。

BEM是不允许用标签选择器的，哪怕最简单的 li 也得写成 .menu-item。

饿了么的框架elementUI就是BEM的一种，或者你也可以研究网站company.yandex.ru/。

SMACSS（Scalable & Modular Architecture CSS ，即 CSS 的可扩展性和模块化架构）。Jonathan Snook 于 2011 年提出，当时他在雅虎工作，为 Yahoo Mail 编写 CSS。

Atomic CSS 也是雅虎提出的，可以从字面意思理解成原子 CSS。

会有专门的 Atomic css 工具，帮助将上面 html 中的 class name 解析成正常的 css。（略）

坏处：这根本就是在写 inline-style，只是我们用 class name 的方式來表示而已。

他们各自的思想有互补也有冲突，在实际开发中可以有取舍的使用

把上文分别介绍他们的好处列举在一起对比汇总，发现他们解决的核心问题就是：模块化

上述就是小编为大家分享的怎么在CSS中利用methodologies实现模块化了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

重庆分公司，新征程启航

怎么在CSS中利用methodologies实现模块化-创新互联

其他资讯