HTML和CSS编码规范内容

一、HTML规范：

1.代码规范

页面的第一行添加标准模式声明 <!DOCTYPE html>
代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）
html中除了开头的DOC和 'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写
建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言 lang="zh-CN"
不同doctype在不同浏览器下会触发不同的渲染模式 <meta http-equiv="X-UA-Compatible" content="IE=Edge">

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

      <meta charset="UTF-8">

      <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  </head>

  ....

</html>

不要使用@import
- 与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：
  - 使用多个 <link> 元素
  - 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
  - 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

<!-- Use link elements -->

<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->

<style>

  @import url("more.css");

</style>

引入 CSS 和 JavaScript 文件

根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值

<!-- External CSS -->

<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->

<style>

 /* ... */

</style>

<!-- JavaScript -->

<script src="code-guide.js"></script>

2.注释

<!--注释内容--!>
注意：--后不要留空格，若留空格，其他注释全加空格（方便后续程序开发）换句话说，注释要全局统一

eg:
<!-- Better --!>
<!--S 注释内容--!>
为书写规范，最好每一个需要注释都需要开头和结尾，减少后续麻烦和错误。不要换行。CSS、JS注释亦然。 <!--E 注释内容--!>

<!-- No so great --!>
<!--
S 注释内容
--!>
为书写规范，最好每一个需要注释都需要开头和结尾，减少后续麻烦和错误。不要换行。CSS、JS注释亦然。 <!--
E 注释内容--
!>

3.命名规范

class用 “-” ；ID用 “_” ；name:data-自定义名；
根据内容书写语义化编码：可用以项目名简写开头-语义化名称

eg: class="tb-head"; id="tb_head"; data-head="tb-head";

4.属性排序

（方便后台程序员整理代码)

1、根据属性定义排序 : class,id,name排序（建议用此方法）
(class用于标识高度可复用组件，因此排首位，id用于标识具体组件，慎用，因此排第二位)
- class [强制]class用中划线 ' - ' 区分
- id, name [强制]ID用下划线 ' _ ' 区分
- data-*
- src, for, type, href
- title, alt
- aria-*, role

eg:

 <a class="..." id="..." data-modal="toggle" href="#">

    Example link

</a>

<input class="form-control" type="text">

<img src="..." alt="...">

2、特殊属性可根据元素跟随排序，后根据（1）方法排序

eg:

<a href="#" class="..." id="..."</a>

    Example link

</a>

<input type="text" class="...">

3、根据字母开头顺序排序

eg:

<a class="bfl-head" data-head="bfl-head" href="javascript:;" id="bfl_head"></a>

根据自己理解排序。

5.减少标签量

<!-- Not so great -->

<span class="avatar">

  <img src="...">

</span>

<!-- Better -->

<img class="avatar" src="...">

6.布尔型属性

布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。换句话说，不用赋值。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>

 <option value="1" selected>1</option>

</select>

二、css规范

1、语法

1.1、缩进

[强制]使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。

1.2、空格

[强制]为了代码易读性，每个声明块的左花括号前添加一个空格
[强制]每条声明语句的" : "后应该插一个空格
[强制]属性多值每个逗号后应该插入空格 eg:box-shadow,border-image
[强制]不要在rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代,替 -0.5px）

1.3、选择器

[强制]为选择器分组时，将单独的选择器单独存放在一行 eg:tr,td{}
[强制] >、+、~ 选择器的两边各保留一个空格。
[强制]为选择器中的属性添加双引号不允许单引号
例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
[强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。

[建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
eg:

/* good */

#error,

.danger-message {

   font-color: #c00;

}

#username input {}

.comment .avatar {}

/* bad */

dialog#error,

p.danger-message {

   font-color: #c00;

}

.page .header .login #username input {}

.comment div * {}

1.4、行

[强制]每行不得超过 120 个字符，除非单行不可分割。
[强制]声明块右花括号应当成行
[建议] 对于超长的样式，在样式值的空格处或 , 后换行，建议按逻辑分组。
eg:background:url(....) 此处应有换行 no-repeat;

1.5、属性

[强制] 属性定义必须另起一行。
[强制] 属性定义后必须以分号结尾。
- 即每条声明应单独成行，以分号结尾
[建议] 在可以使用缩写的情况下，尽量使用属性缩写。
eg:font: 12px/1.5 arial, sans-serif;

1.6、前缀

[强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。
[建议] 可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。

1.7、简写

十六进制值应该全部小写,尽可能简写 eg:#fff
.避免为 0 值指定单位
例如，用 margin: 0; 代替 margin: 0px;

/* Bad CSS */

main>nav {

   padding: 10px;

}

.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

}

.selector, .selector-secondary, .selector[type=text] {padding:15px;margin:0px 0px 15px;}

/* Good CSS */

main > nav {

   padding: 10px;

}

.selector,

.selector-secondary,

.selector[type="text"] {

   padding: 15px;

   margin-bottom: 15px;

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

   background:

     transparent url(aVeryVeryVeryLongUrlIsPlacedHere)

       no-repeat 0 0;

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

}

2.注释

/* 注释内容 */
注意：*后不要留空格，若留空格，其他注释全加空格（方便后续程序开发）换句话说，注释要全局统一

eg: /* S 注释内容 */

为书写规范，最好每一个需要注释都需要开头和结尾，减少后续麻烦和错误。不要翻行。CSS、JS注释亦然。

/* E 注释内容 */

3.命名规范

1.应用英文缩写命名法，杜绝用中文拼音或者中文拼音缩写（这是因为英文具有简易性，必要时可上网搜索国际缩写英文）
2. 只能出现小写字符或者中划线（破折号符），不用下划线，驼峰命名法。
eg: .btn 或者 .btn-danger
3.避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思
4.class 名称应当尽可能短，并且意义明确。
使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
基于最近的父 class 或基本（base） class 作为新 class 的前缀。
使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。

/* Bad example */

.t { ... }

.red { ... }

.header { ... }

/* Good example */

.tweet { ... }

.important { ... }

.tweet-header { ... }

4.选择器

对于通用元素使用 class ，这样利于渲染性能的优化。
对于经常出现的组件，避免使用属性选择器（例如，[class^{="..."]）。浏览器的性能会受到这些因素的影响。}
选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

/* Bad example */

span { ... }

.page-container #stream .stream-item .tweet .tweet-header .username { ... }

.avatar { ... }

/* Good example */

.avatar { ... }

.tweet-header .username { ... } //不要超过3个

.tweet .avatar { ... }

5.声明顺序

5.1. 相关的属性声明应当归为一组，并按照下面的顺序排列：

* Positioning

* Box model

* Typographic

* Visual

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

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

.declaration-order {

  /* Positioning */

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 100;

  /* Box-model */  display: block;

  float: right;

  width: 100px;

  height: 100px;

  /* Typography */

  font: normal 13px "Helvetica Neue", sans-serif;

  line-height: 1.5;

  color: #333;

  text-align: center;

  /* Visual */

  background-color: #f5f5f5;

  border: 1px solid #e5e5e5;

  border-radius: 3px;

  /* Misc */

  opacity: 1;

}

5.2.设置盒子模型 - 是否脱离标准（子絶父相）- 其他属性

注意兼容性写法（纯属个人习惯）

盒子模型
- 1.设置是否需要浮动元素或者转块(float,display)
- 2.设置盒子边框、背景颜色、字体颜色（border,background，font,color）
- 3.设置宽高大小（width,height）
- 4.文字垂直居中（line-hight,text-align,vertical-align等等）
- 5.设置margin、padding值
标准流（子絶父相）
- position ：relative、absolute、static、fixed
- left/top/right/bottom
- z-index
其他属性
- opcaity、cursor等
css3新属性
- transition、transform、animation等

每个范围可由首字母开头为排序：
eg:盒子模型中的第2条中，可由background,border,color等首字母为先排序; 但有些例外，如position肯定排先，后定义left等方向位属性

ps:需要用到媒体查询，将媒体查询放在尽可能相关规则的附近

eg:

.declaration-order {

  display: block;

  float: right;

  background-color: #f5f5f5;

  border: 1px solid #e5e5e5;

  border-radius: 3px;

  color: #333;

  font: normal 13px "Helvetica Neue", sans-serif;  

  width: 100px;

  height: 100px;

  text-align: center;

  line-height: 100px;

  margin: 0 auto;

  padding: 10px 0;  

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 100;

  opacity: 1;

  transtion: all .5s ease 0s;

  animation: name initial 2s;

}

@keyframes name{

    0%{}

    100{}

    ///

    from{}

    to{}

}

@media screen and (min-width) and (max-width){

    and左右之间要留空格

}

5.3.按照首字母排列顺序编写

注意事项：

1. 尽量不使用 !important 声明。

[建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。

2.媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

3.带前缀的属性

当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。

在 Textmate 中，使用 Text → Edit Each Line in Selection (⌃⌘A)。在 Sublime Text 2 中，使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。

Prefixed properties */ lector { webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15);

4.单行规则声明

对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行 (能仔细分析，检测错误)

5.简写形式的属性声明

在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：
- padding
- margin
- font
- background
- border
- border-radius

/* Bad example */

.element {

  margin: 0 0 10px;

  background: red;

  background: url("image.jpg");

  border-radius: 3px 3px 0 0;

}

/* Good example */

.element {

  margin-bottom: 10px;

  background-color: red;

  background-image: url("image.jpg");

  border-top-left-radius: 3px;

  border-top-right-radius: 3px;

}

6.Less 和 Sass 中的嵌套

避免非必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。

// Without nesting

.table > thead > tr > th { … }

.table > thead > tr > td { … }

// With nesting

.table > thead > tr {

  > th { … }

  > td { … }

}

了解更多请点击，本文更多参照此文章

常用的命名规则

class的命名

用中划线 ' - '

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体佈局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签：tags

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guide

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

Id的命名:

用下划线 ' _ '

1)页面结构

容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center

(2)导航

导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary

(3)功能

标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：register 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标籤页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright

CSS样式表文件命名

主要的 master.css

模块 module.css

基本共用 base.css

布局、版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

文件命名规则

项目命名全部采用小写方式，以下划线分隔例：my_project_name 目录命名

参照项目命名规则；

有复数结构时，要采用复数命名法。

例：scripts, styles, images, data_models JS文件命名

参照项目命名规则。

例：account_model.js CSS, SCSS文件命名

参照项目命名规则。

例：retina_sprites.scss HTML文件命名

参照项目命名规则。

例：error_report.html

html和css的编码规范的更多相关文章

HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范一.HTML编码规范 1. img标签要写alt属性根据W3C标准,img标签 ...
前端编码规范之JavaScript
上次浅谈了下关于CSS的编码规范,大部分童鞋持赞同意见,仍存在一些童鞋不太理解这些规范的意义. 如果是个人或者小作坊开发,其实这些所谓的编码规范也没啥意思,因为大家写好的代码直接就给扔到网上去了,很少 ...
前端编码规范之CSS
"字是门面书是屋",我们不会去手写代码,但是敲出来的代码要好看.有条理,这还必须得有一点约束~ 团队开发中,每个人的编码风格都不尽相同,有时候可能存在很大的差异,为了便于压缩组件对 ...
总结-css编码规范
一.注释统一采用 :/* 注释内容 */ 二.命名 1.常用命名(多查单词) 参考命名规范.doc 2.选择器 1> [建议] 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确 ...
前端编码规范（4）—— CSS 和 Sass (SCSS) 规范
CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...
css编码规范
css编码规范 https://segmentfault.com/a/1190000002460968 常用样式测试工具 W3C CSS validator:http://jigsaw.w3.org/ ...
前端HTML与CSS编码规范
HTML 语法 HTML5 doctype 语言属性(Language attribute) 字符编码 IE 兼容模式引入 CSS 和 JavaScript 文件实用为王属性顺序布尔(bool ...
Google HTML/CSS 编码规范
Google HTML/CSS 规范本文介绍了 Google 推荐的 HTML 和 CSS 编写格式规范,以建立良好的个人编码习惯. 1.通用样式规范省略图片.样式.脚本以及其他媒体文件 URL ...
HTML编码规范、CSS编码规范
HTML编码规范 IE 兼容模式 IE 支持通过特定的标签来确定绘制当前页面所应该采用的 IE 版本.除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的 ...

随机推荐

【WP开发】如何处理溢出的文本
本文内容适用于Runtime App框架在用户界面上显示文本,用得严重多的是TextBlock,凡是轻量级的东西都会很常用,TextBlock对于显示简单.少量的文本内容相当适合,不过,在我们考虑要 ...
深入理解PHP内核(八)变量及数据类型-预定义变量
原文链接:http://www.orlion.ga/249/ PHP脚本在执行的时候用户全局变量(在用户空间显示定义的变量)会保存在一个HashTable数据类型的符号表中(symbol_table) ...
javascript运算符——算术运算符
× 目录 [1]一元加 [2]一元减 [3]递增[4]递减[5]加法[6]减法[7]乘法[8]除法[9]求余前面的话 javascript中的算术操作主要通过算术运算符来实现,本文将介绍算术运算符的 ...
java二维数组的常见初始化
public class Test{ public static void main(String[] args){ //第一种: //int[][] arr1 = new int[][]{{1,2} ...
Python编码问题整理
认识常见编码 GB2312是中国规定的汉字编码,也可以说是简体中文的字符集编码 GBK 是 GB2312的扩展 ,除了兼容GB2312外,它还能显示繁体中文,还有日文的假名 cp936:中文本地系统是 ...
[Python] py2exe先知其然
#Hello.py import Tkinter root=Tkinter.Tk() label=Tkinter.Label(root,text="Hello,py2exe!") ...
Azure China (3) 使用Visual Studio 2013证书发布Cloud Service至Azure China
<Windows Azure Platform 系列文章目录> 之前有很多网友询问我如何通过VS发布Cloud Service至Azure China,这里我专门写篇文章,给大家详细介绍下 ...
Python语言特性之4：类变量和实例变量
类变量就是供类使用的变量,实例变量就是供实例使用的.如下面的代码: class Person: name = "Tacey" p1 = Person() p2 = Person() ...
新学C#的List<T>总结
所属命名空间:using System.Collections.Generic; List<T>类是 ArrayList 类的泛型等效类. 该类使用大小可按需动态增加的数组实现 IList ...
【iOS】关联属性存取数据
有时候我们需要在现有的类存放一些额外的信息,通常的做法是继承一个子类,然后定义新增加的属性,然而如果我们为每个需要的类都添加一个类显得太麻烦了,objc提供了一个关联属性的特性,可以给一个对象关联一个 ...

html和css的编码规范

HTML和CSS编码规范内容

一、HTML规范

二、CSS规范

三、注意事项：

四、常用的命名规则

五、CSS样式表文件命名

六、文件命名规则

一、HTML规范：

1.代码规范

引入 CSS 和 JavaScript 文件

2.注释

3.命名规范

4.属性排序

5.减少标签量

6.布尔型属性

二、css规范

1、语法

1.1、缩进

1.2、空格

1.3、选择器

1.4、行

1.5、属性

1.6、前缀

1.7、简写

2.注释

3.命名规范

4.选择器

5.声明顺序

5.1. 相关的属性声明应当归为一组，并按照下面的顺序排列：

5.2.设置盒子模型 - 是否脱离标准（子絶父相）- 其他属性

5.3.按照首字母排列顺序编写

注意事项：

1. 尽量不使用 !important 声明。

2.媒体查询（Media query）的位置

3.带前缀的属性

4.单行规则声明

5.简写形式的属性声明

6.Less 和 Sass 中的嵌套

常用的命名规则

class的命名

用中划线 ' - '

Id的命名:

用下划线 ' _ '

CSS样式表文件命名

文件命名规则

html和css的编码规范的更多相关文章

随机推荐

热门专题