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

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

HTML 属性顺序

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

  • class
  • idname
  • data-*
  • srcfortypehref
  • titlealt
  • aria-*role

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

布尔值属性

HTML5 规范中 disabledcheckedselected 等属性不用设置值(via)。

 Copy
<input type="text" disabled>

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

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

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

其他细节

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

CSS属性声明顺序

推荐的样式编写顺序:

  1. Positioning
  2. Box model
  3. Typographic
  4. 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;
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;
}

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

a:link -> a:visited -> a:hover -> a:active(LoVeHAte)

上一篇:linux文件权限多一个+啥意思


下一篇:unity 实现物体破碎效果的一些方法 - 细雨淅淅