Html5+CSS3命名规范(前端web开发命名规范,符合SEO规范)

1个月前 ( 10-22 ) 1370阅读 3评论

任何代码编程都有各自特点的常用命名规范,div+css页面设计也不例外。遵守常用的css命名规范有利于代码的升级和扩展,也有利于让别人读懂你的css代码,让你的页面显得清晰有条理。

Html5+CSS3命名规范(前端web开发命名规范,符合SEO规范) 第1张

css文件名命名规范

  • 模块:module.css

  • 基本共用:base.css

  • 布局、版面:layout.css

  • 主题:themes.css

  • 专栏:columns.css

  • 文字:font.css

  • 表单:forms.css

  • 补丁:mend.css

  • 打印:print.css

页面结构元素div命名规范

  • 头:header

  • 内容:content/container

  • 尾: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

页面结构

  • 容器: container

  • 页头:header

  • 内容:content/container

  • 页面主体:main

  • 页尾:footer

  • 导航:nav

  • 侧栏:sidebar

  • 栏目:column

页面外围控制整体布局宽度:wrapper 左右中:left right center

颜色命名-使用颜色的名称或者16进制代码

.red {color: red;}
.f60 {color: #f60;}
.ff8600 {color: #ff8600;}

字体大小命名-直接使用“font+字体大小”作为名称

.font12px {font-size: 12px;}
.font9pt {font-size: 9pt;}

对齐样式命名-使用对齐目标的英文名称

.left {float:left;}
.bottom {float:bottom;}

标题栏样式命名-使用“类别+功能”的方式命名

.barnews { }
.barproduct { }

注释书写规范

1.行间注释-直接写于属性值后面,如:

.search{
border:1px solid #fff;/*定义搜索输入框边框*/
background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/
}

2.整段注释-分别在开始及结束地方加入注释,如:

/*=====搜索条=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索条结束=====*/

注意事项:

1、一律小写;

2、尽量用英文;

3、尽量不缩写,除非一看就明白的单词;

4、属性的值一定要用双引号(“”)括起来,且一定要有值如class="divcss5",id="divcss5";

5、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整。

大家在日常的页面设计中要逐步养成规范命名的好习惯。

文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

表情:
评论列表 (有 3 条评论,1370人围观)
网友昵称:愤怒D小虎
愤怒D小虎V铁粉2020-11-08椅子 回复 WeChat 7.0.18 Apple iPhone
网友昵称:李洋博客
李洋博客V博主2020-11-09 回复 Sogou Explorer Windows 10 x64
网友昵称:peggy.Z
peggy.ZV铁粉2020-11-01沙发 回复 Google Chrome 86.0.4195.1 Windows 10 x64
严以律己!
取消
支付宝二维码
支付宝二维码
微信二维码