Question

开发过程最耗时的是什么？其实是命名。。。

每个团队都应该拥有一套开发规范，其中应该也包含了命名规范。对于CSS而言，命名的组织方式又有多种，下面我们一起看看。

遵守的原则

首先是命名要讲究简单而不失语义化，其次要时刻思考复用性，选择器的性能等。

语义化命名

这是较为传统的方式，就是div是干什么的，就起什么名字。这种方式好处是清晰明了，但是缺点是和HTML元素高度耦合。不利于大型项目的复用，比如起名都是按照组件的位置而定的情况。

书写顺序

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等)

OOCSS

一种撰写 CSS 的设计模式，或者可以说是一种「道德规范」，大致上我觉得重点只有两个：

• 减少对 HTML 结构的依赖
• 增加 CSS class 重复性的使用

就是将原先的样式进行提纯，使用class封装，通过增加class增加复用性。Bootstrap使用的也是这种方式。

MSACSS

BEM

MVCSS

参考资料

• CSS样式名中的下划线与连字符
• 推荐大家使用的CSS书写规范、顺序
• 精简高效的CSS命名准则/方法
• CSS命名神马的真心难
• div+css命名方式
• NEC: css命名方式
• BEM —— 源自Yandex的CSS 命名方法论
• BEM
• CSS设计模式：OOCSS 和 SMACSS
• OOCSS——概念篇
• MVCSS中文文件