css

[tzcteddy]

一、命名
1.命名体系
遵循BEM命名体系，即：
　　B = Block 模块(特殊模块：Layout 布局、Common 通用)
　　E = Element 交互元素
　　M = Modifier 状态修饰符
详情可阅读 参考资料

2.命名规则
必须由小写字母、中划线“-”或数字组成；
必须用英文(俗语除外)，不使用拼音或混合使用；
必须添加前缀以明确影响范围(子孙级可不用)；
必须根据内容/功能取词，不依据表现；
尽量不使用缩写，或使用后仍可清晰表述。

二、必须
1.书写格式
选择器与大括号之间保留一个空格；
冒号之后保留一个空格；
逗号之后保留一个空格；
行末不保留任何空格；
每条规则结束需加分号；
所有规则需换行；
多组选择器之间需换行；
开始大括号需与最近选择器在同一行；
单个词语的选择器不可作为顶级选择器。

2.书写顺序
虽然规则的顺序并不影响渲染的性能，
但是统一的顺序不仅可以从代码就看到界面表现，
还能降低团队的维护成本，快速定位到代码的大概位置。

理论上顺序可以是按首字母升/降序或其它，我们选择由布局到内容的顺序：

布局类(生成内容 » 布局 » 定位)
盒子类(伸缩/多列 » 列表/表格 » 补白 » 尺寸 » 边框»背景)
内容类(颜色 » 字体 » 文本 » 文本装饰 » 书写模式)
装饰类(用户界面 » 转换 » 过渡 » 动画 » 分页媒体)
可分拆的需要按缩写顺序分拆(如：margin, padding, border, font)

.m-element {
    content: "\0020";
    overflow: hidden;
    display: block;
    clear: both;
    position: relative;
    z-index: 2;
    top: 10px;
    left: 10px;
    flex: 1;
    list-style: circle;
    table-layout: fixed;
    padding-top: 0;
    padding-right: 0;
    width: 100px;
    border-width: 1px;
    border-style: solid;
    border-color: #f00;
    background-color: rgba(0, 0, 0, .5);
    background-image: url(/image/common/blank.png);
    color: #f90;
    font: bold 14px/1.5 "Microsoft yahei", "Hiragino sans gb", Arial, sans-serif;
    text-align: center;
    letter-spacing: 5px;
    outline: none;
    cursor: pointer;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}

3.有效规则
已继承自父级的不要重复书写；
已包含特性的不要同时使用；
已覆盖的规则必须删除；
无规则的必须删除；
未使用的必须删除。

禁止

.m-detail {
    margin-top: 10px;
    width: 100px;
    display: block;
    position: absolute;
    font: bold 12px/1.5 Arial, sans-serif;
    margin: 15px;
}
.m-detail .info {
    font: normal 14px/1.5 Arial, sans-serif;
}
.m-test {}
.m-unused {
    color: red;
}

必须

.m-detail {
    position: absolute;
    width: 100px;
    margin: 15px;
    font: bold 12px/1.5 Arial, sans-serif;
}
.m-detail .info {
    font-weight: normal;
    font-size: 14px;
}

4.缩写/分拆
无继承时使用缩写；
存在继承时使用分拆；
根据规则数量选择。

5.魔术数值
模块尺寸(组合/剩余)需解释；
百分比基准(如：图片比率)需解释；
etc.

.m-detail {
    /* 侧栏120 + 正文330 */
    width: 450px;
    /* 屏幕高 - 顶部栏高 */
    height: calc(100% - 46px);
}
.m-avatar {
    overflow: hidden;
    width: 100%;
    height: 0;
    /* 尺寸基准(宽x高) 60x36 */
    padding-bottom: 60%;
}

5.图像资源
所有图片需要经过一定的压缩/优化才能发布：

纯色或色彩不太丰富的可使用PNG8格式；
色彩较丰富的设计色图片可使用PNG24格式；
描述现实或组合现实照片的可使用JPG格式，并压缩85%左右的品质；
不推荐使用base64资源；
推荐使用sprite技术。

6.层级&hack
推荐

$z-index: (
    // {Number} 下拉菜单层级范围50-100
    dropdown: 50,
    // {Number} 遮罩层级
    mask:     1000,
    // {Number} 弹窗层级范围1001-2000
    dialog:   1001,
    // {Number} 浮层层级范围2001-2500
    popup:    2001,
    // {Number} 浮层层级范围2501-3000
    search:   2501,
    // {Number} 浮层层级范围3001-4000
    tip:      3001,
    // {Number} loading层级
    loading:  9999
) !default;

不推荐
```css
.f-hack {
    color: #000;      /* For all */
    color: #111\9;    /* For all IE */
    color: #222\0;    /* For IE8 and later, Opera without Webkit */
    color: #333\9\0;  /* For IE8 and later */
    color: #444\0/;   /* For IE8 and later */
    *color: #666;     /* For IE7 and earlier */
    _color: #777;     /* For IE6 and earlier */
}

https://blog.csdn.net/qq_37943295/article/details/79964203