#番外-让你的CSS好读起来！CSS命名方法论笔记

你有以下困扰吗？

常常不知道要怎麽命名Class吗？（还一直去 Google 英文字的是你ㄇ ？）
还是常常写了一个Class样式後就被另一个Class样式给覆盖？（我来自首！）
命名了.button-green後，设计师又说不要绿色了，全部改蓝色！害你一个一个改命名吗？（又是我！）

那你更应该跟我一起学一下CSS命名方法论！

昨天算是纯CSS的动态正式结束了
（虽然後面两篇还是有小用JS）
今天额外想要探讨一下CSS的命名规则，
虽然写到这里时我的铁人赛文章几乎都快写完了，
然後Demo code也是 XD

但也是警惕一下自己，之後希望都可以照着命名规则去前进。

CSS命名的不要！

坏的命名不要！
（同场放歌：嫑Biao）

CSS命名时，其实就是要避免开头写到的第三种情况

让元素的命名不要依赖於位置或是样式，
命名了.button-green後，设计师又说不要绿色了，全部改蓝色！害你一个一个改命名吗？
这边参考卡斯柏老师的文章)，

1.元素避免直接用相对关系命名
避免： .container-item ，也可以用OOCSS的风格拆开：.container .item

2.色彩等样式避免直接用颜色命名，改以风格命名
避免. .button-green ，改以 .button-active等状态命名
状态一定是比样式更高的一个层级，当要改颜色时，命名就不用动罗！

3.Layout避免用位置命名
避免.left-menu等，可以用OOCSS的风格将位置拆开：
.menu .left 之後还可以重复利用呢！

而该如何更好的命名呢？下面就开始进入正题罗！

常见的3种命名风格

常见的命名风格有BEM、OOCSS和SMACSS
从如何去命名（抽象地去重组概念）到命名的风格，
让CSS选择去不会有冲突、可以重复利用，甚至更好地维护。
其实三种个核心就是把东西给拆解，
分为布局、元素和样式等等，让彼此关系不要互相依赖，
可以独立存在。
先快速看一下吧！

风格1: BEM 名称最短最好记

(Block Element Modifier)
最近在国外的前端求职网站比较常看见的BME，也常在codepen上看到，
看命名就知道是以区块为主（废话）

是以「区块__元素 — 样式（修饰符）」的命名风格，

由区块、元素与修饰状态

• Block是页面独立的区块，每个页面都可以看成很多区块的组合。
• Element是指区块中的元素
• Modifier 是指描述Block或者Element的属性或状态

例如我们有一个header区块，里面有button元素，和样式修饰active和disable

命名就会是：

.header

.header_button—-active

.header_button—-disable

可以搭配SCSS传送门更有效率地写程序码！

.header{
	
	&_button{
	border: 1px solid black;

		&—-disable{
			background: black;
			}

	}

}

风格2: OOCSS：物件导向的CSS

OOCSS(Object-oriented programming)命名就是以物件导向为中心思想，
BootStrap就是很典型的 OOCSS～可以自由组合出想要的网页模样 ，
且避免多写很多行同样的 CSS 样式。

OOCSS比起「BME明确的命名指导」，比较是「CSS风格指引」
BootStrap就有一点BEM + OOCSS的味道在（如果有错还请指教！）

OOCSS原则：

1. 容器与内容 分离(container vs. content)
2. 结构与样式 分离 （structure vs. skin）

原则1: header 就是容器 ，logo、menu、button 就是内容。
让内容离开容器也可以正确显示。

原则2:让结构和样式分离，不会互相依赖。就是把样式跟结构拆离，
譬如说我有一个button，但在各种使用情境下风格不同(.active / .disable)
所以会把skin拆出来

.button {
  width: 200px;
  height: 50px;
}

.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

这样的结构与样式抽离，可以让开发者透过组合更好来重复利用、维护与管理，
如果需要改部分样式时，只要把部分的零件拿掉，不会牵一发动全身！

风格3: SMACSS 伸缩自如的CSS架构！

Scalable and Modular Architecture for CSS —>可伸缩模块化的CSS架构

主要分成5大类：

1.基础(Base) default style, 不需要前缀
2.布局(Layout)，将页面切割的部分前缀为 l- 或 layout-，如l-table、layout-grid
3.模块(Module)-可重复利用的对象，前缀为 m-或本身名称，如m-nav
4.状态(State)-如隐藏、active等等，前缀为 is-，如is-active
5.主题(theme)-如明亮、暗模式，前缀为 theme-，如theme-dark

我觉得SMACSS跟OOCSS的概念满像的。（一样有错请多指教！）
布局和模块对应容器与内容分离
模块和状态对应结构与样式分离
都是为了减少对彼此的依赖。

以上！

当我自己在写code时最近常用的是BEM，
也因为写的时候通常都只有一页，内容少，
让我可以快速知道元素的上下关系和脉络。

之前团队在协作时，我们是采用OOCSS的做法，（类似啦！）
很多样式如.flex .button-active 等等，
都可以让团队成员快速上手、重复利用。

今天整理完这篇，之後也会更好好想命名！
有任何错误或是想法欢迎留言告诉菜逼把我！

感恩～

参考：

CSS 模块化方案探讨（BEM、OOCSS、CSS Modules、CSS-in-JS ...）
CSS规范BEM CSS和OOCSS
Exploring SMACSS: Scalable and Modular Architecture for CSS
如何使用Sass和SMACSS维护CSS
OOCSS Methodology
值得参考的css理论：OOCSS、SMACSS与BEM