天津web前端培训,4个前端规范汇总版

一:前端普适性规范
黄金定律:永远遵循同一套编码规范,不管有多少人参与同一个项目,一定要保证每一行编码都像同一个人写的。
项目名称:项目命名全部采用小写方式,以中划线分割,例如:my-project-name。
文件命名:文件命名参照上一条规则,多个单词组成时,采用中划线连接方式,比如说: error-report。有复数结构时,要采用复数命名法,比如说: scripts, styles, images, data-models。文件名中只可由小写英文字母a~z、排序数字0~9或间隔符-组成,禁止包含特殊符号,不允许命名带有广告等英文的单词,如ad,adv,advertising,防止该模块被浏览器当成垃圾广告过滤掉。
二:HTML规范
语法:使用四个空格的缩进,这是保证代码在各种环境下显示一致的唯一方式。在属性上,使用双引号,不要使用单引号。不要在自动闭合标签结尾处使用斜线, 不要忽略可选的关闭标签。
HTML5 doctype:在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式,使其每个浏览器中尽可能一致的展现。虽然doctype不区分大小写,但是按照惯例,doctype大写。
字符编码:通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是,可以避免在 HTML 中使用字符实体标记,从而全部与文档编码一致(一般采用 UTF-8 编码)。
IE兼容模式: IE 支持通过特定的标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。
实用高于完美:尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
三:CSS规范
语法:
1.使用四个空格的缩进,这是保证代码在各种环境下显示一致的唯一方式。
2.使用组合选择器时,保持每个独立的选择器占用一行。
3.为了代码的易读性,在每个声明的左括号前增加一个空格。
4.声明块的右括号应该另起一行。每条声明 : 后应该插入一个空格。
5.每条声明应该只占用一行来保证错误报告更加准确。
6.所有声明应该以分号结尾。
7.虽然最后一条声明后的分号是可选的,但是如果没有他,的代码会更容易出错。
8.逗号分隔的取值,都应该在逗号之后增加一个空格。

媒体查询位置:尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中,或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。
代码注释:代码是由人来编写和维护的。保证你的代码是描述性的,包含好的注释,并且容易被他人理解。好的代码注释传达上下文和目标。不要简单地重申组件或者 class 名称。
代码组织:以组件为单位组织代码。制定一个一致的注释层级结构。使用一致的空白来分割代码块,这样做在查看大的文档时更有优势。当使用多个 CSS 文件时,通过组件而不是页面来区分他们。页面会被重新排列,而组件移动就可以了
四:JS规范
语法:使用四个空格的缩进,这是保证代码在各种环境下显示一致的唯一方式。
空行:方法之间加、单行或多行注释前加、逻辑块之间加空行增加可读性
单行注释:双斜线后,必须跟注释内容保留一个空格与下一行代码缩进保持一致可位于一个代码行的末尾,双斜线距离分号四个空格。
多行注释格式:最少三行,前边留空一行。
括号对齐:标准示例 括号前后有空格,花括号起始不另换行,结尾新起一行
花括号必须要,即使内容只有一行涉及 if、 for、 while 、do...while的地方都必须使用花括号,即使内容只有一行。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复