HTML编码规则、CSS属性声明顺序--简介

From AmazeUI:http://amazeui.org/getting-started/html-css-guide

HTML 属性顺序

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

Class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，排在第二位。

布尔值属性

HTML5 规范中 disabled、checked、selected 等属性不用设置值（via）。

Copy

<input type="text" disabled>

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

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

如果非要赋值，不要使用 true、false，值必须是空字符串或属性的规范名称，且不要在末尾添加空格。

其他细节

使用 <ul>、<ol>、<dl> 组织列表，不要使用一堆 <div> 或者 <p>；
每个包含附加文字的表单输入框都应该利用 <label> 标签，特别是 radio、checkbox元素；
使用 <label> 标签包裹 radio / checkbox，不需要设置 for 属性；
避免写关闭标签注释，如 ，大多编辑器都支持开闭标签高亮；
不要手动设置 tabindex，浏览器会自动设置顺序。

CSS属性声明顺序

推荐的样式编写顺序：

Positioning
Box model
Typographic
Visual

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

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

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

  /* Box-model */
  display: block;
  float: right;
   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;
}

链接的样式请严格按照如下顺序添加：

a:link -> a:visited -> a:hover -> a:active（LoVeHAte）

HTML编码规则、CSS属性声明顺序--简介

HTML 属性顺序

布尔值属性

其他细节

相关推荐