web语义化以及前端命名规范整理

最新推荐文章于 2022-01-17 09:37:23 发布

春天的小绵羊

最新推荐文章于 2022-01-17 09:37:23 发布

阅读量352

点赞数 1

分类专栏：前端命名

原文链接：https://www.jianshu.com/p/6417143c4b18

版权

前端命名专栏收录该内容

1 篇文章 0 订阅

订阅专栏

web语义化

一个得到广泛推崇的东西，必然有它的优势所在。web语义化：
1、可以让人一目了然这块是什么鬼，那块是什么鬼，对于项目的维护或者优化都是非常有意义的。

2、随着html5语义化标签的出现，我推测以后web语义化对于seo优化，还是非常有利的。也就是说，seo优化，必然也要考虑web语义化。如：

可以很好的代替传统的。

那怎样愉快的玩耍web语义化呢？
1）标签语义化，如在合适的地方用合适的语义化标签，如头部可用

、尾部可用

2）命名语义化，包括html的id和class的命名，javascript相关命名；如#header{}、.footer{}、等。

下面是常见的命名参考规范：
一、主体
头部：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

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：join

指南：guild

服务：service

状态：status

投票：vote

合作伙伴：partner

二、css注释的写法
如内容区，Html注释的写法：<!–header头部-- >

三、id的命名规范
(1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

(2)导航

导航：nav

主导航：mainnav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

(四)class的命名:
(1)颜色：使用颜色的名称或者16进制代码，如：

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

(2)字体大小，直接使用“font+字体大小”作为名称，如：

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

(3)对齐样式，使用对齐目标的英文名称，如：

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

(4)标题栏样式，使用“类别+功能”的方式命名，如：

.barnews { } .barproduct { }

Tips：
1.一律小写；

2.尽量用英文(汉字跨域或引入会需要解码,很麻烦)；

3.尽量不加中杠和下划线；

4.尽量不缩写，除非一看就明白的单词，如：wrapper可以写成wrap。

5.css文件命名规范：

主要的 master.css；

模块 module.css；

基本共用 base.css；

布局，版面layout.css；

主题 themes.css；

专栏 columns.css；

文字 font.css；

表单 forms.css；

补丁 mend.css；

打印print.css

作者：袁枚
链接：https://www.jianshu.com/p/6417143c4b18
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
一个得到广泛推崇的东西，必然有它的优势所在。web语义化：
1、可以让人一目了然这块是什么鬼，那块是什么鬼，对于项目的维护或者优化都是非常有意义的。

2、随着html5语义化标签的出现，我推测以后web语义化对于seo优化，还是非常有利的。也就是说，seo优化，必然也要考虑web语义化。如：

可以很好的代替传统的。

那怎样愉快的玩耍web语义化呢？
1）标签语义化，如在合适的地方用合适的语义化标签，如头部可用

、尾部可用

2）命名语义化，包括html的id和class的命名，javascript相关命名；如#header{}、.footer{}、等。

下面是常见的命名参考规范：
一、主体
头部：header

内容：content/container

尾部：footer

导航：nav

侧栏：sidebar

栏目：column

整体布局：wrapper