html css书写,web前端HTML、CSS书写规范

规范目的：

使开发流程规范化，代码简洁、美观。

文件规范：

文件名用英文单词，多个单词用驼峰命名法。

一些浏览器会将含有这些词的作为广告拦截，文件命名、ID、CLASS等所有命名避免以上词汇。

ad、ads、adv、banner、sponsor、gg、guangg、guanggao等

HTML书写规范：

为每个HTML页面的第一行添加标准模式(standard

mode)的声明，确保在每个浏览器中拥有一致的展现。

文档类型声明统一为HTML5声明类型，编码统一为UTF-8。

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

class

id 、 name

data-*

src、for、 type、 href

title、alt

aria-*、 role

编码均遵循XHTML标准,

标签、属性、属性命名由小写英文、数字和_组成，且所有标签必须闭合，属性值必须用双引号"",

避免使用中文拼音尽量简易并要求语义化。

CLASS --> nHeadTitle --> CLASS遵循小驼峰命名法(little camel-case)

ID --> n_head_title --> ID遵循名称+_

NAME --> N_Head_Title --> NAME属性命名遵循首个字母大写+_

语义化HTML。

尽可能减少

嵌套。

-HTML中对于属性的定义，确保全部使用双引号，绝不要使用单引号

CSS书写规范：

导入css样式

CSS样式新建或修改尽量遵循以下原则。

根据新建样式的适用范围分为三级：全站级、产品级、页面级。

尽量通过继承和层叠重用已有样式。

不要轻易改动全站级CSS。改动后，要经过全面测试。

CSS书写顺序。

.header {

/* 显示属性 */

display || visibility

list-style

position top || right || bottom || left

z-index

clear

float

/* 自身属性 */

width max-width || min-width

height max-height || min-height

overflow || clip

margin

padding

outline

border

background

/* 文本属性 */

color

font

text-overflow

text-align

text-indent

line-height

white-space

vertical-align

cursor

content

};

兼容多个浏览器时，将标准属性写在底部。

-moz-border-radius: 15px; /* Firefox */

-webkit-border-radius: 15px; /* Safari和Chrome */

border-radius: 15px; /* Opera 10.5+, 及使用了IE-CSS3的IE浏览器 *//标准属性

使用选择器时，命名比较短的词汇或者缩写的不允许直接定义样式。

.hd,.bd,.td{};//如这些命名

多选择器规则之间换行，即当样式针对多个选择器时每个选择器占一行。

button.btn,

input.btn,

input[type="button"] {…};

优化CSS选择器。

#header a { color: #444; };/*CSS选择器是从右边到左边进行匹配*/

避免使用低效的选择器。

body > * {…};

ul > li > a {…};

#footer > h3 {…};

ul#top_blue_nav {…};

#searbar span.submit a { … }; /* 反面示例 */

六个不要三个避免一个使用。

不要在标签上直接写样式

不要在CSS中使用expression

不要在CSS中使用@import

不要在CSS中使用!important

不要在CSS中使用“*”选择符

不要将CSS样式写为单行

避免使用filter

避免使用行内(inline)样式

避免使用“*”设置{margin: 0; padding: 0;}

使用after或overflow的方式清浮动

减少使用影响性能的属性。

position:absolute;

float:left;//如这些定位或浮动属性

借鉴和参考了各位大神的经验，为大家分享了一下HTML和CSS的书写规范，感谢各位原作者，互相学习，持续更新。