如何看待 CSS 中 BEM 的命名方式

其实自己写网站的话，css命名根据自己的习惯来就好，没什么太大的限制。

但是在团队合作中，项目需要共同维护的时候，css的命名就应该遵循项目在一开始所指定的命名规范去书写，而这个规范每一个团队可能还不一样，所以对于css 的命名还是不要太纠结的比较好。

但是话说回来，如果你有个很好css命名习惯的话，对于你后期重新审视自己的项目是有好处的。

凡事都有两面性所以，决定权在你的手里

一、Css书写顺序：

1.位置属性(position, top, right, z-index, display, float等)　

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)　

4.背景(background, border等)

5.其他(animation, transition等)

二、Css语法：

命名一般为小写英文字母。

为了代码的易读性，在每个声明块的左花括号前添加一个空格。

每条声明语句的 : 后应该插入一个空格。

所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。

十六进制值应该全部小写，例如，#fff。

尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

避免为 0 值指定单位，例如，用 margin: 0 代替 margin: 0px。

Css常用的一些命名：

可参考：CSS 常用命名 - 彼岸时光 - 博客园。

三、Css的引入：

Css的引入一般有两种，link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。

四、Css的命名规范(BEM,OOCSS)：

什么是BEM：BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。

命名约定如下：

.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。

.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。

.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。

优点：

BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。

缺点：

这样类名过于长，且复杂。

什么是OOCSS（面向对象CSS）：

OOCSS 表示的是面向对象 CSS（Object Oriented CSS），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。 OOCSS最关键的一点就是：提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类，从而扩展基础组件的CSS规则，从而使CSS有更好的扩展性。

OOCSS的优点：

减少CSS代码。

具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系。

语义标记，有助于SEO。

更好的页面优化，更快的加载时间（因为有很多组件重用）。

可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件。

能轻松构造新的页面布局，或制作新的页面风格。

OOCSS的缺点：

OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。

  欢迎到优就业来了解

由于CSS的规则是全局性的，添加任何一个样式，在全局都有效，优点是方便复用，缺点是会根据 权重的计算 造成样式冲突,非常难以管理。

有了钉子，自然就会有锤子。随着前端的发展出现了各种CSS模块解决方案，主要分两种：

一类是采用JS或者JSON 的方式写CSS，比如 jsxstyle , react-style ，虽然可以采用JS成熟方案来管理css, 但是它无法使用postcss ,sass等css预处理器，并且衍生了大批的api, 使用的代价较大。

另一类还是采用css 来写样式, 不过是通过工具生成CSS作用域的方式实现模块化，比如CSS module。常用的BEM命名技巧或者团队中约定的方案来实现命名空间从而实现模块化，不过约定总会出现问题，于是就出现了通过工具，比如webpack的css-loader根据算法，实现css 模块化。

webpack 内置的 css-loader 自带了CSS modoule, 配置如下:

create-react-app 2.0以上的版本中内置启动了CSS module, 如果需要特殊配置，则需要eject操作, 在webpack.config.js 中:

CSS module 默认采用局部样式，即给每个css 名添加上了“:local”, 对应的全局性的写法：

compose 组合样式：

对于样式复用，CSS module提供了唯一的方式 "compose":

多CSS class 的写法：

Sass 变量与JS共享

Css module 作者建议：

1.不使用选择器，只使用 class 名来定义样式

2.不层叠多个 class，只使用一个 class 把所有样式定义好

3.不嵌套

4.使用 composes 组合来实现复用

采用 classnames 来增强CSS module 在react 中的使用，类似Angular 中的样式指令：

参考链接： https://zhuanlan.zhihu.com/p/20495964

---