不知道大家有没有这样一个苦恼,在开发过程中经常为了起一个css名,文件名,组件名而苦恼

起的高大上点害怕连自己都看不懂,起的太简单又显得自己很不专业

下面我们就来解决这个问题

布局使用语义化标签

对于经验资深的前端er，在给web布局时，相信都会很注重标签和命名的规范。尤其是随着html5的普及发展，更是把web前端语义化推向一个新的台阶上。比如html5给我们新增的语义标签：header、nav、main、aside、footer、section、article等等。

二、命名规范

在开发的时候,经常会因为元素命名而头疼，无论是CSS样式命名还是现在很经常接触到的自定义组件命名. 下面整理一些常用的命名参考规范:

头部：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

指南：guide

服务：service

注册：register

状态：status

投票：vote

合作伙伴：partner

...

命名原则就是:命名要有语义化,首先你自己得看懂,其次别人一看也懂

页面结构类

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

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

左右中：left right center

导航类

导航：nav

主导航：mainnav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

功能类

标志：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

class/css的命名

1. 颜色：使用颜色的名称或者16进制代码，如：

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

1. 字体大小，直接使用“font+字体大小”作为名称，如：

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

1. 对齐样式，使用对齐目标的英文名称，如：

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

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

.navnews { } //导航栏: 新闻.navproduct { } //导航栏: 产品

其他

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