css命名规范(转载)

一、文件规范

      外联CSS文件适用于全站级和产品级通用的大文件。内联CSS文件适用于在一个或几个页面共用的CSS。另外一对具体的CSS进行文档化的整理。如:

  - util-01 reset /css/core/reset.css
  - util-02 通用模块容器 /css/core/mod.css
  - ui-01. 喜欢按钮 /css/core/fav_btn.css
  - ui-02. 视频/相册列表项 /css/core/media_item.css
  - ui-03. 评星 /css/core/rating.css
  - ui-04. 通用按钮 /css/core/common_button.css
  - ui-05. 分页 /css/core/pagination.css
  - ui-06. 推荐按钮 /css/core/rec_btn.css
  - ui-07. 老版对话框 /css/core/old_dialog.css
  - ui-08. 老版Tab /css/core/old_tab.css
  - ui-09. 老版成员列表 /css/core/old_userlist.css
  - ui-10. 老版信息区 /css/core/notify.css
  - ui-11. 社区用户导航 /css/core/profile_nav.css
  - ui-12. 当前大社区导航 /css/core/site_nav.css
  - ui-13. 加载中 /css/lib/loading.css

二、class和id命名规范

  (1)页面结构

    - 容器: container
    - 页头:header
    - 内容:content/container
    - 页面主体:main
    - 页尾:footer
    - 导航:nav
    - 侧栏:sidebar
    - 栏目:column
    - 页面外围控制整体布局宽度:wrapper
    - 左右中:left right center

  (2)导航

    - 导航:nav
    - 主导航:mainbav
    - 子导航:subnav
    - 顶导航:topnav
    - 边导航:sidebar
    - 左导航:leftsidebar
    - 右导航:rightsidebar
    - 菜单:menu
    - 子菜单:submenu
    - 标题: title
    - 摘要: summary

  (3)功能

    - 标志:logo
    - 广告:banner
    - 登陆:login
    - 登录条:loginbar
    - 注册:regsiter
    - 搜索:search
    - 功能区:shop
    - 标题:title
    - 加入:joinus
    - 状态:status
    - 按钮:btn
    - 滚动:scroll
    - 标签页:tab
    - 文章列表:list
    - 提示信息:msg
    - 当前的: current
    - 小技巧:tips
    - 图标: icon
    - 注释:note
    - 指南:guild
    - 服务:service
    - 热点:hot
    - 新闻:news
    - 下载:download
    - 投票:vote
    - 合作伙伴:partner
    - 友情链接:link
    - 版权:copyright

三、代码性能优化

  - 合并margin、padding、border的-left/-top/-right/-bottom的设置,尽量使用短名称。
  - 选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置。
  - 注意选择器的性能,不要使用低性能的选择器。
  - 禁止在css中使用*选择符。
  - 除非必须,否则,一般有class或id的,不需要再写上元素对应的tag。
  - 0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px。
  - 如果是16进制表示颜色,则颜色取值应该大写。
  - 如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC 。
  - 如果没有边框时,不要写成border:0,应该写成border:none 。
  - 尽量避免使用AlphaImageLoader 。
  - 在保持代码解耦的前提下,尽量合并重复的样式。
  - background、font等可以缩写的属性,尽量使用缩写形式 。

常用样式测试工具:

W3C CSS validator:http://jigsaw.w3.org/css-validator/
CSS Lint:http://csslint.net/
CSS Usage:https://addons.mozilla.org/en-us/firefox/addon/css-usage/

原文地址:https://www.cnblogs.com/ycyh1314/p/10522558.html