CSS | 常用的命名规范01

我在做项目和维护他人写的代码过程中，越来越发现代码规范的重要性。规范的代码格式可以让后期在原代码上开发和维护更加高效。自己也看了很多的代码规范，所以想根据自己的所学整理一些内容。

1. CSS样式的命名规范：

• 采用英文字母、数字、以及 "_" 和 "-" 命名；

• 以小写字母开头，不能以数字、 "_" 和 "-" 开头；

• 命名形式：单字，连字符，下划线并遵守驼峰命名法；

如图所示：

2.CSS文本命名规范：

index.css: 一般用于首页建立样式
 
head.css: 头部样式
 
base.css: 公共样式
 
style.css: 独立页面所使用的样式文件
 
global.css: 页面样式基础，全局公用样式，页面中必须包含
 
layout.css: 布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中
 
module.css: 模块，用于产品类页，也可与其它样式配合使用
 
master.css: 主要的样式表
 
columns.css: 专栏样式
 
themes.css: 主题样式
 
font.css: 文字，字体样式
 
forms.css: 表单样式
 
mend.css: 补丁，基于以上样式进行的私有化修补
 
print.css: 打印样式

3.CSS页面结构命名规范：

page: 代表整个页面，用于最外层
 
wrap: 外嵌套，将所有元素包在一起的一个外围包，用于最外层
 
wrapper: 页面外围控制整体布局宽度，用于最外层
 
container: 一个整体容器，用于最外层
 
head，header: 页面头区域，用于头部
 
nav: 导航条
 
左中右: left center right
 
content: 内容，网站中最重要的内容区域，用于网页中部主体
 
main: 网站中的主要区域(表示最重要的一块位置)，用于中部主体内容
 
column: 栏目
 
sidebar: 侧栏
 
foot，footer: 页尾、页脚，网站一些附加信息放置区域，或命名为copyRight用于底部

4.CSS导航命名规范：

 
nav，navbar，navigation，nav-wrapper: 导航条或导航包，代表横向导航
 
topnav: 顶部导航
 
mainbav: 主导航
 
subnav: 子导航
 
sidebar: 边导航
 
leftsidebar 或 sidebar_a: 左导航
 
rightsidebar 或 sidebar_b: 右导航
 
title: 标题
 
summary: 摘要
 
menu: 菜单，区域包含一般的链接和菜单
 
submenu: 子菜单
 
drop: 下拉
 
dropmenu: 下拉菜单
 
links: 链接菜单

5.CSS功能命名规范：

logo: 标记网站logo标志
 
banner: 标语、广告条、顶部广告条
 
login: 登录
 
loginbar: 登录条
 
register: 注册
 
tool，toolbar: 工具条
 
search: 搜索
 
searchbar: 搜索条
 
searchInput: 搜索输入框
 
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:  法律信息

未完待续，还会继续整理总结更多命名规范。为了在以后的开发中养成良好的习惯，平常就应该坚持命名的语义化和规范化。