CSS 样式书写规范+特殊符号

虽然我只是刚踏入web前端开发圈子。在一次次任务里头，我发觉每一次的css命名都有所不同和不知所措。脑海就诞生了一个想法——模仿大神的css命名样式。

毕竟日后工作上，是需要多个成员共同协作的。如果没有良好的命名，就会造成许多没必要的耽误和麻烦。

　　命名空间的规范：

布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。
状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。
工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix（清除浮动）、u-ellipsis（省略）。
组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider（滑动）、m-dropMenu（下拉菜单）。
钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　引用于：大神ChokCoco

　样式属性的规范：
单个样式规则下的属性在书写时，应按功能进行分组，并以 Positioning Model > Box Model > Typographic > Visual 的顺序书写，提高代码的可读性。

如果包含 content 属性，应放在最前面；
Positioning Model 布局方式、位置，相关属性包括：position / top / right / bottom / left / z-index / display / float / ...
Box Model 盒模型，相关属性包括：width / height / padding / margin / border / overflow / ...
Typographic 文本排版，相关属性包括：font / line-height / text-align / word-wrap / ...
Visual 视觉外观，相关属性包括：color / background / list-style / transform / animation / transition / ...

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　引用于：大神ChokCoco

positioning排在第一位，因为它可以使一个元素脱离正常文档流，box决定了一个组件的大小。其他属性只在内部起作用。

面向属性的命名：不要管页面什么位置，什么内容，面向属性的命名”就是针对自身属性的一种命名方式

.tr{text-align:right;}

.pb8{padding-bottom:8px;}

双标签方法&宽度分离原则

.w470{width:470px;}

.inset{padding:20px; border:1px solid #ddd;}

这样padding与border就会自适应width。Width就变成主动了。外层标签就负责宽度或者与之分离的margin属性，以提高CSS的重用性以及页面的容错与自适应能力。

“分离”思想下的命名只针对属性本身, “无分离”思想的命名是针对页面内容，所以上述改为：

.txtw1{width:470px;}

.inset1{padding:20px; border:1px solid #ddd;}

当以后发现其他部分也用到width470px，可以合并为

.txtw1,.w470{width:470px;}

要注意，只有页面要使用到与文本框独立宽度一样宽度的时候才进行分离并合并

 

精简高效CSS命名之“三无原则”

no id
no 辈分层级

no 标签

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　引用于：大神张鑫旭

还有就是附上一些常用的特殊符号

&nbsp：牛逼(nb)空格(sp - space)，容易受影响。

&ensp：恶念(e n-ian)空格占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

&emsp：恶魔(e m-o)空格占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

‹&lsaquo ›&rsaquo√&radic×&times