前端命名规范(2)

? ? ? ?

声明块的右括号}应单独成行； 声明语句中的:后应添加一个空格； 声明语句应以分号;结尾；

一般以逗号分隔的属性值，每个逗号后应添加一个空

格；

? rgb()、rgba()、hsl()、hsla() 或rect() 括号内的值，逗

号分隔，但逗号后不添加一个空格；

? 对于属性值或颜色参数，省略小于 1 的小数前面的

0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）；

? 十六进制值应该全部小写和尽量简写，例如，#fff代

替 #ffffff；

? 避免为 0 值指定单位

? 声明顺序 Positioning > Box model > Typographic >

Visual

? url() 、属性选择符、属性值使用双引号。

? 将媒体查询(Media query)放在尽可能相关规则的附近 ? 不要使用@import

? 链接样式顺序a:link ->a:visited ->a:hover

->a:active（LoVeHAte）

? 使用Autoprefixer自动添加浏览器前缀, 书写CSS无需添加

浏览器前缀

/*

========================================================================== 组件块

============================================================================ *//* 子组件块

============================================================================ */

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。其他属性只是影响组件的内部（inside）或者是不影响前两组属性。

.declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0;

z-index: 100; /* Box model */ display: block;

box-sizing: border-box; width: 100px; height: 100px; padding: 10px;

border: 1px solid #e5e5e5; border-radius: 3px; margin: 10px; float: right;

overflow: hidden; /* Typographic */ font: normal 13px \sans-serif;

line-height: 1.5;

text-align: center; /* Visual */ background-color: #f5f5f5; color: #fff;

opacity: .8; /* Other */ cursor: pointer; }

CSS 网页字体排版

字体 内文字体

p { font-family: \\New Roman\\

标题字体

h1, h2, h3, h4, h5, h6 { font-family: \Grande\\Neue\\\Sans GB\\sans-serif; }

字号

将内文以16px作为字号

标题h1, h2, h3, h4, h5, h6以16px作为字号基础，按同比例的递减

p { font-size: 16px; }h1 { font-size: 2em; }h2 { font-size: 1.8em; }h3 { font-size: 1.6em; }h4 { font-size: 1.4em; }h5, h6 { font-size: 1.2em; }

行高

将内文以 1.7em 作为行高

标题 h1, h2, h3, h4, h5, h6 以 1.5em 作为行高.

p { line-height: 1.7em; }h1, h2, h3, h4, h5, h6 { line-height: 1.5em; }

段落间距

p { margin-bottom: 1.7em; }h1, h2, h3, h4, h5, h6 { margin-top: .7em; margin-bottom: 0.2em; }

齐头尾

p {text-align: justify;text-justify: inter-ideographic; }

断词使中英文混排时字符间距不会被齐头尾拉的不均匀

p { word-break: break-all; }

Less

? 代码顺序 @import >变量声明>样式声明 ? @import .less不得省略, 用双引号

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库前端命名规范(2)在线全文阅读。