CSS - 架构
# [MaintainableCSS](https://maintainablecss.com/)
1. 原子类几乎只有比行内样式少写几个字符这一个优点，缺点倒是一堆，最好别用
2. 一味追求 “永远不要重复同样的事情两次” 会导致过度思考和过度设计，最终出现原子类
3. 用 ID 设置样式不好，ID 应该用在表单字段、hash、ARIA 等特殊用途上
4. 使用`.[-][-] {}`这种体现模块和组件的命名方式
5. 创建可复用的模块
6. 修改器用于在覆盖样式时使用，用来为元素的不同状态设置样式
7. 全局 CSS 放在单独的文件及，因为它不属于任何模块
8. 最终加载的 CSS 要限制在 31 个，因为多出来的 CSS 文件 IE9 会忽略掉，并且少的 CSS 文件可以减少网络请求
# [Code Guide by @mdo](https://codeguide.co/)
CSS 属性声明顺序：
- 首先是位置因为它跟文档流相关，并且可以覆盖盒模型的样式
- 其次是盒模型，声明组件的尺寸和放置
- 最后是组价内部的，不会影响位置和盒模型的样式
```css
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
```
# [jareware/css-architecture](https://github.com/jareware/css-architecture#5-prevent-leaking-styles-outside-the-component)
1. 用 class 不要用 ID 和元素选择器。
2. 组件和样式放在同一文件夹（好找）。
3. 一致的 class 命名`app-Component-class`。
4. 命名空间和文件名对应。
5. 防止组件内样式向外泄露：class 加上命名空间防止组件内样式泄露到外面。
6. 防止组件内样式向内泄露：用 class 不要使用元素选择器，如果想用元素选择器要加上 `>` 限定。
7. 防止外部样式进入组件：用权重比外部样式高的样式重置所有元素的样式（会导致有用的外部样式也被重置），`all: initial`，Shadow DOM，`
