CSS｜规范
一、CSS 各属性书写顺序
不知道谁提出的，但是使用感觉还不错：
- 位置相关 (position, top, right, z-index, display, float等)
- 盒子相关 (width, height, padding, margin)
- 文字相关 (font, line-height, letter-spacing, color- text-align等)
- 背景相关 (background, border等)
- 其他 (animation, transition等)
二、CSS 类命名规范
2.1 BEM
2.1.1 理解
这是我在谷歌开发者上看见的，也是他们所推崇的命名方式。BEM的命名方式，有助于渲染引擎的优化，因为 BEM 不推荐元素选择器的使用，而元素选择器通常会非常浪费性能（子代选择器更甚，涉及到 CSS 树构建过程，有兴趣的看我写的这篇文章：浏览器渲染机制）。
以下节选自一个俄罗斯的前端妹子的文章：
BEM代表块（block）、元素（element）、修饰符（modifier）。它是一种前端方法论：一种开发 Web 界面时的新思维方式。本文将详细阐述在 Yandex（俄罗斯领先的互联网公司之一）建立网站的理论和实践。
文章详细阐述了如何使用BEM规范，这里我简单的说一下我的理解：
- 块（block），可以是你网站某个独立的部分（header、footer、main、aside），一种大而独立的部分。实际上，我们编写代码的所谓组件也是满足这个属性的，编写通用组件也可以使用这个规范。
- 元素（element），构成独立部分的子模块，假设我们编写header，那么它的logo可以是一个子模块，导航nav可以是一个子模块，以此类推。
- 修饰词（modifier），是对块或者元素的外观或者行为描述，比如导航nav，有激活或者未激活两种状态，就可以对其进行修饰
2.1.2 使用例子
注意，BEM 只是一种方法论，了解其精髓即可。你要是在网络上找 BEM 的文章，可能会发现 BEM 的解释都正确，但是真正的示例都是各不相同的符号。
你可能以为 BEM 是一种标准，符号也是唯一的，其实这是错的。（好吧，这就是俺的心路历程，隔了几个月再看其他人的关于 BEM 的文章发现的）
这里我采用 BEM 的思想，随便写个示例，注意这由团队定义，定义了都必须遵守：
CSS 类名词书写规范定义：
- 第一个出现的单词必须是
块，在它的后面后面接双下划线__- 在第一个单词后，出现的
块或者元素（注意到这里我说的，块和元素他们并不是唯一的，可以同时出现多个，看你自己的使用情况）相互之间使用一个下划线_- 修饰符放最后，使用两个中连结符
--
<body>
<header class="header">
<div class="header__logo"></div>
<ul class="header__nav">
<li class="header__nav_item">导航1</li>
<li class="header__nav_item header__nav_item--active">导航2</li>
<li class="header__nav_item">导航3</li>
</ul>
</header>
</body>
可以看到结构很清晰，可是有点冗长。IE6以下貌似不支持下划线，这里注意！（可恶的IE浏览器，不过还好，现在其使用率很低了，而且2022年微软将完全抛弃IE了）
2.2 改进的BEM
再次声明，BEM 只是一种方法论，一种阐述。只要得到块、元素、修饰符这三个的精神就可以了，什么符号标记其实不重要。
团队可以依据自己的实际有选择的自己定义适合团队的 BEM 规范。
下面是几个改进的 BEM 例子：
Instagram团队使用的驼峰式:
.blockName-elementName--modifierName {
/*
关于驼峰的问题，CSS选择器 对 id、类的大小写敏感，而对标签不敏感
*/
}
块后接单下划线:
.block-name_element-name--modifierName { /* ... */ }
修饰符用单个连接符:
.blockName__elementName-modifierName { /* ... */ }
2.3 其他css前端方法论
- OOCSS，面向对象的CSS，使用CSS“对象”分隔容器和内容
- SMACSS，样式指南，用于为CSS规则编写五个类别的CSS
- SUITCSS，结构化类名和有意义的连字符
- Atomic，将风格分解为原子或不可分割的碎片
我厚着脸皮讲讲自己的CSS书写见解，根据 sass 或者 less 这些 CSS 预处理语言的出现，让 CSS 的局部封装为组件成为可能。
根据 BEM ，大可不必将 CSS 类书写的这么长，会让我们前端开发写的手累。
比如上述我的例子，在 sass 中可以采用 BEM 思想，名字使用驼峰或者连接符就可以，比如这个：
.header{ /* 块 */
.__logo{ /* 类 */
}
.__nav{
.__item{
._active{ /* 修饰 */
}
}
}
}
