CSS命名规范
命名规则
- 简单来说完全可以使用 Java 或 C 语言的规范,可以使用连字符"-"链接单词增强辨识度,不要用汉字
常见 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注册:
register产品:
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生产厂家:
manufacturer型号:
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
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 ⭐️齐下无贰⭐️!
评论