常用的CSS命名规范大总结

CSS命名一般选用小写英文单词或组合命名，单词与单词之间以”-“切割，并且英文单词不缩写，除非是那种简单一眼看上去就能理解的单词。接下来在文章中分享一些CSS中常用的命名标准，期望对大家有所协助

【推荐课程：CSS教程】
文本命名标准
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：法律信息