符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
怎么在CSS中利用methodologies实现模块化
这期内容当中小编将会给大家带来有关怎么在CSS中利用methodologies实现模块化，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
从网站建设到定制行业解决方案，为提供成都网站设计、成都网站制作服务体系，各种行业企业客户提供网站建设解决方案，助力业务快速发展。创新互联将不断加快创新步伐，提供优质的建站服务。
一、什么是 CSS methodologies
CSS methodologies，可以理解成 设计模式，也可以理解成 css 规范，市面使用情况如下图：
二、常见的 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）利弊
好处：
模块化，可重用
减少代码重复
提高可拓展性、可维护性、可读性
缺点：
（3）实例
Bootstrap 就是用的 OOCSS。
例如：
html
1
2
3
login
register
css：
.header {
}
.menu {
}
.menu-item {
}
.item.active {
}
.action {
}
.btn {
}
.btn-login {
}
.btn-register{
}2、BEM
BEM - Block Element Modfier（块元素编辑器）。诞生于2009年。
（1）内容
BEM 包括三个：
（2）规则
1、命名规范
在某些公司（如腾讯）的规范里，双中划线被单下划线（_）替代。
例如：.block-name__element--modifier
demo - html：
1
2
3
login
register
demo - less:
.header {
&__menu {}
&__menu-item {}
&__action {}
&__btn {
&--login {}
&--register {}
}
}2、避免嵌套
BEM 最多只有 B+E+M 三级。
所以请避免 .block__el1__el2 的格式，直接改为 .block_el2。
这里的 block 就很像命名空间了。
（3）利弊
好处：
缺点：
其他：
BEM 命名会使得 Class 类名变长，但经过 gzip 压缩后这个带宽开销可以忽略不计。
BEM是不允许用标签选择器的，哪怕最简单的 li 也得写成 .menu-item。
（4）实践
饿了么的框架elementUI就是BEM的一种，或者你也可以研究网站company.yandex.ru/。
3、SMACSS
SMACSS（Scalable & Modular Architecture CSS ，即 CSS 的可扩展性和模块化架构）。Jonathan Snook 于 2011 年提出，当时他在雅虎工作，为 Yahoo Mail 编写 CSS。
（1）规则
1、Categorizing CSS Rules（CSS 分类规则）
它将 CSS 分为5个不同的类别：
Base 基本规范
例如 CSS Reset 和 CSS Normalize。
Layout 布局规范
例如左右分栏、栅格系统。
Module 模块
例如一个产品列表，一个导航条。可重用。
State 状态规范
例如选中状态。
Theme 样式规范
2、Naming Rules（命名规则）
为类名添加前缀：
Base 不需要前缀。而且是用标签而不是 class 和 ID。
l- 用作 Layout 的前缀：l-inline
m- 用作 Module 的前缀：m-callout。但也可以不用前缀。
is- 用作 State 的前缀：is-collapsed
Theme 一般会新建个 theme.css，用之前存在的类名。如果想用单独的类名，可用 theme- 前缀。
例子：
...
（2）实例
在线 demo：https://codepen.io/savemuse/pen/gWVpvd
4、 Atomic CSS
Atomic CSS 也是雅虎提出的，可以从字面意思理解成原子 CSS。
（1）示例
会有专门的 Atomic css 工具，帮助将上面 html 中的 class name 解析成正常的 css。（略）
（2）利弊
好处：将 CSS style 最小元件化，重用性最大化。
坏处：这根本就是在写 inline-style，只是我们用 class name 的方式來表示而已。
（3）总结
这种做法真的很激进。我暂时无法接受。
三、总结
抛开激进的Atomic，我对剩下的 OOCSS / BEM / SMACSS 有如下建议：
他们各自的思想有互补也有冲突，在实际开发中可以有取舍的使用
他们都可以结合 CSS 预处理器（如 less/sass ）获得更好的效率
把上文分别介绍他们的好处列举在一起对比汇总，发现他们解决的核心问题就是：模块化
上述就是小编为大家分享的怎么在CSS中利用methodologies实现模块化了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。
分享文章：怎么在CSS中利用methodologies实现模块化
文章来源：http://bjjierui.cn/article/gjgeds.html
