在前端开发中,规范使用 DIV+CSS 命名,可以增强团队合作提高开发效率,有利于页面后期的维护和优化。
(1) 页面结构
wrap |
外套、包裹,用于最外层 |
wrapper |
外套,用于页面外围控制整体布局宽度 |
Box |
盒子,容器 |
header |
头部,用于页头部分 |
nav |
导航,主导航 |
main |
主要区域,内容主体 |
content/container |
内容,内容容器 |
sidebar |
侧边栏 |
footer |
底部,用于页脚部分 |
(2) 功能区块
left center right |
左中右 |
main-left |
左侧主要布局 |
main-right |
右侧主要布局 |
logo |
网站 logo 标志。 |
search |
搜索输入框。 |
loginbar |
登录条。 |
regsiter |
注册模块。 |
banner |
广告,用于横幅广告条。 |
menu |
菜单。 |
submenu |
子菜单,二级菜单。 |
top |
顶部。 |
topnav |
顶导航。 |
mainnav |
主导航。 |
subnav |
子导航,二级导航。 |
leftsideBar |
左导航。 |
rightsideBar |
右导航。 |
topbar |
顶部工具/菜单。 |
bottom |
底部。 |
bottombar |
底部工具栏。 |
tool |
工具条。 |
shop |
功能区,如购物车、收银台。 |
(3) 其他常用命名
title |
栏目标题。 |
summary |
摘要。 |
hot |
热门热点信息,推荐。 |
msg |
提示信息。 |
news |
新闻。 |
list |
列表,文章列表。 |
piclist |
图片列表。 |
newslist |
新闻列表。 |
search-output |
搜索输出。 |
search-results |
搜索结果。 |
drop/dropdown |
下拉。 |
dropmenu/dorpdown-content |
下拉菜单。 |
scroll |
滚动。 |
homepage |
首页。 |
subpage |
子页面,二级页面。 |
tag |
标签。 |
tab |
标签页。 |
tips |
小技巧。 |
ranking |
排行。 |
Vote |
投票。 |
bth |
按钮。 |
icon |
图标。 |
arr/arrow |
箭头。 |
status |
状态。 |
note |
注释。 |
skin |
皮肤。 |
current |
当前的。 |
active |
活跃的,有效的。 |
download |
下载。 |
friendLink |
友情链接。 |
copyright |
版权信息。 |
partner |
合作伙伴。 |
joinus |
加入我们。 |
sitemap |
网站地图。 |
siteinfo |
网站信息。 |
siteinfoLegar |
法律声明。 |
announcement |
公告。 |
guild |
指南。 |
service |
服务。 |
promotion |
推广。 |
blog |
博客。 |
forum |
论坛。 |
(4) 产品相关命名
keyword |
关键词。 |
products |
产品。 |
products-prices |
产品价格。 |
products-description |
产品描述。 |
products-review |
产品评论。 |
editor-review |
编辑评论。 |
news-products |
最新产品。 |
publisher |
生产商。 |
screenshot |
缩略图。 |
faqs |
常见问题。 |
barnding |
商标。 |
pay |
充值。 |
reputation |
信誉。 |
(5) 常用的文件命名
全局样式 |
global.css |
布局结构 |
layout.css |
基本共用 |
base.css |
综合样式 |
style.css |
主要的 |
master.css |
模块 |
module.css |
表单 |
forms.css |
主题/网页换肤 |
themes.css |
字体 |
font.css |
打印 |
print.css |
补丁 |
mend.css |
(6) ID 和 Class 命名规范
主要的、重要的、特殊的、最外层的盒子使用 ID 属性命名,其他的都使用 class 属性命名。
命名规则须以内容优先,表现为辅。首先根据所要呈现的内容、功能来命名,如果内容实在无法找到合适的命名,可以再根据表现命名。
大多数情况下,命名都使用英文单词,可以增加代码的可读性,但特殊情况下,实在找不到合适的单词时,可以使用拼音命名,但必须简明,结构清晰。
ID 和 Class 命名尽量全部都使用小写,多个单词可以使用连字符(-)链接,命名可以使用数字,但不能以数字开头。
命名可以使用单词缩写,但必须确保是有效的缩写,即别人能看懂,不能自定义缩写。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。