CSS 命名规范

CSS 通用命名

1. 页面框架命名

通常具有唯一性,推荐用 ID 命名:

ID 名称 命名
头部 header
主体 main
脚部 footer
容器 wrapper
侧栏 side_bar
栏目 column
布局 layout

2. 模块结构命名

CLASS 名称 命名
模块(如:新闻模块) mod (mod_news)
标题栏 title
内容 content
次级内容 sub_content

3. 导航结构命名

CLASS 名称 命名
导航 nav
主导航 main_nav
子导航 sub_nav
顶部导航 top_nav
菜单 menu
子菜单 sub_menu

4. 一般元素命名

CLASS 名称 命名
二级 sub
面包屑 breadcrumb
标志 logo
广告 banner (禁用 ad)
登录 login
注册 register/reg
搜索 search
加入 join
状态 status
按钮 btn
滚动 scroll
标签页 tab
文章列表 list
短消息 msg/message
当前的 current
提示小技巧 tips
图标 icon
注释 note
指南 guide
服务 service
热点 hot
新闻 news
下载 download
投票 vote
合作伙伴 partner
友情链接 link
版权 copyright

项目中文件命名

  1. 符合应用场景
  2. 一律使用小写英文字母,统一要求;英文,禁止中文拼音
  3. 命名原则:使团队成员可以看懂自己代码;自己也方便查找并修改

HTML 文件命名

  1. 主页面: index.html
  2. 子页面:
    • 首页: home.html
    • 我的: mine.html
    • 关于我们: aboutus.html
    • 信息反馈: feedback.html
    • 产品: product.html
    • 购物: shop.html
    • 计数器: count.html
  3. 一级页面:
    • 登录: login.html
    • 注册: register.html
    • 用户管理: userManage.html

图片命名规则

  1. 图片文件后缀: .png, .jpg, .gif, .bmp
  2. 图片名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类

大类例如:

  • 广告、标志、菜单、按钮
  • 放在页面顶部的广告: banner
  • 企业商标、标志性图片: logo
  • 连续出现的链接栏目图片: menu
  • 装饰用的照片: pic
  • 不带链接表示标题的图片: title

范例:

  • banner_sohu.gif
  • menu_aboutus.gif
  • logo_police.gif
  • pic_iphone.jpg

文件夹存放规范

  • wwwweb: 存放前端代码文件
  • css: 存放 .css 文件
  • src: 存放 .js 文件
  • viewspages: 存放 .html.vue 文件
  • assets: 存放所有资源文件
  • images: 存放图片文件
  • library: 存放第三方库文件
  • media: 存放媒体文件
  • build: 存放经过自动化构建工具处理后的文件
  • server: 存放服务端代码文件
  • api: 存放接口文件
  • modules: 存放数据库操作文件

CSS 书写规范与性能优化方案

  1. 禁止 classid 重名
  2. 书写顺序: 布局定位属性 -> 自身属性 -> 文本属性 -> 其他属性
.box {
    /* 布局定位类 */
    float: left;
    
    /* 自身属性 */
    width: 100px;
    height: 100px;
    
    /* 文本类 */
    text-align: left;
    
    /* 其他属性 */
    background: red;
}

CSS 优化

  1. 全局考虑样式;提高代码重复使用率
  2. 多使用兼容性好的样式 (CSS2)
  3. 减少使用 position: absolutefixed 属性
  4. 重要图片加 alt 属性,重要标签加 title 属性
  5. 合理使用选择器;尽量少使用伪类选择器 nth-type-of-child()
  6. 不到万不得已,不要用 !important (权重最高)
  7. 尽量使用复合属性 (如 margin, border)
THE END