前端开发书写规范

CSS书写规范

1. 使用规范的命名：使用有意义的类名和ID，使用小写字母和短横线"-"连接单词，尽量不缩写，除非一看就明白的单词。

.my-class {} #my-id {}

1. 使用缩进和换行：使用2或4个空格进行缩进，而不是制表符。并在选择器之间、属性之间和每个规则之后添加换行。

.my-class { font-size: 11px; } .my-box { font-size: 12px; }

1. 书写顺序：按照一定的顺序来书写CSS可以提高代码的可读性。一般的顺序如下：

• • 位置属性 (position, top, right, z-index, display, float等)
  • 大小 (width, height, padding, margin)
  • 文字系列 (font, line-height, letter-spacing, color- text-align等)
  • 背景 (background, border等)
  • 其他 (animation, transition等)

1. 避免使用全局选择器，尽量使用具体的选择器来限定样式的影响范围。尽量避免使用全局选择器（如 *），因为它们会增加样式的复杂性和难以维护性。 * {}

1. 避免使用!important：尽量避免使用!important，除非某些特殊情况下需要覆盖其他样式。

.my-class { font-size: 20px !important; }

1. 使用简写属性：使用CSS的简写属性可以减少代码量并提高可读性（例如，使用 margin替代 margin-top、 margin-right等）。

.my-class { margin: 10px 20px 30px 20px; }

1. 单位一致性：使用相对单位（如em、rem）来保持网页的相对一致性，避免使用绝对单位（如px）。
2. 使用CSS预处理器：使用Sass、Less等CSS预处理器来简化CSS的编写和维护。
3. 注释：对于关键的代码块或特殊规则，请使用注释进行解释和说明，以方便他人理解和维护。
4. 媒体查询：将媒体查询放在与其相关的样式块之后，并使用适当的缩进和注释来提高可读性。
5. 选择器的嵌套：避免选择器的过度嵌套，以免增加样式的特殊性和影响性能。

CSS命名规则

• 头：header
• 内容：content/containe
• 尾：footer
• 导航：nav
• 侧栏：sidebar
• 栏目：column
• 页面外围控制整体布局宽度：wrapper
• 左右中：left right center
• 登录条：loginbar
• 标志：logo
• 广告：banner
• 页面主体：main
• 热点：hot
• 新闻：news
• 下载：download
• 子导航：subnav
• 菜单：menu
• 子菜单：submenu
• 搜索：search
• 友情链接：friendlink
• 页脚：footer
• 版权：copyright
• 滚动：scroll
• 内容：content
• 标签页：tab
• 文章列表：list
• 提示信息：msg
• 小技巧：tips
• 栏目标题：title
• 加入：joinus
• 指南：guild
• 服务：service
• 注册：regsiter
• 状态：status
• 投票：vote
• 合作伙伴：partner

XHTML文件中id的命名

(1)页面结构

• • 容器: container
  • 页头：header
  • 内容：content/container
  • 页面主体：main
  • 页尾：footer
  • 导航：nav
  • 侧栏：sidebar
  • 栏目：column
  • 页面外围控制整体布局宽度：wrapper
  • 左右中：left right center

(2)导航

• • 导航：nav
  • 主导航：mainbav
  • 子导航：subnav
  • 顶导航：topnav
  • 边导航：sidebar
  • 左导航：leftsidebar
  • 右导航：rightsidebar
  • 菜单：menu
  • 子菜单：submenu
  • 标题: title
  • 摘要: summary

(3)功能

• • 标志：logo
  • 广告：banner
  • 登陆：login
  • 登录条：loginbar
  • 注册：regsiter
  • 搜索：search
  • 功能区：shop
  • 标题：title
  • 加入：joinus
  • 状态：status
  • 按钮：btn
  • 滚动：scroll
  • 标签页：tab
  • 文章列表：list
  • 提示信息：msg
  • 当前的: current
  • 小技巧：tips
  • 图标: icon
  • 注释：note
  • 指南：guild
  • 服务：service
  • 热点：hot
  • 新闻：news
  • 下载：download
  • 投票：vote
  • 合作伙伴：partner
  • 友情链接：link
  • 版权：copyright

CSS+DIV的命名规则

　　登录条:loginBar

　　标志:logo

　　侧栏:sideBar

　　广告:banner

　　导航:nav

　　子导航:subNav

　　菜单:menu

　　子菜单:subMenu

　　搜索:search

　　滚动:scroll

　　页面主体:main

　　内容:content

　　标签页:tab

　　文章列表:list

　　提示信息:msg

　　小技巧:tips

　　栏目标题:title

　　友情链接:friendLink

　　页脚:footer

　　加入:joinus

　　指南:guild

　　服务:service

　　热点:hot

　　新闻:news

　　下载:download

　　注册:regsiter

　　状态:status

　　按钮:btn

　　投票:vote

　　合作伙伴:partner

　　版权:copyRight

CSSID的命名

　　外套:wrap

　　主导航:mainNav

　　子导航:subnav

　　页脚:footer

　　整个页面:content

　　页眉:header

　　页脚:footer

　　商标:label

　　标题:title

　　主导航:mainNav(globalNav)

　　顶导航:topnav

　　边导航:sidebar

　　左导航:leftsideBar

　　右导航:rightsideBar

　　旗志:logo

　　标语:banner

　　菜单内容1:menu1Content

　　菜单容量:menuContainer

　　子菜单:submenu

　　边导航图标:sidebarIcon

　　注释:note

　　面包屑:breadCrumb(即页面所处位置导航提示)

　　容器:container

　　内容:content

　　搜索:search

　　登陆:login

　　功能区:shop(如购物车，收银台)

　　当前的current

样式文件命名

　　主要的:master.css

　　布局版面:layout.css

　　专栏:columns.css

　　文字:font.css

　　打印样式:print.css

　　主题:themes.css

说明：均为class，需要扩展，则在当前命名内以“_“(下划线)后缀自定名称。

我习惯称列表页为list，新闻列表则为newslist，图片列表为piclist，

内容页为view，

整体大框架：#wrapper

大框架内：#inwrapper

/

顶部及banner：.top

顶部及banner内：.intop

Logo：.logo

Banner：.banner

导航：.menu

导航内：.inmenu

.Menuul

.Menuul li

.Menuul li a

下拉菜单：.inmenu_xiala

.Inmenu_xialaul

.Inmenu_xialaul li

.Inmenu_xialaul li a

///

主体内容：.mainWrapper

主体内容内：.inmainwrapper

左侧拦：.sideleft

左侧内：.insideleft

右侧栏：.sideright

右侧内：.insideright

中间：.sidecenter

中间内：.insidecenter

/

底部：.foot

底部内：.infoot

/其他命名/

搜索：.search

搜索内：.insearch

搜索条：.searchselect

搜索按钮：.serachbuttom

输入文本框：.input

.select

/表格样式/

表格整体框架：.listbox

表格的宽度：.listbox-table

表格头部文字样式：.listbox-header

表格正文文字样式：.listbox-entry

/通用型/

通用：.GM

通用内：.INGM

通用左浮动：.GMfl(GM FLOAT LEFT)

通用右浮动：.GMfr(GM FLOAT RIGHT)

/通用图片样式/

通用图片样式：.img

/清除浮动/

清除所有浮动：.clear

清除左侧浮动：.clearleft

清除右侧浮动：.clearright

/文字样式/

文字：.font

/新闻列表/

新闻列表：.fontnews

/View页字体总样式/

VIEW页字体：.fontview

商　标：　　label

标　题：　　title

主导航：　　mainbav（globalnav）

顶导航：　　topnav

边导航：　　sidebar

左导航：　　leftsidebar

右导航：　　rightsidebar

旗　志：　　logo

标　语：　　banner

菜单内容1： menu1 content

菜单容量：　menu container

子菜单：　　submenu

边导航图标：sidebarIcon

注释：　　　note

面包屑：　　breadcrumb(即页面所处位置导航提示）

容器：　　　container

内容：　　　content

搜索：　　　search

登陆：　　　Login

功能区：　　shop(如购物车，收银台)

当前的　　　current

报头：　　　masthead

摘要, 概要　 summary或general

左边的浮动照图片 photoleft

右边的浮动图片 photoright

标题　　　title

条目底端　　　 entrybottom

更多　　　 extended或.more

容器背景 containerbg

服务　　 service

服务链接　　 servicelink

线　　 line

文本　　 text

右边　　 rightside

版权　　 copyright

新闻　　 news

书皮　　 wrapper

介绍　　　　　　intro-part1

专栏　　 column

路径　　 pathways

片断　　 section

模块　　 module

上导航　　 subnav

另外在编辑样式表时可用的注释可这样写：

内容区

样式文件命名

主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

样式表中的注示

JavaScript书写规范：

1. 使用规范的命名：使用驼峰命名法（camelCase）来命名变量、函数和对象属性，首字母小写，例如：myVariable。使用语义化的命名，使代码易于理解和维护。

let carNum = 1; function myFun() {}; let myObj = { }

1. 常量：使用大写字母和下划线"_"连接单词来命名常量，并使用const关键字声明它们。

const MAX_VALUE = 1;

1. 变量声明：始终使用关键字（var, let, const）声明变量，并在每个变量之间使用逗号进行分隔。尽量避免全局变量。在运算符周围和逗号后面使用空格，以提高代码的可读性。

let x = y + z; let a, b;

1. 缩进和代码块：使用2或4个空格进行缩进，不要使用制表符。并在代码块之间添加换行。
2. 代码注释：添加适当的注释来解释代码的用途、功能和注意事项。
3. 使用严格等号：优先使用严格相等运算符（===）代替相等运算符（==）。

if (obj === null) {}

1. 分号：在每个语句结束后添加分号，以避免可能的错误。
2. 引号：在字符串使用时，一致地使用单引号或双引号。

let str = "字符串";

1. 括号：在函数调用、控制流语句和复杂表达式中使用括号来增加代码的可读性。
2. 函数：使用函数表达式或函数声明语法定义函数。给函数和参数使用有意义的名字，并在函数内部使用return语句明确返回值。
3. 错误处理：在可能出现错误的地方使用异常处理机制（try...catch）进行错误处理。

try { var a = 123; //可能出现错误的地方 } catch (err) {}

1. 使用严格模式：在脚本的顶部使用"use strict";启用严格模式，以避免常见的JavaScript错误。
2. 对象和数组：使用字面量语法创建对象和数组，并使用换行和缩进对其格式化。
3. 对象定义的规则包括将左花括号与类名放在同一行，冒号与属性值间有个空格，字符串使用双引号，数字不需要，最后一个属性-值对后面不要添加逗号，将右花括号独立放在一行，并以分号作为结束符号。

let arr = [1, 2, 4]; //字面量语法 let obj = { a: 1, b: "zifu", c: [] };

1. 为了便于阅读，每行字符建议小于80个。