id和class命名规范

2020-04-08

id和class命名规范

  • 外套 wrap

  • 容器 container

  • 内容 content

  • 顶部 top

  • 头部 header

  • 底部 footer

  • 导航 nav

  • 导航条 navBar

  • 主导航 mainNav

  • 子导航 subNav

  • 顶导航 topNav

  • 标题 title

  • 左 left

  • 右 right

  • 中 center

  • 上 up

  • 下 down

  • 幻灯片 banner

  • 轮播 slider

  • 面包屑 breadCrumb

  • 登录 login

  • 注册 reg

  • 用户 user

  • 提示信息 msg

  • 新闻 news

  • 列表 list

  • 版权 copyright

  • 详情 view

  • 项目 item

  • 更多 more

  • 电话 tel

  • 邮箱 email

  • 选项卡 tab

  • 头像 avatar

  • 文章 artical

  • 图集 gallery

  • 条栏 bar

  • 关闭 close

  • 箭头 arrow

  • 向左一个 prev

  • 向右一个 next

  • 页面、页码 page

  • 图标 icon

  • 标识 logo

  • 菜单 menu

  • 相片 photo

  • 播放 play

  • 快捷 quick

  • 侧边栏 slider

  • 返回 back

  • 搜索 search

  • 面板 panel

  • 不固定 fluid

  • 分享 share

  • 加载 loading

  • 数字 num

  • 首页 index

  • 关于 about

  • 服务 service

  • 产品 product

  • 联系 contact

文本命名规范
index.css: 一般用于首页建立样式
head.css: 头部样式,当多个页面头部设计风格相同时使用。
base.css: 共用样式。
style.css:独立页面所使用的样式文件。
global.css:页面样式基础,全局公用样式,页面中必须包含。
layout.css:布局、版面样式,公用类型较多时使用,一般用在首页级页面和产品类页面中
module.css:模块,用于产品类页,也可与其它样式配合使用。
master.css:主要的样式表
columns.css:专栏样式
themes.css:主体样式
forms.css:表单样式
mend.css:补丁,基于以上样式进行的私有化修补。
页面结构命名:
page:代表整个页面,用于最外层。
wrap:外套,将所有元素包在一起的一个外围包,用于最外层
wrapper:页面外围控制整体布局宽度,用于最外层
container:一个整体容器,用于最外层
head,header:页头区域,用于头部
nav: 导航条
content:内容,网站中最重要的内容区域,用于网页中部主体
main:网站中的主要区域(表示最重要的一块位置),用于中部主体内容
column:栏目
sidebar:侧栏
foot,footer:页尾、页脚。网站一些附加信息放置区域,(或命名为 copyright)用于底部
导航命名:
nav, navbar, navigation, nav-wrapper:导航条或导航包,代表横向导航
topnav:顶部导航
mainbav:主导航
subnav:子导航
sidebar:边导航
leftsidebar 或 sidebar_a:左导航
rightsidebar 或 sidebar_b:右导航
title:标题
summary:摘要
menu:菜单,区域包含一般的链接和菜单
submenu:子菜单
drop:下拉
dorpmenu:下拉菜单
links:链接菜单
功能命名:
logo:标记网站logo标志
banner:标语、广告条、顶部广告条
login:登陆,(例如登录表单:form-login)
loginbar:登录条
register:注册
tool, toolbar:工具条
search:搜索
searchbar:搜索条
searchlnput:搜索输入框
shop:功能区,表示现在的
icon:小图标
label:商标
homepage:首页
subpage:二级页面子页面
hot:热门热点
list:文章列表,(例如:新闻列表:list-news)
scroll:滚动
tab:标签
sitemap:网站地图
msg 或 message:提示信息
current:当前的
joinus:加入
status:状态
btn:按钮,(例如:搜索按钮可写成:btn-search)
tips:小技巧
note:注释
guild:指南
arr, arrow:标记箭头
service:服务
breadcrumb:(即页面所处位置导航提示)
download:下载
vote:投票
siteinfo:网站信息
partner:合作伙伴
link, friendlink:友情链接
copyright:版权信息
siteinfoCredits:信誉
siteinfoLegal:法律信息


Tag:

相关