前端常用样式表名称

使用 kebab-case 命名，字母一律小写，用短横分隔单词。如果单词过长，需要使用言简意赅的缩写单词表示

样式文件命名

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

 

页面结构命名

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

 

导航命名

nav|navbar|navigation|nav-wrapper  // 导航条或导航包，代表横向导航
topnav     // 顶部导航
mainbav    // 主导航
subnav     // 子导航
sidebar    // 边导航
left-sidebar|sidebar-l   // 左导航
right-sidebar|sidebar-r  // 右导航
title      // 标题
summary    // 摘要
menu       // 菜单，区域包含一般的链接和菜单
submenu    // 子菜单
drop       // 下拉
dorp-menu  // 下拉菜单
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            // 投票
news            // 新闻
siteinfo        // 网站信息
partner         // 合作伙伴
link|friendlink // 友情链接
copyright       // 版权信息
siteinfoCredits // 信誉
siteinfoLegal   // 法律信息