前端设计开发常用命名规则

柔光的暖阳◎ 2021-09-17 08:20 554阅读 0赞

**网页设计命名规范**

1.  Container

> “container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为:“wrapper“, “wrap“, “page“.

1.  Header

> “header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或  
> pageHeader).

1.  Navbar

> “navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”,  
> “nav-wrapper”.

1.  Menu

> “Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.

1.  Main

> “Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content”  
> (或“mainContent”)。

1.  Sidebar

> “Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “,  
> “side-panel“, “secondary-content“.

1.  Footer

> “Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.

**需要注意的几点**

**1.语义化**  
尽量考虑为元素命名其本身的作用或用意，达到语义化。不要使用表面形式的命名.

如:red/left/big等。

**2.组合命名规则:**

\[元素类型\]-\[元素作用/内容\]

如:搜索按钮: btn-search

登录表单:form-login

新闻列表:list-news

**3.涉及到交互行为的元素命名:**

凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:

鼠标悬停:：hover 点击：click 已浏览：visited

如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

**Photoshop图层结构规范**

Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。

图层命名结构

第一级图层结构如下图:  
![在这里插入图片描述][20181211230314656.png]

第二级图层结构如下图:  
![在这里插入图片描述][20181211230329187.png]

第三级图层结构如下图:  
![在这里插入图片描述][20181211230340134.png]

**常用命名汇总**

> **站头部**: head/header(头部) top（顶部)  
> **导航**：nav  
> **导航具体区分**：topnav(顶部导航)、mainnav(主导航)、mininav(迷你导航)、textnav(导航文本)、subnav(子导航/二级导航)
> 
> **旗帜、广告和商标**：logo（旗帜）、brand(商标)、banner(标语)
> 
> **搜索**：sreach(搜索)、sreachbox(搜索框)、sreachbtn(搜索按钮)、sreachinput（搜索输入框）
> 
> **注册和登录**：login(登录)、regsiter(注册)、userbox(用户名/通行证的文本框)、password(密码)
> 
> **布局、分栏和框**：layout(布局)、bigdiv(大div)、leftdiv(左分栏)、rightdiv(右分栏)、leftfloat(左浮动)、rightfloat(右浮动)、mainbox()、subpage(子页面/二级页面)
> 
> **页脚/底部**：foot/footer(页脚/底部)、copyright(版权信息)、sitemap(网站地图)
> 
> **其他**：content(内容)、skin(皮肤)、title(标题)、from(表单)、pic(图片)、news(新闻)、shop(购物区)、list(列表/清单)、newslist(新闻列表)、  
> downloadlist(下载列表)、piclist(图片列表)、dropmenv(下拉菜单)、cor/corner(圆角)、homepage(首页)、crumb(当前位置导航)

**分类命名**

**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

**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 \{ \}

**注意事项:**

> 1.一律小写;
> 
> 2.尽量用英文;
> 
> 3.不加中杠和下划线;
> 
> 4.尽量不缩写，除非一看就明白的单词.
> 
> 主要的 master.css 模块 module.css 基本共用 base.css
> 
> 布局，版面 layout.css 主题 themes.css 专栏 columns.css
> 
> 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css
> 
> 统计 count.css

以上结构就可以组合使用，例如：左列标题lefttitle；底部导航footernav 规范不是说要所有人照一个样子来命名css，我们可以根据自己的需要定制命名规则，只要记住命名的规则，就可以根据网站本身的特点来创造具有自己风格的命名方式。

一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class，我们可以使用f即foot的头字母为前缀进行命名，如：

f-blue:表示蓝色字体样式

f-blod:表示粗体字体样式

对于网页中如新闻频道的一些新闻的现实样式，可以用n作为前缀进行样式设计，如：

n-title:新闻标题

n-list:新闻列表

**CSS文件及样式命名**

**1、CSS文件命名规范**

> 全局样式：global.css；
> 
> 框架布局：layout.css；
> 
> 字体样式：font.css；
> 
> 链接样式：link.css；
> 
> 打印样式：print.css；

**2、CSS样式命名规范**

本人建议：用字母、\_号工、-号、数字组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：

头部样式用header，头部左边，可以用header\_left或header\_l,还有如果是列结构的可以这样——box \_1of3 (三列中的第一列)，box\_2of3 (三列中的第二列)、box \_3of3 (三列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。

下面列出一些常用的命名单词方便大家使用：（以后大家工作过程中慢慢把自己积累的单词都共享出来，那大家的命就会更加统一了，就不会有一义多词的情况了。）

[20181211230314656.png]: /images/20210813/b6b6622cb746452bb31c70208bd218a4.png
[20181211230329187.png]: /images/20210813/fa729635db6846589b86d6046a87480c.png
[20181211230340134.png]: /images/20210813/216a5a213226450684b4acfdb39fd243.png