大部分前端程序员都有命名强迫症,要花很长时间来想这个本来不是问题的问题。下面总结了样式文件命名和模块class类别命名。请记得收藏!
以下命名中如果有多个单词,遵循的是驼峰命名法。
一.CSS文件命名规范
文件分类 | 名称 |
全局样式 | global.css |
重置样式 | reset.css |
布局、版面 | layout.css |
字体样式 | font.css |
按钮样式 | button.css |
主要的 | master.css |
专栏 | columns.css |
主题 | themes.css |
模块 | module.css |
基本共用 | base.css/common.css |
二.页面结构
模块 | 名称 | 模块 | 名称 |
内容/容 器: | content/container | 页 头 | header |
页面主体 | main | 模块头 | hd |
页 尾 | footer | 栏目 | column |
模块 | mod | 左右中 | left right center |
模块内容容器 | md | 页面外围控制整体布局宽度 | wrapper/layout |
三.导航
模块 | 名称 | 模块 | 名称 |
导航 | nav | 子导航 | subnav |
顶导航 | topnav | 边栏 | sidebar |
左导航 | leftsidebar | 右导航 | rightsidebar |
菜单 | menu | 子菜单 | submenu |
摘要 | summary | 目录 | toc |
四.功能 (个人有个人的书写规范,不做强制要求)
模块 | 名称 | 模块 | 名称 |
标志 | logo | 广告 | banner |
登陆 | login | 登录条 | loginbar |
注册 | regsiter | 搜索 | search |
功能区 | scope | 栏目标题 | title |
加入 | join | 状态 | status |
按钮 | btn | 滚动 | scroll |
标签页 | tab | 列表 | list |
提示信息 | msg | 当前的 | current /cur |
小技巧 | tips | 图标 | icon |
注释 | note | 指南 | guild |
服务 | service | 热点 | hot |
新闻 | news | 下载 | download |
投票 | vote | 合作伙伴 | partner |
友情链接 | friendlink | 版权 | copyright |
活动元素 | active | 未活动元素 | normal |