今天早上坐地铁看公众号文章的时候发现了一篇关于如何写出更优雅、质量高、维护性比较强的css样式。
在老早以前我写css样式的时候相当暴力，各种写，行内样式(也叫内联样式)、内部样式、外部引用样式
// 行内样式写法
<body>
<p style="color:red; line-height: 50px"></p>
</body>
// 内部样式写法, 最好包在html <head>标签里面
<head>
<style type="text/css">
p {
line-height:50px;
color: red;
}
</style>
</head>
// 外部样式 引用，此处必须包在头部标签head里面才算规范
<head>
<link rel="stylesheet" href="./assets/style/demo.css" type="text/css">
</head>
/*
此处要注意一下 type="text/css"，可以修改的，以后有时间慢慢写吧
*/
有一个需要注意的地方
css样式里面的class是不区分大小写的
比如说 .demoText和 .demotext是一样的，但是Id的是区分大小写的
.demoText {}
.demotext {}
以上都是一样的效果
#demoText{}
#demotext {}
以上是不同的id，控制不同的标签样式
好了，废话不多说，继续说css样式构造方法
直接上图说话，用文章页来举例子！
OOCSS 写法
- Separate structure and skin（分离结构和主题）减少对 HTML 结构的依赖
- Separate container and content（分离容器和内容）增加样式的复用性
比如说一个Button
<div>
<button class="btn btn-default btn-disabled">Click Here </button>
</div>
<style>
.btn { } //
.btn-default {} //
.btn-disabled {} //
</style>
以上button样式首先分离了div结构，然后分离了主题样式， btn-default和btn-disabled样式肯定是不一样的，这样就会区分出来，样式不依赖任何结构，放在哪里都是由指定样式来表现
我个人理解oocss，举个例子，将各个结构里面的小组件里面的小元件等等分别摘出来作为一个小块来进行样式渲染，每个小元件里面定义好类名之后将小元件能够考虑到的各种状态各种颜色等等的样式分开来写，这样互不影响
Bootstrap就是依赖oocss的规则来定义css的
[优点] OOCSS追求元件的复用，其class命名更为抽象，一般不体现具体事物，而注重表现层的抽取.
BEM
bem 就是block, element modifier， 顾名思义就是块级、元素、修饰
举例子：
通常页面都会有侧边栏，侧边栏有头部，有尾部，所以侧边栏的样式和代码按照BEM规则来写如下
<div class="sidebar">
<div class = "sidebar-header">
</div>
<div class="sidebar-body">
<a href class="sidebar-body_active">xxx</a>
</div>
<div class="sidebar-footer">
</div>
</div>
[优点] 独立存在的区块，可以在不同场合下重用
[缺点] 写的css比较多，如果jquery里面也引用到样式名称，css重构之后js也需要随之更改；
SMACSS
SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. (smacss通过一个灵活的思维过程来检查你的设计过程和方式是否符合你的架构，更像一种规范~)
设计的主要规范有三点：
- Categorizing CSS Rules（为css分类）
- Naming Rules（命名规范）
- Minimizing the Depth of Applicability（最小化适配深度）
-
Categorizing CSS Rules
这一点是SMACSS的核心。SMACSS认为css有5个类别，分别是：
1 Base 页面元素的默认外观，不会定义到id&class
body {}
div {}
p {}
div
table {}
...
2 Layout 布局规范,元素是有层次级别之分的，Layout Rules属于较高的一层，它可以作为层级较低的Module Rules元素的容器。左右分栏、栅格系统等都属于布局规范。布局是一个网站的基本，无论是左右还是居中，甚至其他什么布局，要实现页面的基本浏览功能，布局必不可少。SMACSS还约定了一个前缀l-/layout-来标识布局的class。举个最普遍的例子。
.layout-header {}
.layout-container {}
.layout-sidebar {}
.layout-content {}
.layout-footer {}
3 Module Module Rules， 模块规范,模块是SMACSS最基本的思想，同时也是大部分CSS理论的基本，将样式模块化就能达到复用和可维护的目的，但是SMACSS提出了更具体的模块化方案。SMACSS中的模块具有自己的一个命名，隶属于模块下的类皆以该模块为前缀
.todolist{}
.todolist-title{}
.todolist-image{}
.todolist-article{}
4 State 状态规范,这个应该很多前端开发者都很好理解，描述的是任一元素在特定状态下的外观 , 例如，一个消息框可能有success和error等状态。与OOCSS抽取修饰类的方式的不同，SMACSS是抽取更高级别的样式类，得到更强的复用性，如隐藏某个元素的写法,
oocss抽取的是指定组件, smacss抽取的更高。
.is-success {}
.is-error {}
.is-hidden {}
5 Theme or Skin 主题规范,描述了页面主题外观，一般是指颜色、背景图。Theme Rules可以修改前面4个类别的样式，且应和前面4个类别分离开来（便于切换，也就是“换肤”）。SMACSS的Theme Rules不要求使用单独的class命名，也就是说，你可以在Module Rules中定义.header{ }然后在Theme Rules中也用.header { }来定义需要修改的部分(后加载覆盖前加载样式内容)
Naming Rules（命名规范）
按照前面5种的划分:
- Base Rules(Pass)
- Layout Rules用l-或layout-这样的前缀，例如：.l-header、.l-sidebar。
- Module Rules用模块本身的命名，例如图文排列的.media、.media-image。
- State Rules用is-前缀，例如：.is-active、.is-hidden。
- Theme Rules如果作为单独class，用theme-前缀，例如.theme-a-background、.theme-a-shadow。
Minimizing the Depth of Applicability 最小适配深度原则
/* depth 1 */
.sidebar ul h3 { }
/* depth 2 */
.sub-title { }
这种方法不建议用，因为集成选择符有时候会引发央视冲突，尽可能用短的
网友评论