web前端HTML、CSS书写规范(必记)

1.规范目的:

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

2.文件规范:

  • 文件名用英文单词,多个单词用驼峰命名法。
    例如:MaginLeft...
  • 一些浏览器会将含有这些词的作为广告拦截,文件命名、ID、CLASS等所有命名避免以上词汇。
    例如:ad、ads、adv、banner、sponsor、gg、guangg、guanggao等

3.HTML书写规范:

  • 为每个HTML页面的第一行添加标准模式(standardmode)的声明,确保在每个浏览器中拥有一致的展现。
<!DOCTYPE html>

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

<meta charset="UTF-8">
> - HTML属性应当按照以下给出的顺序依次排列,来确保代码的易性。

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属性命名遵循首个字母大写+_
<div class="nHeadTitle" id="n_head_title" name="N_Head_Title"></div>

> - 语义化`HTML。`
> - 尽可能减少`<DIV>`嵌套。
`-HTML`中对于属性的定义,确保全部使用双引号,绝不要使用单引号。

## 4.CSS书写规范:
> - 导入css样式


<link rel="stylesheet" type="text/css" href="">

> - 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选择器是从右边到左边进行匹配/

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

不要在标签上直接写样式
不要在CSS中使用expression
不要在CSS中使用@import
不要在CSS中使用!important
不要在CSS中使用“”选择符
不要将CSS样式写为单行
避免使用filter
避免使用行内(inline)样式
避免使用“
”设置{margin: 0; padding: 0;}
使用after或overflow的方式清浮动

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

position:absolute;//绝对定位
float:left;//如这些定位或浮动属性

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.规范目的: 使开发流程规范化,代码简洁、美观。 2.文件规范: 文件名用英文单词,多个单词用驼峰命名法。例如:...
    刘爱琼阅读 516评论 1 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 规范目的: 使开发流程规范化,代码简洁、美观。 文件规范: 文件名用英文单词,多个单词用驼峰命名法。 一些浏览器会...
    努力为爱阅读 764评论 2 6
  • 经历了将近一个月找工作的时间,此间重复过最多的一句话便是——一职难求。终于,昨天找到了人生中的第一份正式的工作,今...
    白猫姑娘阅读 629评论 2 2
  • 今天我看了一个电影,名字叫蜘蛛侠之英雄归来,这部电影是我期待已久的,所以我看得很认真。首先是,电影中的主角蜘蛛侠的...
    又呆又萌的萌阅读 514评论 0 0