前端开发id和class命名规范学习了
2022-11-25 加入收藏
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：法律信息