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)。
<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
属性; - 避免写关闭标签注释,如
<!-- /.element -->
,大多编辑器都支持开闭标签高亮; - 不要手动设置
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;
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)
HTML编码规则、CSS属性声明顺序--简介的更多相关文章
- css属性编写顺序+mysql基本操作+html细节(个人笔记)
css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...
- Mozilla推荐的CSS属性书写顺序及命名规则
传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...
- CSS属性书写顺序及命名规则
/* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * list-style * ...
- 前端开发--css属性书写顺序
css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...
- [笔记]CSS样式声明顺序
来自Bootstrap中文网编程规范 相关的属性声明应当归为一组,并按照下面的顺序排列: Positioning Box model Typographic Visual .declaration-o ...
- Discuzx系统 CSS 编码规范,CSS属性书写顺序
1. 属性写在一行内,属性之间.属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400px; height: 300px; } 2. 属性的书写顺序: ...
- css属性书写顺序分析
我们直接从例子出发 @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?speta9'); src: url('fonts ...
- css属性书写顺序(重点)
- CSS声明顺序
CSS对元素样式进行声明,虽然一条规则中的声明可以按照任何顺序写出来,但是还是应该有个优先级的顺序. 如下的声明顺序摘抄自<CSS设计指南>,优先级顺序如下: display及相关声明 p ...
随机推荐
- 论Postgres的“已提交的而且 xmin’比当前事务的XID小的记录对当前事务才是可见的”
最近在网上看到这样一句话Postgres“已提交的而且 xmin 比当前事务的XID小的记录对当前事务才是可见的”.先不评断这句话的正确性:看下这句话的结构,因果关系: 按照此话的意思:要postgr ...
- spring环境搭建需要的插件-------Spring Tool Suite™ Downloads
下载地址http://spring.io/tools/sts/all 上面的是集成了eclipse的,所以文件比较大,下面的是单独的插件,下载之后打开eclipse,help->installN ...
- 【转】SVN的dump文件导入
转载地址:http://erniu.sz.blog.163.com/blog/static/11517292220103282813176/ 把SVN的dump文件导入SVN数据库的方法: 在SVN ...
- 读取NfcA格式数据
如何读取数据? Tag tagFromIntent = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG); NfcA nfcA = NfcA.get(ta ...
- LA 3211 飞机调度
题目链接:http://vjudge.net/contest/142615#problem/A 题意:n架飞机,每架可选择两个着落时间.安排一个着陆时间表,使得着陆间隔的最小值最大. 分析: 最小值最 ...
- VS下的解决方案目录结构设置和管理
转载:http://blog.csdn.net/pl20140910/article/details/52074165 为了方便管理自己写的代码,也为了日后工作能方便的查找之前做过相同的代码,仿照某源 ...
- len字符串的长度
#!/usr/bin/env python def fun4(x) : if len(x) > 2 : return print(x[0],x[1]) else: return 0 d = (' ...
- Pycharm使用问题# 行号设置
设置行号就很简单了,在Settings中找到Editor-Appearance,选中Show line numbers即可.
- Nbimer族助手 部分控件不能用的解决方法(转)
用户提出的问题现象: 我两天笔记本安装的都是win7 SP1系统,一台为64为一台为32位,网络环境是移动宽带通过D-Link路由器实现无线局域网,DHPC自动分配IP地址.每次打开IE或者Chrom ...
- js 原生对象排序
//对象属性排序 function compare(propertyName) { return function (object1, object2) { var value1 = object1[ ...