博客列表 >html的class命名规范(前端类名取名)

html的class命名规范(前端类名取名)

php001
php001原创
2022年02月02日 16:38:136208浏览

常见class关键词

  • 布局类:header, footer, container, main, content, aside, page, section

  • 包裹类:wrap, inner

  • 区块类:region, block, box

  • 结构类:hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span

  • 列表类:list, item, field

  • 主次类:primary, secondary, sub, minor

  • 大小类:s, m, l, xl, large, small

  • 状态类:active, current, checked, hover, fail, success, warn, error, on, off

  • 导航类:nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

  • 交互类:tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay

  • 星级类:rate, star

  • 分割类:group, seperate, divider

  • 等分类:full, half, third, quarter

  • 表格类:table, tr, td, cell, row

  • 图片类:img, thumbnail, original, album, gallery

  • 语言类:cn, en

  • 论坛类:forum, bbs, topic, post

  • 方向类:up, down, left, right

  • 其他语义类:btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…

页面结构

  • 容器: container/wrap

  • 整体宽度:wrapper

  • 页头:header

  • 内容:content

  • 页面主体:main

  • 页尾:footer

  • 导航:nav

  • 侧栏:sidebar

  • 栏目:column

  • 中间内容:center

导航

  • 导航:nav

  • 导航:mainnav/globalnav

  • 子导航:subnav

  • 顶导航:topnav

  • 边导航:sidebar

  • 左导航:leftsidebar

  • 右导航:rightsidebar

  • 边导航图标:sidebarIcon

  • 菜单:menu

  • 子菜单:submenu

  • 标题: title

功能

  • 标志:logo

  • 登录:login

  • 登录条:loginbar

  • 注册:regsiter

  • 产品:products

  • 产品价格:productsPrices

  • 产品评论:productsReview

  • 编辑评论:editor-review

  • 最新产品:news-release

  • 广告/标语:banner

  • 摘要:summary

  • 生产商:publisher

  • 缩略图:screenshot

  • 常见问题:faqs

  • 关键词:keyword

  • 博客:blog

  • 论坛:forum

  • 搜索:search

  • 搜索输入框:search-input

  • 搜索输出:search-output

  • 搜索结果:search-results

  • 加入我们:joinus

  • 状态:status

  • 按钮:btn

  • 滚动:scroll

  • 标签页:tab

  • 文章列表:list

  • 提示信息:msg/message

  • 当前的: current

  • 小技巧:tips

  • 皮肤:skin

  • 充值:pay

  • 活动:activities

  • 推广:promotion

  • 公告:announcement

  • 排行:ranking

  • 公司简介:companyProfile

  • 公司设备:equipment

  • 公司荣誉:glories

  • 企业文化:culture

  • 企业规模:scaleScale

  • 营销网络:salesNetwork

  • 组织机构:organization

  • 技术力量:technology

  • 分支机构:branches

  • 企业资质:EnterpriseQualification

  • 公司实力:strengthStrength

  • 经营理念:operationPrinciple

  • 经理致辞:manager_oration

  • 发展历程:developmentHistory

  • 工程案例:EngineeringProjects

  • 分类浏览:browseByCategory

  • 应用领域:applicationFields

  • 人力资源:humanResourceHr

  • 领导致辞: leader_oration

  • 客户留言:customerMessage

  • 客户服务:customerService

  • 您的要求:yourRequirements

  • 销售信息:salesInformation

  • 招商:EnterpriseEstablishing

  • 教育培训:EducationTraining

  • 在线交流:onlineCommunication

  • 质量认证:qualityCertification

  • 合作加盟:joinInCooperation

  • 产品描述:productsDescription

  • 业务范围:businessScope

  • 产品销售:salesSales

  • 联系我们:contactUs

  • 信息发布:Information

  • 返回首页:homepage

  • 产品定购:order

  • 电子商务:E-business

  • 版权所有:copy Right

  • 友情连结:hot Link

  • 行业新闻:tradeNews

  • 行业动态:trends

  • 邮编:postalCodeZipcode

  • 新闻动态:newsTrends

  • 公司名称:companyName

  • 销售热线:salesHot_Line

  • 联系人:contactPerson

  • 建设中:InConstruction

  • 证书:certificate

  • 地址:ADD/Add

  • 电话:TEL/Tel

  • 传真:FAX/Fax

  • 产品名称:productName

  • 产品说明:description

  • 价格:price

  • 品牌:brand

  • 规格:specification

  • 尺寸:size

  • 生产厂家:manufacuturer

  • 型号:model

  • 产品标号:Item No

  • 技术指标:techniqueData

  • 产品描述:description

  • 产地:productionPlace

  • 用途:application

  • 论坛:Forum

  • 在线订购:on_lineOrder

  • 招标:bidInviting

  • 综述:general

  • 业绩:achievements

  • 大事:greatEvent

  • 动态:trends

  • 服务:service

  • 投资:Investment

  • 行业:Industry

  • 规划:programming

  • 环境:environment

  • 发送:delivery

  • 提交:submit

  • 重写:reset

  • 社区:community

  • 业务:business

  • 在线调查:onlineInquiry

  • 下载中心:download

  • 意见反馈:feedback

  • 常见问题:FAQ

  • 中心概况:generalProfile

  • 游乐园:amusementPark

  • 专题报道:specialReport

  • 图标: icon

  • 注释:note

  • 指南:guild

  • 服务:service

  • 热点:hot

  • 新闻:news

  • 下载:download

  • 投票:vote

  • 商标:label/branding

  • 当前位置:breadcrumb/loc

  • 购物车:shop

  • 标签:tag

  • 信誉:siteinfo-credits

  • 网站信息:siteinfo

  • 法律声明:siteinfo-legal

  • 合作伙伴:partner

  • 友情链接:friendlink

  • 版权:copyright

规则

  • 以中划线连接,如 .item-img

  • 使用两个中划线表示特殊化,如 .item-img.item-img—small 表示在 .item-img 的基础上特殊化

  • 状态类直接使用单词,参考上面的关键词,如 .active, .checked

  • 图标以 icon- 为前缀(字体图标采用.icon-font.i-name方式命名)

  • 模块采用关键词命名,如.slide, .modal, .tips, .tabs,特殊化采用上面两个- 中划线表示,如 .imgslide—full, .modal—pay, .tips—up, .tabs—simple

  • js 操作的类统一加上 js- 前缀

  • 不要超过四个 class 组合使用,如 .a.b.c.d

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议