class命名规范

本文是借鉴CSS命名规则规范整理 - iPoplar - 博客园

新手在刚开始学习前端是时候是很苦恼class命名，我自己整理了一下语义化命名，希望能够有所帮助

目录

命名方式

驼峰命名法

蛇形命名法

串式命名法

匈牙利命名法

常用的class命名

页面结构布局的命名

导航栏

功能

---

命名方式

• 驼峰命名法

• 蛇形命名法

• 串式命名法

• 匈牙利命名法

参考 常见命名规范_Jason_Xiong devops之路的博客-CSDN博客_命名规范

常用的class命名

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

导航栏

导航：nav　　主导航：mainbav　　子导航：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