CSS书写规范
- 使用规范的命名:使用有意义的类名和ID,使用小写字母和短横线"-"连接单词,尽量不缩写,除非一看就明白的单词。
.my-class {} #my-id {}
- 使用缩进和换行:使用2或4个空格进行缩进,而不是制表符。并在选择器之间、属性之间和每个规则之后添加换行。
.my-class { font-size: 11px; } .my-box { font-size: 12px; }
- 书写顺序:按照一定的顺序来书写CSS可以提高代码的可读性。一般的顺序如下:
-
- 位置属性 (position, top, right, z-index, display, float等)
- 大小 (width, height, padding, margin)
- 文字系列 (font, line-height, letter-spacing, color- text-align等)
- 背景 (background, border等)
- 其他 (animation, transition等)
- 避免使用全局选择器,尽量使用具体的选择器来限定样式的影响范围。尽量避免使用全局选择器(如 *),因为它们会增加样式的复杂性和难以维护性。 * {}
- 避免使用!important:尽量避免使用!important,除非某些特殊情况下需要覆盖其他样式。
.my-class { font-size: 20px !important; }
- 使用简写属性:使用CSS的简写属性可以减少代码量并提高可读性(例如,使用 margin替代 margin-top、 margin-right等)。
.my-class { margin: 10px 20px 30px 20px; }
- 单位一致性:使用相对单位(如em、rem)来保持网页的相对一致性,避免使用绝对单位(如px)。
- 使用CSS预处理器:使用Sass、Less等CSS预处理器来简化CSS的编写和维护。
- 注释:对于关键的代码块或特殊规则,请使用注释进行解释和说明,以方便他人理解和维护。
- 媒体查询:将媒体查询放在与其相关的样式块之后,并使用适当的缩进和注释来提高可读性。
- 选择器的嵌套:避免选择器的过度嵌套,以免增加样式的特殊性和影响性能。
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书写规范:
- 使用规范的命名:使用驼峰命名法(camelCase)来命名变量、函数和对象属性,首字母小写,例如:myVariable。使用语义化的命名,使代码易于理解和维护。
let carNum = 1; function myFun() {}; let myObj = { }
- 常量:使用大写字母和下划线"_"连接单词来命名常量,并使用const关键字声明它们。
const MAX_VALUE = 1;
- 变量声明:始终使用关键字(var, let, const)声明变量,并在每个变量之间使用逗号进行分隔。尽量避免全局变量。在运算符周围和逗号后面使用空格,以提高代码的可读性。
let x = y + z; let a, b;
- 缩进和代码块:使用2或4个空格进行缩进,不要使用制表符。并在代码块之间添加换行。
- 代码注释:添加适当的注释来解释代码的用途、功能和注意事项。
- 使用严格等号:优先使用严格相等运算符(===)代替相等运算符(==)。
if (obj === null) {}
- 分号:在每个语句结束后添加分号,以避免可能的错误。
- 引号:在字符串使用时,一致地使用单引号或双引号。
let str = "字符串";
- 括号:在函数调用、控制流语句和复杂表达式中使用括号来增加代码的可读性。
- 函数:使用函数表达式或函数声明语法定义函数。给函数和参数使用有意义的名字,并在函数内部使用return语句明确返回值。
- 错误处理:在可能出现错误的地方使用异常处理机制(try...catch)进行错误处理。
try { var a = 123; //可能出现错误的地方 } catch (err) {}
- 使用严格模式:在脚本的顶部使用"use strict";启用严格模式,以避免常见的JavaScript错误。
- 对象和数组:使用字面量语法创建对象和数组,并使用换行和缩进对其格式化。
- 对象定义的规则包括将左花括号与类名放在同一行,冒号与属性值间有个空格,字符串使用双引号,数字不需要,最后一个属性-值对后面不要添加逗号,将右花括号独立放在一行,并以分号作为结束符号。
let arr = [1, 2, 4]; //字面量语法 let obj = { a: 1, b: "zifu", c: [] };
- 为了便于阅读,每行字符建议小于80个。