CSS命名规范

规范

1、对于非通用样式,在样式比较简单的前提下,尽量使用面向属性的命名方式,如多使用pb20、ml20这种写法。
2、对于通用样式,尽量不要使用分离方式。因为不便修改。
3、三无原则:

  • 无ID,如#test,ID一般与业务有关
  • 无层级,如.test span,这种写法一是重用性低,二是会影响渲染效率
  • 无标签,ul.test同上。

CSS样式命名

网页公共命名

  • wrapper 页面外围控制整体布局宽度

  • container或#content 容器,用于最外层

  • layout 布局

  • head, #header 页头部分

  • foot, #footer 页脚部分

  • nav 主导航

  • subnav 二级导航

  • menu 菜单

  • submenu 子菜单

  • sideBar 侧栏

  • sidebar_a, #sidebar_b 左边栏或右边栏

  • main 页面主体

  • tag 标签

  • msg #message 提示信息

  • tips 小技巧

  • vote 投票

  • friendlink 友情连接

  • title 标题

  • summary 摘要

  • loginbar 登录条

  • searchInput 搜索输入框

  • hot 热门热点

  • search 搜索

  • search_output 搜索输出和搜索结果相似

  • searchBar 搜索条

  • search_results 搜索结果

  • copyright 版权信息

  • branding 商标

  • logo 网站LOGO标志

  • siteinfo 网站信息

  • siteinfoLegal 法律声明

  • siteinfoCredits 信誉

  • joinus 加入我们

  • partner 合作伙伴

  • service 服务

  • regsiter 注册

  • arr/arrow 箭头
  • guild 指南

  • sitemap 网站地图

  • list 列表

  • homepage 首页

  • subpage 二级页面子页面

  • tool, #toolbar 工具条

  • drop 下拉

  • dorpmenu 下拉菜单

  • status 状态

  • scroll 滚动

  • .tab 标签页
  • .left .right .center 居左、中、右
  • .news 新闻
  • .download 下载
  • .banner 广告条(顶部广告条)

电子贸易相关

  • .products 产品
  • .products_prices 产品价格
  • .products_description 产品描述
  • .products_review 产品评论
  • .editor_review 编辑评论
  • .news_release 最新产品
  • .publisher 生产商
  • .screenshot 缩略图
  • .faqs 常见问题
  • .keyword 关键词
  • .blog 博客
  • .forum 论坛

CSS文件命名 说明

  • master.css,style.css 主要的
  • module.css 模块
  • base.css 基本共用
  • layout.css 布局,版面
  • themes.css 主题
  • columns.css 专栏
  • font.css 文字、字体
  • forms.css 表单
  • mend.css 补丁
  • print.css 打印

参考:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5%91%BD%E5%90%8D%E5%87%86%E5%88%99%E6%96%B9%E6%B3%95/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容