在前端开发中,规范使用 DIV+CSS 命名,可以增强团队合作提高开发效率,有利于页面后期的维护和优化。

1、页面结构

  wrap:外套、包裹,用于最外层。

  wrapper:外套,用于页面外围控制整体布局宽度。

  box:盒子,容器。

  header:头部,用于页头部分。

  nav:导航,主导航。

  main:主要区域,内容主体。

  content/container:内容,内容容器。

  sidebar:侧边栏。

  footer:底部,用于页脚部分。

2、功能区块

  left center right:左中右。

  main-left:左侧主要布局。

  main-right:右侧主要布局。

  logo:网站 LOGO 标志。

  search:搜索输入框。

  loginbar:登录条。

  regsiter:注册模块。

  banner:广告,用于横幅广告条。

  menu:菜单。

  submenu:子菜单,二级菜单。

  top:顶部。

  topnav:顶导航。

  mainnav:主导航。

  subnav:子导航,二级导航。

  leftsideBar:左导航。

  rightsideBar:右导航。

  topbar:顶部工具/菜单。

  bottom:底部。

  bottombar:底部工具栏。

  tool:工具条。

  shop:功能区,如购物车、收银台。

3、其他常用命名

  title:栏目标题。

  summary:摘要。

  hot:热门热点信息,推荐。

  msg:提示信息。

  news:新闻。

  list:列表,文章列表。

  piclist:图片列表。

  newslist:新闻列表。

  search-output:搜索输出。

  search-results:搜索结果。

  drop/dropdown:下拉。

  dropmenu/dorpdown-content:下拉菜单。

  scroll:滚动。

  homepage:首页。

  subpage:子页面,二级页面。

  tag:标签。

  tab:标签页。

  tips:小技巧。

  ranking:排行。

  vote:投票。

  bth:按钮。

  icon:图标。

  arr/arrow:箭头。

  status:状态。

  note:注释。

  skin:皮肤。

  current:当前的。

  active:活跃的,有效的。

  download:下载。

  friendLink:友情链接。

  copyright:版权信息。

  partner:合作伙伴。

  joinus:加入我们。

  sitemap:网站地图。

  siteinfo:网站信息。

  siteinfoLegar:法律声明。

  announcement:公告。

  guild:指南。

  service:服务。

  promotion:推广。

  blog:博客。

  forum:论坛。

4、产品相关命名

  keyword:关键词。

  products:产品。

  products-prices:产品价格。

  products-description:产品描述。

  products-review:产品评论。

  editor-review:编辑评论。

  news-products:最新产品。

  publisher:生产商。

  screenshot:缩略图。

  faqs:常见问题。

  barnding:商标。

  pay:充值。

  reputation:信誉。

5、常用的文件命名

  全局样式:global.css

  布局结构:layout.css

  基本共用:base.css

  综合样式:style.css

  主要的:master.css

  模块:module.css

  表单:forms.css

  主题/网页换肤:themes.css

  字体:font.css

  打印:print.css

  补丁:mend.css

  私有样式/独立页面,根据实际情况,可以自定义命名 CSS 文件。

  以上这些常用的文件命名,无需全部使用,根据实际情况,每个页面引用不超过 3 个 CSS 文件。

6、 ID 和 Class 命名规范

  (1)、主要的、重要的、特殊的、最外层的盒子使用 ID 属性命名,其他的都使用 class 属性命名。

  (2)、命名规则须以内容优先,表现为辅。首先根据所要呈现的内容、功能来命名,如果内容实在无法找到合适的命名,可以再根据表现命名。

  (3)、大多数情况下,命名都使用英文单词,可以增加代码的可读性,但特殊情况下,实在找不到合适的单词时,可以使用拼音命名,但必须简明,结构清晰。

  (4)、ID 和 Class 命名尽量全部都使用小写,多个单词可以使用连字符(-)链接,命名可以使用数字,但不能以数字开头。

  (5)、命名可以使用单词缩写,但必须确保是有效的缩写,即别人能看懂,不能自定义缩写。

CSS 常用命名的更多相关文章

  1. 第64天:CSS常用命名规范,有用!

    CSS常用命名,必须记住 一.常用命名 标题:title 摘要:summary 箭头:arrow 商标:label 网站标志:logo 转角/圆角:corner 横幅广告:banner 子菜单:sub ...

  2. web前端开发企业级CSS常用命名,书写规范总结

    1.常用命名 标题: title 摘要: summary 箭头: arrow 商标: label 网站标志: logo 转角/圆角: corner 横幅广告: banner 子菜单: subMenu ...

  3. css常用命名规则

    (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrappe ...

  4. css常用命名

    常用的CSS命名 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中 ...

  5. 你如果知道这些css常用命名,绝对事半功倍!--摘抄

    对于布局,即用.g-作为前缀,通常有以下推荐的写法 对于模块,即.m-作为前缀.元件,.u-作为前缀,通常有下面推荐的写法. 对于功能,即以.f-为前缀,通常推荐如下: 对于颜色,即以.s-为前缀,通 ...

  6. 搜狐前端css常用命名

  7. CSS的class、id、css文件名的常用命名规则

    CSS的class.id.css文件名的常用命名规则        (一)常用的CSS命名规则 头:header       内容:content/container       尾:footer   ...

  8. HTML常用命名和CSS reset代码【收集总结】

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  9. div+css样式表的id,class的常用命名规则

    div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...

随机推荐

  1. linux命令之nohup

    功能: 使进程在退出登录后仍旧继续执行,nohup就是不挂起的意思(no hang up). 格式:$nohup command 和 $nohup command & 两种,二者之间的区别就是 ...

  2. Jquery UI 组合树 - ComboTree 集成Wabacus4.1 代码剖析

    Jquery UI 1.3 (组合树 - ComboTree ) 集成Wabacus4.1 集成Spring 代码剖析 使用时,请下载需要Jquery ui包进行配置 combotree.js 的代码 ...

  3. [GIF] Colors in GIF Loop Coder

    In this lesson we cover the different methods for defining and animating colors in GIF Loop Coder. f ...

  4. Android内存、性能是程序永恒的话题

    内存.性能是程序永恒的话题,实际开发中关于卡顿.OOM也经常是打不完的两只老虎,关于卡顿.OOM的定位方法和工具比较多,这篇文章也不打算赘述了,本章主要是来整理一下JVM的内存模型以及Java对象的生 ...

  5. Jquery关闭离开页面时提醒

    [导读] 离开页面提示多般是放到了发新闻或写日志的页面,我们在百度空间或QQ空间在我们未保存信息时如果离开页面都有提示了,下面我来介绍利用jquery的beforeunload来实现此方法. jque ...

  6. css实现基础几何图形

    我们知道,css3通过border-radius.animation.transform等“新”特性可以绘制很多精致的图形.比如腾讯企鹅Logo.超能陆战队中的大白机器人.太阳系.小黄人.叮当猫.安卓 ...

  7. ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果?

    ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app="& ...

  8. String filePath = request.getSession().getServletContext().getRealPath("/");这句话返回的路径是什么,解释下getRealPath("/")函数中的"/"表示什么意思

    request.getSession().getServletContext() 获取的是Servlet容器对象,相当于tomcat容器了.getRealPath("/") 获取实 ...

  9. php注册登录时生成的验证码

    http://blog.sina.com.cn/s/blog_8173443e01012l82.html 记得我学php时第一件事就是研究登陆注册.当然,登陆少不了验证码.两年过去了,昨天突然想用个验 ...

  10. hadoop_集群安装_1

    这篇文章中主要介绍的是,如何基于VM安装Linux,以及如何在安装好Linux之后,基于操作系统安装VMTools. 在安装之前,应该先规划好 每个node*的IP地址,以及 hostname: no ...