html和css的编程规范,css编写规范

代码组织

以组件为单位组织代码段，CSS 文件将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动

制定一致的注释规范，请留出时间来描述组件的工作方式、局限性和构建它们的方法。不要让其它小伙伴 来猜测一段不通用或不明显的代码的目的

用制表符(tab，4个空格),通过配置编辑器，可以提供快捷键来输出一致认可的注释模式

css注释：

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

.selector {

padding: 15px;

margin-bottom: 15px;

}

.selector-secondary {

display: block; /* 单行注释*/

}

.selector-three {

display: span;

}

声明块格式

选择器分组时，保持独立的选择器占用一行

声明块的左括号 { 前添加一个空格，声明块的右括号 } 应单独成行

声明语句中的 : 后应添加一个空格，声明语句应以分号 ; 结尾

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

rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格

对于属性值或颜色参数，不省略小于 1 的小数前面的 0 (例如，.5 ；-.5px )

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

避免为 0 值指定单位，例如，用 margin: 0; 代替 `margin: 0px```

line-height用倍数，而不是用24px

/* Not recommended */

.selector, .selector-secondary, .selector[type=text] {

padding:15px;

margin:0px 0px 15px;

background-color:rgba(0, 0, 0, 0.5);

box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF

}

/* Recommended */

.selector,

.selector-secondary,

.selector[type="text"] {

padding: 15px;

margin-bottom: 15px;

background-color: rgba(0,0,0,.5);

box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;

}

css命名

全局公用样式使用 G- 前缀(Global)，并遵循 【前缀-大类-小类】 或 【前缀-描述】 的写法：

.G-btn-a // 按钮a

.G-icon-link // 图标link

.G-fl // float:left

.G-fr // float:right

补丁样式使用 P- 前缀(patch)，遵循【前缀-模块】的写法：

.P-buyer

.P-banner

使用BEM

BEM是块(block)、元素(element)、修饰符(modifier)的缩写，利用不同的区块，功能以及样式来给元素命名。这三个部分使用__与--连接(这里用两个而不是一个是为了留下用于块儿的命名)。命名约定的模式如下：

.block{}//代表了更高级别的抽象或组件

.block__element{}//代表 block 的后代，用于形成一个完整的 block 的整体

.block--modifier{}//代表 block 的不同状态或不同版本

Class 和 ID

使用语义化、通用的命名方式

使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线，.box-video

避免选择器嵌套层级过多，尽量少于 3 级

出于性能考量，避免选择器和 Class、ID 叠加使用，如果HTML标签修改了，就要再去修改 CSS 代码，不利于后期维护

/* Not recommended */

.red {}

.box_green {}

.page .header .login #username input {}

ul#example {}

/* Recommended */

#nav {}

.box-video {}

#username input {}

#example {}

声明顺序

相关属性应为一组，推荐的样式编写顺序 ：位置/显示 -> 容器/大小 -> 排版/文本 -> 装饰

Positioning

Box model

Typographic

Visual

.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 "Helvetica Neue", sans-serif;

line-height: 1.5;

text-align: center;

/* Visual */

background-color: #f5f5f5;

color: #fff;

opacity: .8;

/* Other */

cursor: pointer;

}

由于定位(positioning)可以从正常的文档流中移除元素，并且还能覆盖盒模型(box model)相关的样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。

其他属性只是影响组件的内部(inside)或者是不影响前两组属性，因此排在后面。

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

/* Not recommended */

@import url(//www.google.com/css/maia.css);

html {

font-family: 'open sans', arial, sans-serif;

}

/* Recommended */

@import url("//www.google.com/css/maia.css");

html {

font-family: "open sans", arial, sans-serif;

}

.selector[type="text"] {`

}

媒体查询的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。

.element { ... }

.element-avatar { ... }

.element-selected { ... }

@media (max-width: 768px) {

.element { ...}

.element-avatar { ... }

.element-selected { ... }

}

避免过分嵌套

当出现多个嵌套的时候容易失去控制，应保持不超过一个嵌套

/* ✗ Avoid: 3 levels of nesting */

.image-frame {

> .description {

/* ... */

> .icon {

/* ... */

}

}

}

/* ✓ Better: 2 levels */

.image-frame {

> .description { /* ... */ }

> .description > .icon { /* ... */ }

}

不要使用 @import

与 相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。

替代办法：

使用多个 元素；

通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；

其他 CSS 文件合并工具；

链接的样式顺序：

a:link -> a:visited -> a:hover -> a:active

浏览器厂商前缀

使用 Autoprefixer 自动添加浏览器厂商前缀，编写 CSS 时不需要添加浏览器前缀，直接使用标准的 CSS 编写。

不使用第三方兼容，对齐，方便阅读

-webkit-transform: rotate(30deg); //-webkit代表苹果的Safari浏览器及谷歌内核识别码

-moz-transform: rotate(30deg); //-moz代表火狐内核识别码

-ms-transform: rotate(30deg); //-ms代表ie内核识别码

-o-transform: rotate(30deg); //-o代表欧朋【opera】内核识别码

transform: rotate(30deg); //统一标识语句