css格式规范整理
<h2 style="color: black; text-align: left; margin-bottom: 10px;">命名空间规范</h2>布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。状态：以 s 为命名空间，<span style="color: black;">暗示</span>动态的、<span style="color: black;">拥有</span>交互性质的状态，例如：.s-current、s-selected。<span style="color: black;">工具</span>：以 u 为命名空间，<span style="color: black;">暗示</span>不耦合业务<span style="color: black;">规律</span>的、可复用的的<span style="color: black;">工具</span>，例如：u-clearfix、u-ellipsis。组件：以 m 为命名空间，<span style="color: black;">暗示</span>可复用、移植的组件模块，例如：m-slider、m-dropMenu。钩子：以 j 为命名空间，<span style="color: black;">暗示</span>特定给 JavaScript 调用的类名，例如：j-request、j-open。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（1）不<span style="color: black;">意见</span><span style="color: black;">运用</span>下划线 _ 进行连接</p>节省操作，输入的时候少按一个 shift 键能良好区分 JavaScript 变量命名<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）字符小写</p>定义的<span style="color: black;">选取</span>器名，属性及属性值的书写皆为小写。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（3）<span style="color: black;">选取</span>器</p>当一个规则<span style="color: black;">包括</span>多个<span style="color: black;">选取</span>器时，<span style="color: black;">每一个</span><span style="color: black;">选取</span>器<span style="color: black;">独霸</span>一行。、+、~、> <span style="color: black;">选取</span>器的两边各<span style="color: black;">保存</span>一个空格。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.g-header > .g-header-des,</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.g-content ~ .g-footer{}</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（4）命名短且语义化良好</p><span style="color: black;">针对</span><span style="color: black;">选取</span>器的命名，<span style="color: black;">尽可能</span>简洁且<span style="color: black;">拥有</span>语义化，<span style="color: black;">不该</span>该<span style="color: black;">显现</span> g-abc 这种语义模糊的命名。<h2 style="color: black; text-align: left; margin-bottom: 10px;">规则声明块</h2>当规则声明块中有多个样式声明时，每条样式<span style="color: black;">独霸</span>一行。在规则声明块的左大括号 { 前加一个空格。在样式属性的冒号 : 后面加上一个空格，前面不加空格。在每条样式后面都以分号 ; 结尾。规则声明块的右大括号 } <span style="color: black;">独霸</span>一行。<span style="color: black;">每一个</span>规则声明间用空行分隔。所有最外层引号<span style="color: black;">运用</span>单引号 ‘ 。当一个属性有多个属性值时，以逗号 , 分隔属性值，<span style="color: black;">每一个</span>逗号后添加一个空格，当单个属性值过长时，<span style="color: black;">每一个</span>属性值<span style="color: black;">独霸</span>一行。<h2 style="color: black; text-align: left; margin-bottom: 10px;">数值与单位</h2>当属性值或颜色参数为 0 – 1 之间的数时，可省略小数点前的 0 。当长度值为 0 时省略单位。十六进制的颜色属性值<span style="color: black;">运用</span>小写和<span style="color: black;">尽可能</span>简写。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例：</p>color: rgba(255, 255, 255, 0.5)color: rgba(255, 255, 255, .5);margin: 0px auto；margin: 0 auto；color: #ffcc00；color: #fc0；<h2 style="color: black; text-align: left; margin-bottom: 10px;">样式属性<span style="color: black;">次序</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">单个样式规则下的属性在书写时，应按功能进行分组，并以 Positioning Model > Box Model > Typographic > Visual 的<span style="color: black;">次序</span>书写，<span style="color: black;">加强</span>代码的可读性。</p><span style="color: black;">倘若</span><span style="color: black;">包括</span> content 属性，应放在最前面；Positioning Model 布局方式、位置，<span style="color: black;">关联</span>属性<span style="color: black;">包含</span>：position / top / right / bottom / left / z-index / display / float / …Box Model 盒模型，<span style="color: black;">关联</span>属性<span style="color: black;">包含</span>：width / height / padding / margin / border / overflow / …Typographic 文本排版，<span style="color: black;">关联</span>属性<span style="color: black;">包含</span>：font / line-height / text-align / word-wrap / …Visual 视觉外观，<span style="color: black;">关联</span>属性<span style="color: black;">包含</span>：color / bac<span style="color: black;">公斤</span>round / list-style / transform / animation / transition / …<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Positioning 处在<span style="color: black;">第1</span>位，<span style="color: black;">由于</span>他<span style="color: black;">能够</span>使一个元素脱离正常文本流，并且覆盖盒模型<span style="color: black;">关联</span>的样式。盒模型紧跟其后，<span style="color: black;">由于</span>他决定了一个组件的<span style="color: black;">体积</span>和位置。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其他属性<span style="color: black;">仅在</span>组件内部起<span style="color: black;">功效</span><span style="color: black;">或</span>不会对前面两种<span style="color: black;">状况</span>的结果产生影响，<span style="color: black;">因此</span><span style="color: black;">她们</span>排在后面。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">--------------<span style="color: black;">连续</span>更新--------------</p>
页:
[1]